前提：前端工程化是如今前端团队规范化管理项目和代码的概念，而前端工程化中往往是离不开前端自动化或打包工具这两种工具。本文将详细介绍其中一种常用的前端自动化工具---gulp.js
- 入门：
安装方式：
全局安装： npm install --g gulp 局部（项目安装）： npm install --save-dev gulp
gulp配置文件：
在项目根目录下创建一个gulpfile.js文件，其中default任务为主任务，其他为功能任务；
语法：var gulp = require('gulp');gulp.task('default',function(){...}); 运行方式：
在命令行中直接输入gulp运行，或者在webstorm中在对应的gulpfile.js点中，然后右键，选择show gulp task方式就能运行；
- gulp的API：
一）gulp.src方法：
定义：该方法会匹配对应的文件，并以虚拟文件流（包含路径，文件名，内容）的形式返回；
语法：gulp.src(globs [,option])
特点：因为返回的文件流是类似于Readable Streams的形式，所以可以利用pipe管道的方式传输，处理文件流。
参数介绍：
a）globs：可以理解成一种类似于正则表达式的匹配模式，其值可以为匹配形式，文件路径，或者文件路径数组。
*：匹配任何字符串但不识别路径分隔符（‘/’）eg： gulp.src('./build/*.js') 匹配build文件中所有js文件 **：匹配任何字符串包括‘/’
eg：gulp.src('**.js') 匹配任何路径下的js文件 [...] ： 枚举
eg: gulp.src('[abc].js') 匹配a.js或者b.js或者c.js [!...] : 枚举中括号中以外的一切字符串
eg：gulp.src('[!abc].js') 匹配d.js等等js文件 ? : 职匹配一个字符串
eg：gulp.src('?.js') 匹配a.js等等js文件 b）option：里面有buffer，read，base配置项，其中base项是关于文件流保存的路径相关（具体放在dest方式中阐述）
二）gulp.dest方法：
定义：将文件流写入到指定的路径文件中，并继续输出该文件流；
语法：gulp.dest(path [,option])注意事项：a)文件流写入的文件名只能由流入的文件流定义；b）path是路径，不能是文件名；c）src中base项默认是匹配符之前的字符串路径，但也可以人为设置，例子阐述：gulp.src('a/b/*/[ab].js') .pipe(gulp.dest('./build'))解释：默认base为a/b，塞进文件流的文件名为*/[ab].js，所以新建的文件的路径为./build/*/[ab].js gulp.src('a/b/*/c/d.js',{base:'a'}) .pipe(gulp.dest('./build'))解释：base现是a，塞进文件流的文件名为b/*/c/d.js,所以新建的文件路径为./build/b/*/c/d.js d）dest方法输出的文件流也可以被pipe传输；
三）gulp.task方法：
定义： 在gulp中定义一个任务，其中主任务为default；
语法： gulp.task(name [,deps] ,fn)参数：name是任务名； deps是依赖的任务数组，是在当前任务之前执行的； fn：当前任务内容；
情景：
a) gulp.task('default',function(){...})：最简单模式；b）gulp.task('default',['A1','A2']):default是由A1,A2两个任务组成的；c）gulp.task('default', ['A1','A2'],function(){...}):先执行完A1,A2，再执行default任务；question： 若任务列表A1,A2中，A1存在异步操作，则执行A2时，A1还很可能未执行完；
resolve：A) fn任务函数可以引进一个回调函数参数，该参数可以告诉外界该任务是否执行完；eg： gulp.task('A1',function(cb){ setTime(function(){ console.log(1); cb(); },2000); }) gulp.task('A2',function(){console.log(2);}) gulp.task('default',['A1','A2'],function(){ console.log(3) }) 输出结果为：2 1 3 B）任务函数返回一个流对象，适用于gulp.src方法；
gulp.task('A',function(){ return gulp.src('./a.js') .pipe(插件) })gulp.task('deafult',['A'],function(){...}) C)返回一个Promise对象；
gulp.task('A',function(){ return new Promise( (res,rej) => { }) })gulp.task('default',['A']); 四）gulp.watch方法：
定义：该方法是用来监听文件的变化；
语法一：gulp.watch(glob [,opts] , tasks)语法二：gulp.watch(glob [,opts] , function(event){...})event是一个事件对象；event.type为added（添加类型）；changed（改变类型）；deleted（删除类型）event.path:变化的文件路径；- 常用gulp插件：
gulp有很多插件，而本文列举出一些常用的插件
- gulp-uglify插件
用途：用来压缩js文件
用法：var uglify = require('gulp-uglify');gulp.task('uglifyJS',function(cb){ gulp.src('./demo/*.js') .pipe(uglify()) .pipe(gulp.dest('build')); cb();}); - gulp-minify-css插件
用途：用来压缩css文件
用法：var minifyCss = require('gulp-minify-css');gulp.task('minifyCss',function(cb){ gulp.src('./demo/*.css') .pipe(minifyCss()) .pipe(gulp.dest('./build')); cb();}); - gulp-minify-html插件
用途：合并html文件
用法：var miniHtml = require('gulp-minify-html');gulp.task('miniHtml',function(cb){ gulp.src('./src/*.html') .pipe(miniHtml()) .pipe(gulp.dest('./build'));}); - gulp-connect插件
用途：自动刷新页面
用法：var connect = require('gulp-connect');gulp.task('connect',function(){ connect.server({ root:'src', livereload:true, })});gulp.task('watchHtml',function(){ gulp.watch('./src/*.html',function(){ gulp.src('./src/*.html') .pipe(connect.reload()); })}); - gulp-jshint插件
用途：用来检查js语法
用法：var jshint = require('gulp-jshint');gulp.task('checkJs',()=>{ gulp.src('./src/*.js') .pipe(jshint()) .pipe(jshint.reporter())}); - gulp-concat插件
用途：合并多个js或者css文件
用法：var concat = require('gulp-concat');gulp.task('concat',()=>{ gulp.src('./*/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./build'));}); - gulp-rename:
定义;将文件改名；
语法：a）rename（filename）:将文件直接改为指定文件名；b）rename（{dirname：'A' ,basename：'B' ,prefix：'C-',suffix：'-D', extname：'.txt'}）:将文件名改为A/C-B-D.txt；C）rename（function（path）{}）:path为一个对象，包含B）中所有属性；var rename =require('gulp-rename'); gulp.task('rename',()=>{ gulp.src('./demo/*.css') .pipe(rename({ suffix:'.min', extname:'.less' })) .pipe(gulp.dest('./build')); }) 参考文档：