简介
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指令