Gulp自动化工具详解2

Gulp使用教程

一、简介

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

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

2. 安装nodejs

2.1、说明：gulp是基于nodejs，理所当然需要安装nodejs；

2.2、安装：打开nodejs官网（https://nodejs.org/en/），点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。

注：安装完成之后注意将其配置到环境变量（系统变量path中），这样你就可以在全局范围内去使用它了

我的路径是在D:\Program Files\nodejs\node_modules\npm\bin，记得把它也配置进去

(注：node的环境变量一定要是在最前面，基于node环境安装的插件如cordova，gulp等才会起作用)

配置环境变量方法：

将软件安装目录下的bin目录复制到系统环境变量的变量值处即可。

2.3测试：按window + r 输入cmd回车，然后输入node -v

         然后输入npm -v 

             如果都能打印出相应版本信息，那么说明你配置成功了

v是version版本的缩写。

3. 选装cnpm

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。

网址：http://npm.taobao.org 

安装：命令提示符执行

npm install cnpm -g --registry=https://registry.npm.taobao.org

注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；

将路径C:\Users\asus\AppData\Roaming\npm\node_modules\cnpm配置到环境变量中，这样就可以在全局范围内使用cnpm命令了

注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm代替npm）。

（以上三步是安装node环境，并安装cnpm插件库。node环境使我们可以运行node下的插件，cnpm是node下的一个大的模块，里面提供了很多插件，我们可以通过cnpm就可以在国内的服务器下载到国外的npm服务器下的插件）

4. 全局安装gulp

在cmd中执行 cnpm install gulp -g

查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装

注意配置环境变量（C:\Users\asus\AppData\Roaming\npm\gulp）

5. 新建package.json文件

进入自己需要的一个文件夹中  （创建一个自己需要的文件夹）

在dos中打开你创建文件夹的路径： cd F:\workspace\gulp

cd空格路径，表示进入该路径

cd.. 表示返回到上一文件夹

创建package.json文件步骤：

   在当前路径下输入 cnpm init  ，回车运行

该json文件用于记录在该插件所在安装目录下安装过的所有的插件。

在路径  下会形成这样的一个.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"

  }

}

查看package.json帮助文档，命令提示符执行cnpm help package.json

6. 本地安装gulp插件

安装：定位目录命令后提示符执行cnpm install gulp --save-dev；

本示例以gulp-less为例（编译less文件），命令提示符执行cnpm install gulp-less --save-dev；

将会安装在node_modules的gulp-less目录下，该目录下有一个gulp-less的使用帮助文档README.md；

（4,5,6三步是用来安装node下插件的通用方法，当我们安装过node环境后，只需要进行4，5，6三步就可以完成node下大的插件类的安装。先全局安装，再在目标路径生成一个json文件用于记录安装了那些东西，再在目标路径下本地安装这个大类的插件）

目前使用的gulp插件有：gulp，gulp-less，gulp-sass，gulp-connect，gulp-contact，gulp-uglify, gulp-rename, gulp-minify-css，gulp-imagemin

gulp是gulp下的核心插件，其下提供task，dest，src，pipe等多种方法

less把less后缀的文件自动改成css格式

less把sass后缀的文件自动改成css格式

connect用于起服务器，生成一个服务器端口，输入生成的localhost：端口号，即可以服务器的形式打开这个文件

gulp-contact：用于合并两个文件

gulp-uglify：用于压缩文件，删掉所有的空格和换行，会大大减小文件的大小。

gulp-rename:用于重命名文件

gulp-minify-css：用于压缩css文件

gulp-imagemin：用于压缩图片

gulp是gulp下的核心插件，其下提供task，src，pipe，dest等多种方法：

task表示创建一个gulp任务，其内有两个参数，第一个是任务名，第二个是任务响应函数。

src选择要操作的文件

pipe有一个参数，参数内执行gulp本身或是其他插件的一些方法（注：pipe方法一定是在src方法基础之上再点出的方法，不能直接gulp.pipe（），只能gulp.src().pipe()。）

dest把操作完成的文件输出到参数所示路径。

通过在dos中输入gulp任务名，来调用该任务。

使用.pipe管道方法，如果没有对应的文件夹，就会自动创建该名称的文件夹

使用gulp下的插件时，要先移入插件：

