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 。