前端自动化构建工具gulp

关于学习gulp，推荐大家看前端构建工具gulpjs的使用介绍及技巧，这篇文章作为入门学习资料还是不错的。

gulp的安装

gulp是基于nodejs开发的，所以首先确定安装了nodejs。

(1)全局安装gulp

npm install -g gulp

(2)针对项目局部安装gulp

npm install gulp

(3)在项目目录下安装gulp依赖包

npm install --save-dev gulp

或者在项目目录下安装package.json中配置的所有依赖，可以手动添加package.json文件

npm install

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "This is a little exercise on gulp",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-uglify": "^2.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-minify-html":"^1.0.6",
    "gulp-minify-css":"^1.2.4"
  },"scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "heshuaishuai",
  "license": "ISC"
}

gulp的使用

(1)首先在项目的根目录下创建一个gulpfile.js文件

/**
 * Created by heshuaishuai on 2016/12/5.
 */
var gulp = require('gulp'),//加载gulp模块
    uglify = require('gulp-uglify'),//加载压缩js模块
    concat = require('gulp-concat'),//加载合并模块
    htmlmin = require('gulp-minify-html'),//加载压缩html模块
    cssmin = require('gulp-minify-css');//加载压缩css模块
//输出hello
gulp.task('hello',function () {
    console.log('hello');
});
//压缩js
gulp.task('minify-js',function () {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dest/js'));
});
//合并js
gulp.task('concat-js',function () {
    gulp.src('dest/js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dest/js'));
});
//压缩html
gulp.task('minify-html',function () {
    gulp.src('index.html')
        .pipe(htmlmin())
        .pipe(gulp.dest('dest/html'));
});
//压缩css
gulp.task('minify-css',function () {
    gulp.src('css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dest/css'));
});
gulp.task('default',['hello','minify-js','concat-js','minify-html','minify-css']);

require()函数用于加载依赖模块，

gulp.task("default",[])为默认任务，当在命令行数据gulp命令时，default后面数组中的任务将被自动执行。

(2)运行gulp

gulp

　　

gulp的API

gulp的API主要的有gulp.task、gulp.src、gulp.dest、gulp.watch;

(1)gulp.src

gulp.src方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。其语法为：　　

gulp.src(globs[, options])　　　　

globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。
options为可选参数。 

下面我们重点说说Gulp用到的glob的匹配规则以及一些文件匹配技巧。
Gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：

• * 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾
• ** 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。
• ? 匹配文件路径中的一个字符(不会匹配路径分隔符)
• [...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法
• !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的
• ?(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?
• +(pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+
• *(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)*
• @(pattern|pattern|pattern) 匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern) 

下面以一系列例子来加深理解 

• * 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js
• *.* 能匹配 a.js,style.css,a.b,x.y
• */*/*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js
• ** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件
• **/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js
• a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
• a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录
• ?.js 能匹配 a.js,b.js,c.js
• a?? 能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符
• [xyz].js 只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符
• [^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js 

当有多种匹配模式时可以使用数组　　

gulp.src(['js/*.js','css/*.css','*.html']);

(2)gulp.dest

gulp.dest()方法是用来写文件的，其语法为：　

gulp.dest(path[,options])

path为写入文件的路径
options为一个可选的参数对象。

     gulp的使用流程一般是这样子的：首先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中，这里首先需要弄清楚的一点是，我们给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的。　　　　

gulp.task('minify-js',function () {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dest/js'));
});

(3)gulp.task

gulp.task方法用来定义任务，其语法为：　　

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

name 为任务名
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。　　　

gulp.task('default',['hello','minify-js','concat-js','minify-html','minify-css'],function(){
　　
});

(4)gulp.watch

gulp.watch方法用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。其语法为　　　

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

glob 为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
opts 为一个可选的配置对象，通常不需要用到
tasks 为文件变化后要执行的任务，为一个数组　　　

//监听事件
gulp.task('watch',function () {
    //当js文件夹下的js发生变化，就执行压缩命令
    gulp.watch('js/*.js',['minifyJs']);
});

gulp插件

在输入命令时添加--save-dev让package.json自动生成依赖　

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-load-plugins": "^1.4.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-minify-html": "^1.0.6",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.0.5",
    "gulp-uglify": "^2.0.0"
  }, 

(1)压缩js

npm install --save-dev gulp-uglify

gulp.task('minify-js',function () {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dest/js'));
});

(2)合并js

npm install --save-dev gulp-concat

gulp.task('concat-js',function () {
    gulp.src('dest/js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dest/js'));
});

(3)压缩css

npm install --save-dev gulp-minify-css

gulp.task('minify-css',function () {
    gulp.src('css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dest/css'));
});

(4)文件指纹，以js为例

npm install --save-dev gulp-rev gulp-rev-collector

var gulp = require('gulp'),
    plugins = require('gulp-load-plugins')();

//压缩合并js，生成文件指纹
gulp.task('minifyJs',function(){
    return gulp.src('js/*.js')
            .pipe(plugins.concat('main.min.js'))
            .pipe(plugins.uglify())
            .pipe(plugins.rev())//为main.min.js随机添加10位hash值
            .pipe(gulp.dest('dest/minJs'))
            .pipe(plugins.rev.manifest())//生成与文件对应的键值对
            .pipe(gulp.dest('rev/json'))
});
//替换引入的文件
gulp.task('htmlRouter',function () {
    return gulp.src(['rev/**/*.json','index.html'])
            .pipe(plugins.revCollector())//替换引入的文件，将改完名的文件引入
            .pipe(gulp.dest('./'))
});
//监听事件
gulp.task('watch',function () {
    //当js文件夹下的js发生变化，就执行压缩命令
    gulp.watch('js/*.js',['minifyJs']);
});
gulp.task('default',['minifyJs','watch','htmlRouter']);

关于文件指纹，推荐Gulp--文件压缩和文件指纹,这篇文章不错。　　

结束语

以上主要讲解了gulp的安装，主要的API及一些简单的插件使用。有什么不懂或者有错误可以给我留言！