gulp安装&简单使用

拼搏现实的明天。 2023-02-22 07:44 1阅读 0赞

#### 一、简介 ####

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

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

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

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

#### 二、gulp环境搭建 ####

链接文章：[gulp官方文档][gulp]

###### 1、安装nodejs ######

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

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

*  安装成功验证方式：打开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_cnpm_windows]

链接文章：[淘宝 NPM 镜像][NPM]

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

其实我们可以下载淘宝团队整理在国内服务器的文件（[http://npm.taobao.org][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  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]  
（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，说明复制成功。  
![在这里插入图片描述][20200702203746661.png]

###### 案例2：复制全部文件 ######

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

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

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

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

把src里面的所有文件，不管有多少级都给复制到dest文件里面了。  
![在这里插入图片描述][20200702205325911.png]  
开发目录与部署目录的区别：***查***  
链接知乎：[大公司里怎样开发和部署前端代码？][Link 2]

###### 案例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_ 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；  
![在这里插入图片描述][20200703105249412.png]  
然后终端运行 gulp \_concat 命令，然后打开看dest文件夹里新出现了一个文件concat0.js文件，打开，查看，已经将之前js文件夹里的两个js文件的内容合并在concat0.js里了。  
![在这里插入图片描述][20200703105232719.png]

**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则是压缩后去掉多余空格的格式。  
![在这里插入图片描述][2020070320085035.png]![在这里插入图片描述][20200703201008959.png]

**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/"));
    })

在终端执行命令：  
![在这里插入图片描述][20200703202800436.png]  
这两张是js文件里面的原始文件：  
![在这里插入图片描述][2020070320085035.png]![在这里插入图片描述][20200703202642663.png]  
当合并、压缩、重命名完成后，现在是完成后的效果：  
![在这里插入图片描述][20200703202628439.png]

**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格式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]  
这是压缩后的css格式，很明显，空格什么都都没有了：  
![在这里插入图片描述][20200703203448350.png]

**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任务：  
![在这里插入图片描述][20200703204404839.png]  
图片被压缩到目标文件夹了：  
![在这里插入图片描述][20200703204446703.png]

**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/"));
    })

执行命令：执行成功  
![在这里插入图片描述][20200704092159583.png]  
转换前：es6  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]  
转换后，es5  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]

#### 六、常见问题 ####

###### Pipe就是管道 ######

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

###### cannot find module ######

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

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

例如：  
![在这里插入图片描述][20200703090856415.png]  
说明模块glob-watcher没有安装成功；  
执行以下命令安装设备依赖：cnpm install gulp glob-watcher --save-dev  
如下图：  
![在这里插入图片描述][20200703090905607.png]

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

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

###### 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中添加了很多插件名称。

[gulp]: https://www.gulpjs.com.cn/docs/getting-started/quick-start/
[Link 1]: https://blog.csdn.net/jiang7701037/article/details/80707786
[npm_cnpm_windows]: https://blog.csdn.net/wjnf012/article/details/80422313
[NPM]: https://developer.aliyun.com/mirror/NPM?from=tnpm
[http_npm.taobao.org]: http://npm.taobao.org
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200702195156559.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200702203746661.png]: https://img-blog.csdnimg.cn/20200702203746661.png
[20200702205325911.png]: https://img-blog.csdnimg.cn/20200702205325911.png
[Link 2]: https://www.zhihu.com/question/20790576?sort=created
[gulp_ API _ _]: https://www.gulpjs.com.cn/docs/api/watch/
[20200703105249412.png]: https://img-blog.csdnimg.cn/20200703105249412.png
[20200703105232719.png]: https://img-blog.csdnimg.cn/20200703105232719.png
[2020070320085035.png]: https://img-blog.csdnimg.cn/2020070320085035.png
[20200703201008959.png]: https://img-blog.csdnimg.cn/20200703201008959.png
[20200703202800436.png]: https://img-blog.csdnimg.cn/20200703202800436.png
[20200703202642663.png]: https://img-blog.csdnimg.cn/20200703202642663.png
[20200703202628439.png]: https://img-blog.csdnimg.cn/20200703202628439.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200703203545142.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200703203448350.png]: https://img-blog.csdnimg.cn/20200703203448350.png
[20200703204404839.png]: https://img-blog.csdnimg.cn/20200703204404839.png
[20200703204446703.png]: https://img-blog.csdnimg.cn/20200703204446703.png
[20200704092159583.png]: https://img-blog.csdnimg.cn/20200704092159583.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200704091411523.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200704091907890.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[20200703090856415.png]: https://img-blog.csdnimg.cn/20200703090856415.png
[20200703090905607.png]: https://img-blog.csdnimg.cn/20200703090905607.png