npm与gulp的使用

这边将工作中使用的npm以及gulp的一些方法做了整理,方便以后查阅,至少不用去麻烦度娘了~

A.npm的使用:

  1.在你所需要的文件夹里面初始化npm-->  npm init -y    --->会生成一个package.json文件

  2.根据需要下载相应的文件-->   npm install jquery --save  或者  npm install jquery --save-dev   --->这两种做法都会在package.json文件里面生成一个当前文件的版本号,并且该指令还会生成一个node_modules文件夹,下载的文件放在文件夹中

B.gulp的使用:

  1.将上述A中生成的package.json文件拷贝到当前文件夹下面,为的是下载package.json里面的文件

  2.安装gulp,通过npm来安装 --->  npm install gulp-cli -g --->(g指的是全局的)

  3.在当前项目中安装gulp --->  npm install gulp --save

  4.在当前项目中新建一个文件 ---> gulpfile.js --->在这个文件里面写gulp指令

此时就可以使用了,在使用之间先将gulp里面的一些方法列举出来:1--> gulp.task("任务名称",function(){}); -->使用时: 在git里面敲上:gulp 任务名称

                               2--> gulp.src([‘文件路径1‘,‘文件路径2‘]); -->当有多个路径时要用数组的形式传递参数

                               3--> gulp.dest(‘文件路径‘); -->指定最终处理之后的文件的存放路径

                               4--> gulp.watch(); -->自动监视文件的变化,然后执行相应的任务

  5.在执行前要下载相应的文件:1-- 对多个文件进行合并 -->npm install gulp-concat --save

                2-- 对js文件进行压缩 -->npm install gulp-uglify --save

                3-- 对css文件进行压缩 -->npm install gulp-cssnano --save

                4-- 对html文件进行压缩 -->npm install gulp-htmlmin --save

  6.举个栗子:

    在该文件夹下有个js文件夹,里面有a.js 和 b.js,现在要将这两个合并且压缩到test文件夹下面的js文件夹中,即js/a.js,b.js ----> test/js/test.js

    过程:

     在git里面的操作:

      npm install gulp-concat --save

      npm install gulp-uglify --save

     在gulpfile.js里面的操作:

      var concat = require(‘gulp-concat‘)

      var uglify = require(‘guulp-uglify‘) 

      gulp.task(‘script‘,function(){

        gulp.src([‘./js/a.js‘,‘./js/b.js‘])-->合并之前的文件名称

        .pipe(concat(‘test.js‘))-->这边是合并之后的文件名称

        .pipe(uglify())

        .pipe(gulp.dest(‘test/js‘))

      })

    在git里面的操作:

      gulp script -->相当于执行上面的操作

  下图相当于它的一个执行过程的比喻

时间: 2024-10-11 04:12:29

npm与gulp的使用的相关文章

npm下载gulp出错问题解决

(win8系统) 前几天因为npm下载weinre老是出错,于是一怒之下重装系统...... 于是这几天都在搭建环境 到了gulp这里,又死掉了..... 作为一个程序媛小白,只能到处百度 由于npm的服务器是在美国,npm下载失败的原因也有很多,防火墙也是一个坑.... 最后在stack overflow 里面找到了解决方法 出错提示  (解析不了json文件,于是小白我去打开一下那个json,果然都是null) failed to parse json 只要输入 npm cache clea

npm bower gulp

npm即nodejs package manager ,是nodeJs的包管理工具,使用前需安装nodeJs(https://www.npmjs.com.cn/getting-started/installing-node/) bower,Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.bower从远程git仓库获取代码包,使用前需安装git; 打开命令窗口: 查看已安装的版本 全局安装gulp 在项目目录下 npm in

npm ande gulp cmd

在学习前,先谈谈大致使用gulp的步骤,给读者以初步的认识.首先当然是安装nodejs,通过nodejs的npm全局安装和项目安装gulp,其次在项目里安装所需要的gulp插件,然后新建gulp的配置文件gulpfile.js并写好配置信息(定义gulp任务),最后通过命令提示符运行gulp任务即可. 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1.安装nodejs 1.1.说明:gulp是基于

node、npm、gulp安装

1.先安装node.js ,官网下载地址:https://nodejs.org/en/ 2.安装完node之后,npm自动就安装了.可以直接在visual studio code 通过命令查看 node -v npm -v 3.由于npm的镜像国内的网络不行,我们需要将npm 镜像指向淘宝的npm镜像,执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org 4.接下来,所有npm相关的命令,我们都用 cnpm来代替,

npm执行gulp提示编译错误

script如下 "test":"gulp --gulpfile test.js" 运行 npm run test ,提示编译错误 解决办法如下: 增加script "start":"npm run test", "test":"gulp --gulpfile test.js" 运行如命令即可:npm run start 原文地址:https://www.cnblogs.com/zina

npm和gulp学习笔记

原文链接:[gulpfile.js文件常见配置]

npm、nvm、nrm

随着前端技术的不断更新和发展,nodejs也越来越流行,作为一个web developer,要安装的依赖包.工具库也越来越多,所以npm几乎是所有前端开发者所必须要用到的,我在工作中曾经遇到过这样的问题,我在工作中需要和同事共同开发一个项目,我去git上把他的代码拉下来,习惯性的运行npm install,但是控制台报错了,说是node版本错误,于是我按要求重新下载了新版本的node,然后安装---->开发,几天后,该项目完了,我要回去继续开发我之前的项目,结果一回到之前那个项目,又报错node

git上传文件到github与gulp的简单使用

git有两种方式提交源代码到github 第一种方式通过地址提交下面介绍的是通过ssh方式上传 git使用ssh方式上传代码到githubgit首先要生成公钥和私钥 将公钥添加到github中将私钥保存在本地 + 命令:`ssh-keygen -t rsa`生成的公钥与私钥文件会在当用户目录的.ssh目录下. 把代码push到服务器时需要先pull一下(pull的作用是从远程下载git项目里的文件,然后将文件与本地的分支进行merge) git pull和gitclone区别:git pull

Gulp新手入门教程

Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 当然Gulp能做的远不止这些.如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器.Gulp真的足够强大,但你必须学会驾驭它. 这是这篇文章的主要目的.帮助你了解Gulp的基础用法,助你早日完成一统天下的大业. 在我们深入了解之前,我们先来说说为什么是Gulp. 为什么是Gulp? 类似Gulp的