前端构建⼯具gulp超详细配置，使⽤教程（图⽂）
流程
1. 输⼊命令(可以使⽤git bash或者命令控制台cmd) npm install -g gulp
安装全局gulp命令
2. 创建⼀个项⽬⽂件夹, 当前项⽬⽂件夹下输⼊命令npm init
配置package.json⽂件, 这⼀部分看情况⾃⼰决定是否填, 不想填也可以, 直接按回车
当前项⽬⽂件夹下输⼊命令npm install gulp --save-dev
全局安装gulp后，还需要在每个要使⽤gulp的项⽬中都单独安装⼀次
开始使⽤gulp
其实, gulp的使⽤⽐webpack要简单很多.
配置gulpflie.js⽂件
在当前项⽬⽂件下创建⽂件名为gulpfile.js⽂件, 作为该项⽬配置⽂件.
//gulpfile.js
var gulp = require('gulp');
gulp.task('default',function(){
console.log('hello world');
});
其实在项⽬⽂件夹下输⼊命令gulp时, 就是触发这个default任务, 因此, 我们定义多个⾃定义事件, 这样在输⼊gulp时, 就可以直接将我们写的命令也⼀起触发.
gulp API
gulp.src(globs[, options])
globs参数是⽂件匹配模式(类似正则表达式)，⽤来匹配⽂件路径(包括⽂件名)，当然这⾥也可以直接指定某个具体的⽂件路径。当有多个匹配模式时，该参数可以为⼀个数组。
options为可选参数。通常情况下我们不需要⽤到。
下⾯我们重点说说Gulp⽤到的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)
例⼦:
//转换html⽂件
gulp.task('html', function(){
gulp.src('./src/index.html')
.load())
.pipe(gulp.dest('./dist'));//写⼊命令
});
当有多种匹配模式时可以使⽤数组
//使⽤数组的⽅式来匹配多种⽂件
gulp.src(['js/*.js','css/*.css','*.html'])
使⽤数组的⽅式还有⼀个好处就是可以很⽅便的使⽤排除模式，在数组中的单个匹配模式前加上!即是排除模式，它会在匹配的结果中排除这个匹配，要注意⼀点的是不能在数组中的第⼀个元素中使⽤排除模式
gulp.src([*.js,'!b*.js']) //匹配所有js⽂件，但排除掉以b开头的js⽂件
gulp.src(['!b*.js',*.js]) //不会排除任何⽂件，因为排除模式不能出现在
数组的第⼀个元素中
此外，还可以使⽤展开模式。展开模式以花括号作为定界符，根据它⾥⾯的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。展开的例⼦如下：
a{b,c}d 会展开为 abd,acd
a{b,}c 会展开为 abc,ac
a{0..3}d 会展开为 a0d,a1d,a2d,a3d
a{b,c{d,e}f}g 会展开为 abg,acdfg,acefg
a{b,c}d{e,f}g 会展开为 abdeg,acdeg,abdeg,abdfg
gulp.dest(path[,options])
gulp.dest()⽅法是⽤来写⽂件的
path为写⼊⽂件的路径
options为⼀个可选的参数对象，通常我们不需要⽤到
要想使⽤好gulp.dest()这个⽅法，就要理解给它传⼊的路径参数与最终⽣成的⽂件的关系。
gulp的使⽤流程⼀般是这样⼦的：⾸先通过gulp.src()⽅法获取到我们想要处理的⽂件流，然后把⽂件流通过pipe⽅法导⼊到gulp的插件中，最后把经过插件处理后的流再通过pipe⽅法导⼊到gulp.dest()中，gulp.dest()⽅法则把流中的内容写⼊到⽂件中，这⾥⾸先需要弄清楚的⼀点是，我们给gulp.dest()传⼊的路径参数，只能⽤来指定要⽣成的⽂件的⽬录，⽽不能指定⽣成⽂件的⽂件名，它⽣成⽂件的⽂件名使⽤的是导⼊到它的⽂件流⾃⾝的⽂件名，所以⽣成的⽂件名是由导⼊到它的⽂件流决定的，即使我们给它传⼊⼀个带有⽂件名的路径参数，然后它也会把这个⽂件名当做是⽬录名，例如：
var gulp = require('gulp');
gulp.src('script/jquery.js')
.pipe(gulp.dest('dist/foo.js'));
//最终⽣成的⽂件路径为 dist/foo.js/jquery.js,⽽不是dist/foo.js
要想改变⽂件名，可以使⽤插件gulp-rename
下⾯说说⽣成的⽂件路径与我们给gulp.dest()⽅法传⼊的路径参数之间的关系。
gulp.dest(path)⽣成的⽂件路径是我们传⼊的path参数后⾯再加上gulp.src()中有通配符开始出现的那部分路径。例如：
var gulp = reruire('gulp');
//有通配符开始出现的那部分路径为 **/*.js
gulp.src('script/**/*.js')
.pipe(gulp.dest('dist')); //最后⽣成的⽂件路径为 dist/**/*.js
//如果 **/*.js 匹配到的⽂件为 jquery/jquery.js ，则⽣成的⽂件路径为 dist/jquery/jquery.js
再举更多⼀点的例⼦
gulp.src('script/avalon/avalon.js') //没有通配符出现的情况
.pipe(gulp.dest('dist')); //最后⽣成的⽂件路径为 dist/avalon.js
//有通配符开始出现的那部分路径为 **/underscore.js
gulp.src('script/**/underscore.js')
//假设匹配到的⽂件为script/util/underscore.js
.pipe(gulp.dest('dist')); //则最后⽣成的⽂件路径为 dist/util/underscore.js
gulp.src('script/*') //有通配符出现的那部分路径为 *
//假设匹配到的⽂件为script/zepto.js
.pipe(gulp.dest('dist')); //则最后⽣成的⽂件路径为 dist/zepto.js
通过指定gulp.src()⽅法配置参数中的base属性，我们可以更灵活的来改变gulp.dest()⽣成的⽂件路径。
当我们没有在gulp.src()⽅法中配置base属性时，base的默认值为通配符开始出现之前那部分路径，例如：
gulp.src('app/src/**/*.css') //此时base的值为 app/src
上⾯我们说的gulp.dest()所⽣成的⽂件路径的规则，其实也可以理解成，⽤我们给gulp.dest()传⼊的路
径替换掉gulp.src()中的base路径，最终得到⽣成⽂件的路径。
gulp.src('app/src/**/*.css') //此时base的值为app/src，也就是说它的base路径为app/src
//设该模式匹配到了⽂件 app/src/css/normal.css
.pipe(gulp.dest('dist')) //⽤dist替换掉base路径，最终得到 dist/css/normal.css
所以改变base路径后，gulp.dest()⽣成的⽂件路径也会改变
gulp.src(script/lib/*.js) //没有配置base参数，此时默认的base路径为script/lib
//假设匹配到的⽂件为script/lib/jquery.js
.pipe(gulp.dest('build')) //⽣成的⽂件路径为 build/jquery.js
gulp.src(script/lib/*.js, {base:'script'}) //配置了base参数，此时base路径为script
//假设匹配到的⽂件为script/lib/jquery.js
.pipe(gulp.dest('build')) //此时⽣成的⽂件路径为 build/lib/jquery.js
⽤gulp.dest()把⽂件流写⼊⽂件后，⽂件流仍然可以继续使⽤。
gulp.task(name[, deps], fn)
gulp.task⽅法⽤来定义任务，内部使⽤的是Orchestrator
name 为任务名
deps 是当前定义的任务需要依赖的其他任务，为⼀个数组。当前定义的任务会在所有依赖的任务执⾏完毕后才开始执⾏。如果没有依赖，则可省略这个参数
fn 为任务函数，我们把任务要执⾏的代码都写在⾥⾯。该参数也是可选的。
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { //定义⼀个有依赖的任务
// Do something
});
css怎么创建gulp.task()这个API没什么好讲的，但需要知道执⾏多个任务时怎么来控制任务执⾏的顺序。
gulp中执⾏多个任务，可以通过任务依赖来实现。例如我想要执⾏one,two,three这三个任务，那我们就可以定义⼀个空的任务，然后把那三个任务当做这个空的任务的依赖就⾏了：
//只要执⾏default任务，就相当于把one,two,three这三个任务执⾏了
gulp.task('default',['one','two','three']);
如果任务相互之间没有依赖，任务会按你书写的顺序来执⾏，如果有依赖的话则会先执⾏依赖的任务。
但是如果某个任务所依赖的任务是异步的，就要注意了，gulp并不会等待那个所依赖的异步任务完成，⽽是会接着执⾏后续的任务。例如：
gulp.task('one',function(){
//one是⼀个异步执⾏的任务
setTimeout(function(){
console.log('one is done')
},5000);
});
//two任务虽然依赖于one任务，但并不会等到one任务中的异步操作完成后再执⾏
gulp.task('two',['one'],function(){
console.log('two is done');
});
上⾯的例⼦中我们执⾏two任务时，会先执⾏one任务，但不会去等待one任务中的异步操作完成后再执⾏two任务，⽽是紧接着执⾏two任务。所以two任务会在one任务中的异步操作完成之前就执⾏了。
那如果我们想等待异步任务中的异步操作完成后再执⾏后续的任务，该怎么做呢？
有三种⽅法可以实现：
第⼀：在异步操作完成后执⾏⼀个回调函数来通知gulp这个异步任务已经完成，这个回调函数就是任务函数的第⼀个参数。
gulp.task('one',function(cb){ //cb为任务函数提供的回调，⽤来通知任务已经完成
//one是⼀个异步执⾏的任务
setTimeout(function(){
console.log('one is done');
cb();  //执⾏回调，表⽰这个异步任务已经完成
},5000);
});
//这时two任务会在one任务中的异步操作完成后再执⾏
gulp.task('two',['one'],function(){
console.log('two is done');
});
第⼆：定义任务时返回⼀个流对象。适⽤于任务就是操作gulp.src获取到的流的情况。
gulp.task('one',function(cb){
var stream = gulp.src('client/**/*.js')
.pipe(dosomething()) //dosomething()中有某些异步操作
.pipe(gulp.dest('build'));
return stream;
});
gulp.task('two',['one'],function(){
console.log('two is done');
});
第三：返回⼀个promise对象，例如
var Q = require('q'); //⼀个著名的异步处理的库 github/kriskowal/q
gulp.task('one',function(cb){
var deferred = Q.defer();
// 做⼀些异步操作
setTimeout(function() {
}, 5000);
return deferred.promise;
});
gulp.task('two',['one'],function(){
console.log('two is done');
});
gulp.task()就这些了，主要是要知道当依赖是异步任务时的处理。
gulp.watch(glob[, opts], tasks)
**gulp.watch()**⽤来监视⽂件的变化，当⽂件发⽣变化后，我们可以利⽤它来执⾏相应的任务，例如⽂件压缩等。glob 为要监视的⽂件匹配模式，规则和⽤法与gulp.src()⽅法中的glob相同。
opts 为⼀个可选的配置对象，通常不需要⽤到
tasks 为⽂件变化后要执⾏的任务，为⼀个数组
gulp.task('uglify',function(){
//do something
});
gulp.task('reload',function(){
//do something
});
gulp.watch('js/**/*.js', ['uglify','reload']);
gulp.watch()还有另外⼀种使⽤⽅式：
gulp.watch(glob[, opts, cb])

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。