gulp入门

简介

gulp是一个前端自动化构建的神器，通过流操作，将上一步操作的输出直接输入到下一步，定制各种任务，比如编译预处理css，转码压缩js，来改进网站开发的过程，减少一些重复的操作，使开发更加快速高效。

首先你最好了解一下node，npm，requirejs之类的知识，es6能懂一点就最好啦。

api

[gulp.task(name,[,deps],fn)][] 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数
[gulp.src(globs[,options])][] 执行任务处理的文件 globs:处理的文件路径(字符串或字符串数组)
[gulp.dest(path[,options])][] 处理完后生成文件 path只能为文件路径，不能指定文件名
[gulp.watch(glob[,opts],task)][] 用于监听文件变化，文件一修改就执行指定task任务。(watch还有一种写法在demo中会提到)

注意

• task任务中的依赖任务会先执行，这里可能出现依赖任务为异步的情况，可以用cb让依赖任务告知你任务执行完毕，或者steam，或者promise来解决。
• dest中的path参数是文件夹路径，也就是生成文件的名字和你给的路径没有关系，比如path：a/b.js；那么你生成的文件路径可能为：a/b.js/xx.js；它会将b.js识别成文件夹。
• dest中做了通配符的路径：gulp.src('script/**/*.js')
  ​ .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/**/*.js

demo

//引入模块 require('node_modules里对应的模块')
const gulp = require('gulp'),
      less = require('gulp-less');

//定义一个testLess任务 (自定义任务名称)
gulp.task('testLess',() => { //es6的箭头函数
  gulp.src('src/less/index.less') //该任务针对的文件
      .pipe(less()) //该任务调用的模块
      .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css文件
})；

//当**.less文件发生改变时，执行后面的箭头函数(es6)
gulp.watch(['./src/less/**.less']).on('change',(event)=>{
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  //do something. 可以是reload
})

gulp.task('dev',['testLess','other Task']);//可以将所有任务包装在这个任务里面，然后由它去处理。

//运行时只需要gulp task任务名字就可以了，比如task dev。当要输入的代码很长的时候，我们可以将它配置在package.json的script中，用npm run xxx去运行。

gulp常用插件

run-sequence：gulp里的task都是异步并发执行的，[runSequence][]可以让task任务按照顺序执行。

child_process：[require('child_process').exec][]可以让我们在代码中执行shell指令