（只有在dos中，进入到本地安装插件的目录下，输入运行插件的命令，才能正确运行该插件。gulp运行插件的命令是gulp 任务名）

gulp.dest()，就是调用gulp插件下的dest方法，dest方法是将上述src到的文件输出到参数中的目录下。

gulp下复制文件的方法

创建gulp任务–-找到要被操作的文件–执行某种操作。

任务名都是自己任意定义的，他只是一个标记，并不是关键字。

使用gulp复制文件的方法，可以批量选择多种格式的文件：

可以通过*.jpg可以选择到当前路径下的所有jpg文件。

可以通过*.{jpg，png}可以选择到当前路径下的所有jpg和png文件。

可以通过**/*        可以选择到当前路径下的所有文件和当前路径中的所有文件夹下的所有文件

可以通过,找到不同的两个相对路径下的两个文件。

可以通过非选择符加指定文件来过滤掉已经选择的文件中的该文件：

gulp中支持同时执行多个任务，首先创建一个任务（暂把任务名命名为builder），在该任务的参数中在任务名后面添加一个数组，里面存放所有的任务名，那么执行builder任务是，就会同时执行该任务下所有的其他任务。

注：复制文件的命令因为下面需要写操作的动作，所以在复制命令后面不能有分号。

而对于监听命令，后面不需要写操作的动作，所以监听命令后可以有分号。

我们一般是把外面的一个文件，复制到一个dist文件夹中。通过监听命令建立起复制前后两个文件的关联关系。

通过监听命令可以实现在dist文件夹外，改变了对应的文件内容后，会在对应的文件连接下更新对应的文件里的内容。

在gulp的dos命令下，输入任务名，以执行该任务：

安装less方法：

在目录中创建src文件夹，在该文件夹中创建less文件夹和css文件夹

在less文件中创建一个index.less文件，写一些代码

然后在你的项目的根目录下创建一个gulpfile.js文件

在该文件中写入

然后打开cmd窗口，或者你安装了git环境的话，直接在该文件夹下右键点解Git Base Here，然后输入gulp命令，那么你就在你的src/css文件夹下就可以看到一个index.css文件，这个文件就是我们编译less文件之后生成的一个css文件

安装sass，接着之前的安装过程中，dom命令下输入

进行sass的安装。

文件夹及文件的创建：

sass的使用：

sass文件的后缀名是.scss

将创建的scss文件转化成css文件，并复制到src下的css中。

不管是用less还是用sass，在html文档中链入的都是css文件。

css中要配置了，一般就是要使用json文件了

在dos命令中  ctrl+c  命令来终止此次批处理的命令。

安装connect插件：

起服务，并设置服务的根目录的方法：

livereload:true; 方法的原理就是创建一个script标签，该标签中自带一个src链接到系统自带的一个js文件，有一个async进行异步，defer进行延迟，执行该文件中的一个window.reload（）;语句，从而实现页面的自动更新。

实现页面的热替换：

        热替换就是当改变代码时，网页上内容会自动改变。其实现共分四步，效果是当改变gulp根目录下的index文件时，会自动执行copy-index任务，把新的index文件复制到dist文件夹中，同时执行了热替换命令，就使的dist下的index文件在服务器下打开时，页面会自动更新：

1：  在生成要进行热替换网页的任务中，加上connect.reload()方法，使网页能进行热替换，并且如果是要在谷歌中运行该网页，必须要安装一个livereload的插件

2：对生成要进行热替换网页的任务添加事件监听，当文件改变时，执行该任务。

3:开启服务器

4:     实现热替换必备的两个任务，一个是监听，一个是在服务器条件下打开网页，所以在任务名后面加上一个数组，里面用于存放要执行的多个任务名，当调用该任务时，就会同时执行数组中的所有任务。（default是gulp默认执行的任务，当dos中只输入gulp时，就会默认执行gulp default任务）

        

安装插件：gulp-contact。

gulp-contact插件用于合并两个文件，设置服务的步骤：

安装插件：gulp-uglify

压缩过的代码一般重命名为名称.min.js

安装插件：gulp-rename

安装插件：gulp-minify-css

安装插件：gulp-imagemin

压缩成功后效果：

通过gulp.task(“任务名”,[任务名1，任务名2]);

通过dos中运行gulp任务名，就可以同时运行任务名1和任务名2。