gulp --- 前端自动化构建工具_gulp sshdev-优快云博客

本文链接：https://blog.youkuaiyun.com/github_37915419/article/details/70173773

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

gulp是基于Nodejs的自动任务运行器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

[TOC]

1. gulp使用步骤

1.1 安装Node.js

参考文章 http://www.cnblogs.com/roddy/p/6524252.html

1.2 全局安装gulp

$ npm install gulp -g

查看是否正确安装。

$ gulp -v

出现版本号表示安装成功。

1.3 安装项目依赖包gulp

我们新建一个项目文件夹"gulp"，然后定位到"gulp"文件中

$ cd gulp

1.3.1 了解package.json

在安装项目依赖包gulp之前，我们先来看看package.json文件。
package.json是每个基于Nodejs项目必不可少的配置文件，其中包括项目名称、版本号和所需要的依赖包列表等信息，它是存放在项目根目录中的json文件。

想像一下，如果把项目比作是餐厅中一道菜的话，项目中使用到的依赖包就是这道菜的食材，而package.json文件就是这道菜的食材列表，那么package.json存在的作用是什么？我想最主要的作用就是方便管理项目，用过github童鞋都知道，多人协同工作的时候经常会使用pull和push，由于package.json存在，我们就不需要对项目依赖纳入版本管理，只需要管理package.json就行了，然后根据package.json本地构建项目依赖。

基于命令行创建package.json文件

$ npm init

然后根据提示输入。

package.json基本格式（注意：实际json文件中是不允许出现注释的！）

{
  "name": "gulp",                                       //项目名称（必须）
  "version": "1.0.0",                                   //项目版本（必须）
  "description": "This is gulp project !",              //项目描述（必须）
  "homepage": "",                                       //项目主页
  "repository": {                                       //项目资源库
    "type": "git",
    "url": ""
  },
  "author": {                                           //项目作者信息
    "name": "roddy",
    "email": "xxxxx@.com"
  },
  "license": "ISC",                                     //项目许可协议
  "devDependencies": {                                  //项目依赖列表
    "gulp": "^3.8.11"
  }
}

当然，你也可以直接在项目根目录中创建package.json文件，然后复制上面配置代码进去。OK! 现在"gulp"项目中只有一个"package.json"文件，那么我们要怎么安装项目依赖包gulp呢？其实我们"package.json"中"devDependencies"字段已经列出了"gulp"包，我们只需要根据"package.json"来安装依赖就可以了，或者用npm来安装依赖。

1.3.2 根据package.json安装gulp依赖

$ npm install

1.3.3 npm安装gulp依赖

$ npm install gulp --save-dev

细心的你会发现，我们前面已经全局安装过了gulp，这里为什么还要项目安装一次gulp？全局安装gulp是让我们能使用gulp命令行，项目安装gulp是让项目能引用gulp模块！

1.3.3 创建gulpfile.js

gulpfile.js为gulp项目的配置文件也是我们的任务文件，我们使用gulp对文件进行压缩、打包这些任务就是写在gulpfile.js文件中。

我们在"gulp"项目根目录中创建一个js文件"gulp.js",代码如下：


// 引入依赖gulp
var gulp = require( 'gulp' );

// 创建一个'default'任务
gulp.task( 'default', function() {
  // 将你的默认的任务代码放在这
} );

1.3.4 运行任务

用全局gulp来运行gulpfile.js中的任务（全局安装gulp才能使用gulp命令，如果没有全局安装，这里会报错！）

$ gulp

或者执行指定的任务。

$ gulp <taskname>

默认的名为"default"的任务（task）将会被运行，在这里，这个任务并未做任何事情。

2. gulp API

好了，了解gulp大致的工作步骤后，有必要我们来学习下gulp中的API，这样你才能根据自己需求写gulpfile.js。

2.1 gulp.task( name[, deps], fn )

创建一个gulp任务。

name : [String] 任务名称，中间不要有空格。
deps : [Array] 一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。
fn : [Function] 任务的回调函数，任务具体代码。

gulp.task( "taskname", [ "task1", "task2", ... ], function() {
    // 将你的任务代码放在这
} );

2.2 gulp.watch( glob[, opts], tasks )

监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个EventEmitter来发射（emit）事件。

glob : [String/Array] 监视的文件路径或者文件路径数组。
opts : [Object] 传给依赖包gaze的参数。
tasks : [Array] 需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字。

gulp.task( "task1", function() { console.log( "gulp" ) } );
gulp.task( "default", function() { 
    gulp.watch( "xx.js", [ "task1" ] );
} );

2.3 gulp.watch( glob[, opts, cb] )

监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个EventEmitter来发射（emit）事件。

glob : [String|Array] 监视的文件路径或者文件路径数组。
opts : [Object] 传给依赖包gaze的参数。
cb : [Function] 每次变动需要执行的回调函数，该函数被传入一个事件对象event。
├─event.type : [String] 变动类型，"added"、"changed"、"deleted"。
└─event.path : [String] 触发该事件的文件路径。

gulp.task( "default", function() {
    gulp.watch( "xx.js", function( event ) {
        console.log( event.path + "is" + event.type );
    } );
}

2.4 gulp.src( globs[, options] )

匹配要处理的源文件路径，并且返回一个stream它可以被piped到别的插件中。

globs : [String|Array] 匹配glob模式的文件路径或者文件路径数组。
├─* : 匹配任意文件名。例：src/*.js <=> src中所有js文件。
├─** : 匹配0个或多个文件夹。例：src/**/*.js <=> src中0个或多个文件夹中的js文件。
├─{} : 匹配多个属性。例：src/*.{js,css,html} <=> src中所有js，css，html文件。
└─! : 排除文件。例：!src/a.js <=> 不包含src中的a文件。
options : [Object] 三个可选配置
├─options.buffer : [Boolean] 默认 true，设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用。
├─options.read : [Boolean] 默认 true，设置false，将不执行读取文件操作，返回null。
└─options.base : [String] 默认 glob通配符之前的路径，最后替换掉base来得到输出文件路径。

假如我们src目录中有一个文件夹js，其中有一个test.js文件

gulp.task( "default", function() {
    // 匹配文件"src/js/test.js", 并且把options.base解析为"src/js"
    gulp.src( "src/js/*.js" )
    // 用"dest"替换掉base路径，并写入该文件"dest/test.js"
    .piple( gulp.dest( "dest" ) );
} );

gulp.task( "task1", function() {
    // 匹配文件"src/js/test.js", 并且把options.base设置为"src"
    gulp.src( "src/js/*.js", { base : "src" } )
    // 用"dest"替换掉base路径，并写入该文件"dest/js/test.js"
    .piple( gulp.dest( "dest" ) );
} );

2.5 gulp.dest( path[, options] )

能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

path : [String|Function] 文件将被写入的路径（输出目录）。也可以传入一个函数，在函数中返回相应路径。
options : [Object] 两个可选配置。
├─options.cwd : [String] 默认 "options.cwd()"，输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。
└─options.mode : [String] 默认 "0777"，八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。