前端自动化构建工具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.jsa/**/z能匹配a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/za/**b/z能匹配a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录?.js能匹配a.js,b.js,c.jsa??能匹配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及一些简单的插件使用。有什么不懂或者有错误可以给我留言！
