gulp安装&简单使用

一、简介

gulp是前端开发过程中，自动化构建工具。不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。

gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

在实现上，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

二、gulp环境搭建

链接文章：gulp官方文档

1、安装nodejs

安装方式： 打开nodejs官网（https://nodejs.org/en/），下载所需版本（.msi文件）。

   如果想要全局范围内使用，可以将其配置到环境变量path中。（环境变量配置）

安装成功验证方式：打开cmd命令行或者终端，命令node -v可以查看node版本号；因为现在npm集成到node里，所以不用安装npm就能查看npm的版本信息，同样命令npm -v。

npm： 是Node.js的包管理工具（package manager）。

大师兄说，在Node.js上开发时，会用到很多别人写的JavaScript代码。如果需要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。 更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

2、安装cnpm

链接文章：npm和cnpm（windows）安装步骤

链接文章：淘宝 NPM 镜像

npm从国外服务器下载文件（比如插件），但是受网络影响，下载过程中可能出现异常导致下载失败。

其实我们可以下载淘宝团队整理在国内服务器的文件（http://npm.taobao.org）；

安装命令：npm install cnpm -g --registry=https://registry.npm.taobao.org

执行方式：cnpm跟npm用法一致，执行命令时将npm改成cnpm即可。

安装成功验证方式：cnpm -v

3、全局安装gulp

安装 gulp 命令行工具：cnpm install gulp -g  

查看版本号：gulp -v

三、gulp的简单使用示例

（1）创建项目目录并进入 （2）在该目录下创建配置文件package.json文件    cnpm init  该命令将指引你设置项目名、版本、描述信息等    cnpm help package.json  该命令查看package.json帮助文档

比如一个package.json文件内容：

