gulp基础和常用插件介绍
前提：前端工程化是如今前端团队规范化管理项目和代码的概念，而前端工程化中往往是离不开前端自动化或打包工具这两种工具。本文将详细介绍其中一种常用的前端自动化工具---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].jsgulp.src('a/b/*/c/d.js',{base:'a'})
.pipe(gulp.dest('./build'))
解释：base现是a，塞进文件流的文件名为b/*/c/d.js,所以新建的文件路径为./build/b/*/c/d.jsd）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 3B）任务函数返回一个流对象，适用于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'));
})参考文档：
gulp文档