{ "name": "gulptest", //项目名称（必须）不能有大写 "version": "0.0.1", //项目版本（必须） "description": "这是一个gulp的测试程序", //项目描述（必须） "homepage": "", //项目主页 "main": "index.js", //入口文件 "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ //关键词 "gulp" ], "author": "wuxunxun007", //作者 "license": "ISC" //项目许可协议 "devDependencies": { //项目依赖的插件（重要），如果插件安装了，该插件会被自动添加在这儿 "gulp": "^3.8.11", "gulp-less": "^3.0.0" } }

（3）安装 gulp，作为开发时依赖项    cnpm install gulp --save-dev    安装完成后，就会在项目目录下产生一个node_modules文件

（4）此时最好再次检查gulp版本，应该有命令行gulp版本以及本地gulp版本    gulp --version （5）在项目根目录下创建一个名为 gulpfile.js 的文件，在这个js文件中写上js代码，就可以使用。 （6）在项目根目录下执行 gulp 命令：gulp 或者是 gulp 任务名 或其他方式，就可以查看执行后的结果。

四、gulp 实现的最常见的功能

gulp 最常见的4个API ：src dest watch task

案例1：复制单个文件

将一个.html文件复制到另一个目录下：

var gulp =require("gulp"); gulp.task("_copy",function(){ gulp.src("./src/source.html").pipe(gulp.dest("./dest/")); });

在命令行末执行 gulp _copy ，能看到原来dest这个文件夹是空的，现在有了从src文件夹复制过来的文件source.html，说明复制成功。

案例2：复制全部文件

要复制项目的 所有文件 和 文件夹（包括子文件夹，不管有多少级）有两种方式：（xx/** 代表所有目录 xx 下的所有目录）

“./**/*” 当前路径用 “.” :“*/**/*”

把项目目录下的所有文件都进行拷贝：

var gulp =require("gulp"); gulp.task("_copy",function(){ gulp.src("./src/**/*").pipe(gulp.dest("./dest/")); });

把src里面的所有文件，不管有多少级都给复制到dest文件里面了。 开发目录与部署目录的区别：查 链接知乎：大公司里怎样开发和部署前端代码？

案例3：watch监听

实现的功能是，_src目录下的source.html文件发生改变时，自动执行后面的任务，将gulpfile.js所在文件夹中的所有内容拷贝到目录文件下。

gulp.task("_watch",function(){ gulp.watch("./src/source.html",function(){ gulp.src("./**/*").pipe(gulp.dest("./dest/")) }) })

当然，对watch()的使用一般以解构方式，但是gulp.watch()无法监听到新增加的文件，这样一来，我们每次增加文件时都要执行gulp命令来重启服务。这并不是我们希望的结果，可以引入gulp-watch模块解决这个问题。

请看官网：gulp中文文档 API 及 插件 的使用

五、gulp的插件

gulp本身只做一些文件的拷贝，监视等，但是它提供了很多的接口，由插件完成更多对应的任务。如：js文件的编译，合并文件，压缩文件，优化图片的尺寸，创建本地的开发服务器。下面介绍一些常用插件，其他可以查找官方文档。

1、插件安装命令，moduleName代表所安装插件模块：

npm install moduleName            安装模块到项目目录下；npm install -g moduleName          -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置；npm install -save moduleName        -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖；npm install --save-dev moduleName     --save-dev 的意思是将模块安装到项目目录下，并作为开发依赖保存到 packsge.json 中的 devDependencies节点中。

2、合并文件：

安装命令：cnpm install gulp-concat --save-dev

var gulp =require("gulp"); var concat=require("gulp-concat"); gulp.task("_concat",function(){ gulp.src(["./js/a.js","./js/b.js"]).pipe(concat("concat0.js")).pipe(gulp.dest("./dest")); })

gulpfile.js所在项目目录下新建一个js文件下，写两个文件，分别命名a.js、b.js； 然后终端运行 gulp _concat 命令，然后打开看dest文件夹里新出现了一个文件concat0.js文件，打开，查看，已经将之前js文件夹里的两个js文件的内容合并在concat0.js里了。

3、压缩文件：删除多余的空格

先安装插件uglify：cnpm install gulp-uglify --save-dev

var gulp =require("gulp"); var uglify=require("gulp-uglify"); gulp.task("_uglify",function(){ gulp.src("./js/a.js").pipe(uglify()).pipe(gulp.dest("./dest/")); })

原来的a.js是以第一幅图片的格式写的，但是压缩完成后，目标文件夹中的a.js则是压缩后去掉多余空格的格式。

4、结合示例：合并，压缩，重命名

装插件rename：cnpm install gulp-rename --save-dev

var gulp =require("gulp"); var concat=require("gulp-concat"); var uglify=require("gulp-uglify"); var rename=require("gulp-rename"); gulp.task("_together",function(){ gulp.src(["./js/a.js","./js/b.js"]) .pipe(concat("tools.js")) .pipe(uglify()) .pipe(rename("tools.min.js")) .pipe(gulp.dest("./dest/")); })

在终端执行命令： 这两张是js文件里面的原始文件： 当合并、压缩、重命名完成后，现在是完成后的效果：

5、压缩css：

安装插件：cnpm install gulp-minify-css --save-dev

var gulp =require("gulp"); var minfyCss=require("gulp-minify-css"); gulp.task("_minfyCss",function(){ gulp.src("./css/reset.css").pipe(minfyCss()).pipe(gulp.dest("./dest")); })

这是原来的css格式： 这是压缩后的css格式，很明显，空格什么都都没有了：

6、压缩图片：

安装插件：cnpm install gulp-imagemin --save-dev

var gulp =require("gulp"); var imageMin=require("gulp-imagemin"); gulp.task("_imageMin",function(){ gulp.src("./img/**/*") .pipe(imageMin()) .pipe(gulp.dest("./dest/image/")) })

执行gulp任务： 图片被压缩到目标文件夹了：

7、将ES6转换为ES5：

为什么要转换成es5？

es6语法以及提供的强大api给前端带来了很大便利，可是部分浏览器无法识别es6语法。而gulp-ugilfy无法压缩es6，如果代码有使用es6的语法，则压缩会失败。所以在打包的时候，我们有时需要将es6编译成es5。

安装插件： cnpm install --save-dev babel-preset-es2015 cnpm install --save-dev gulp-babel@7 babel-core babel-preset-env

var gulp =require("gulp"); var babel=require("gulp-babel"); gulp.task("_es65",function(){ gulp.src("./js/QueryString.js") .pipe(babel({presets:['es2015']})) .pipe(gulp.dest("./dest/")); })

执行命令：执行成功 转换前：es6 转换后，es5

六、常见问题

Pipe就是管道

gulp.src()    读取将要处理的文件，即源文件。pipe()     管道，如何处理该文件（如：sass编译，复制文件，压缩文件等）。gulp.dest()   处理后的文件的路径，即目的文件。

cannot find module

如果出现了cannot find module ’插件’，表示该模块没有安装成功；

解决：执行cnpm install gulp ‘插件’ --save-dev，就可以单独安装该模块。

例如： 说明模块glob-watcher没有安装成功； 执行以下命令安装设备依赖：cnpm install gulp glob-watcher --save-dev 如下图：

正在进行的项目如何用gulp:

新建空文件夹作为项目的文件夹（不要用gulp作为项目文件夹）用npm初始化项目：用npm init命令产生package.json文件（或 cnpm init）本地安装gulp，安装完命令行工具及设备依赖后，会生成node_modules文件夹把项目目前的所有文件拷贝的到新建的项目文件夹里在项目根目录下写gulpfile.js的代码执行

package.json 配置文件

之前我们cnpm init创建的package.json配置文件，当我们安装插件成功后，就会在该文档中自动添加依赖说明，比如设备依赖，如下：

package.json

{ "name": "20200702", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.3", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1", "gulp": "^4.0.2", "gulp-babel": "^7.0.1", "gulp-concat": "^2.6.1", "gulp-imagemin": "^7.1.0", "gulp-minify-css": "^1.2.4", "gulp-rename": "^2.0.0", "gulp-uglify": "^3.0.2" } }

能看到devDependencies中添加了很多插件名称。