Gulp入门
在这个互联网大爆炸时代,每个领域的技术更新都是相当之快,前端亦然!昨天还是Grunt,今天就变成了Gulp!所以在git上学习了一下gulp,初次翻译,有不全面或者不好的地方,希望大家多多拍砖!
1.What is gulp ?| gulp是什么?
Gulp是一个在开发过程中可以帮助你自动完成那些痛苦而耗时的任务的一个工具箱。对于web开发人员来说(如果你的职业为此),它可以帮助你完成CSS的预处理,JS编译(transpiling)[1],JS压缩以及其他任务。主流的IED都集成了gulp,PHP,.NET,Node.js,Java以及其他程序员都很喜欢gulp。gulp有超过1700个插件,当然,不使用插件你也可以做很多事情。Gulp让你从构建系统的烦恼中解脱出来而更专注你的工作。
当然你可以直接进入gulp官网或者github主页来开始你的gulp之旅。
1. HomePage:http://gulpjs.com/
2. GitHub:https://github.com/gulpjs/gulp
3. Documentation:https://github.com/gulpjs/gulp/blob/master/docs/README.md
2.Getting Started | gulp环境搭建
1.安装gulp(全局)
$ npm install--global gulp
2.在项目的开发环境中安装gulp
$ npm install --save-dev gulp
3.在项目的根目录下创建gulpfile.js文件
var gulp = require('gulp');
gulp.task('default', function() {
// place codefor your default task here
});
4.运行gulp
$ gulp
默认的任务将会被执行,但是什么都不会做(没写具体功能代码当然什么都不会做)
如果想运行你自定义的任务,使用
$ gulp <task> <othertast>.
3.gulp API docs | gulp文档
gulp.src gulp.dest gulp.task gulp.watch.
1. gulp.src
语法:gulp.src(globs[,options])
概述:匹配glob语法匹配的文件,返回一个可以使用插件(piped to plugins)的流(stream)
globs:类型 string 或者 array
可以是node-glob的语法形式 或者 直接写文件的路径
options:类型 object
通过glob-stream为node-glob传递的参数
options.buffer:类型 Boolean 默认 true
如果设置为false将返回一个文件内容的流,而不缓存文件。这个参数用于操作大文件的时候。注意:插件对这种流可能没有实现。
options.read:类型Boolean 默认true
如果设置这个参数为false,将会返回文件的内容为null,不会读取文件。
options.base:类型 String 默认 glob开始之前的目录
比如 gulp.src(‘client/js/**/*.js’) //此时base为 client/js/
例子:
gulp.src('client/js/**/*.js') // 匹配'client/js/somedir/somefile.js'指定 `base`为 //`client/js/`
.pipe(minify())
.pipe(gulp.dest('build'));
// 生成到 'build/somedir/somefile.js'
gulp.src('client/js/**/*.js', { base: 'client' })
.pipe(minify())
.pipe(gulp.dest('build'));
// 生成到 'build/js/somedir/somefile.js'注意base不同而dest的目录不同
2.gulp.dest
语法:gulp.dest(path[, options])
概述:能够被使用插件(be piped)并且生成文件。可以生成多个目录,如果目录不存在将会被创建。
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())
.pipe(gulp.dest('./build/minified_templates'));
path:类型 string 或者 Function
输出文件夹目录或者使用一个function返回目标文件夹
options:参数 类型 Object
options.cwd:类型 String 默认process.cwd()
目标文件夹的cwd,只有目标文件夹是相对路径的时候生效。
options.mode:类型 String 默认 0777
八进制字符来指定生成文件夹的模式
3.gulp.task
语法:gulp.task(name[, deps], fn)
概述:使用 Orchestrator 定义一个任务。
gulp.task('somename', function() {
// Do stuff
});
name: task的名字 类型 String
deps:类型 Array
在你的任务执行之前要被执行的任务数组
gulp.task('mytask', ['array', 'of', 'task', 'names'],function() {
// Do stuff
});
fn:执行任务操作的函数
异步任务支持:如果fn做了以下任何一件事,那么任务将会被异步执行。
1) 接收一个回调
// run a command in a shell
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
// buildJekyll
exec('jekyllbuild', function(err) {
if (err)return cb(err); // return error
cb(); //finished task
});
});
2) 返回一个流
gulp.task('somename', function() {
var stream =gulp.src('client/**/*.js')
.pipe(minify())
.pipe(gulp.dest('build'));
returnstream;
});
3)返回一个 promise
var Q = require('q');
gulp.task('somename', function() {
var deferred= Q.defer();
// do asyncstuff
setTimeout(function() {
deferred.resolve();
}, 1);
returndeferred.promise;
});
例子:任务先后顺序
var gulp = require('gulp');
// takes in a callback so the engine knows when it'llbe done
gulp.task('one', function(cb) {
// do stuff-- async or otherwise
cb(err); //if err is not null and not undefined, the run will stop, and note that itfailed
});
// identifies a dependent task must be completebefore this one begins
gulp.task('two', ['one'], function() {
// task'one' is done now
});
gulp.task('default', ['one', 'two']);
4.gulp.watch
语法:gulp.watch(glob [, opts], tasks) 或者 gulp.watch(glob [,opts, cb])
监听文件并且在监听的文件发生改变的时候做一些事情
*第一种形式:
gulp.watch(glob[, opts], tasks)
glob:类型 String 或 Array
需要监听的文件
opts:类型 Object
参数
tasks:类型 Array
监听文件发生改变时,要执行的任务名称数组
例子:
var watcher = gulp.watch('js/**/*.js',['uglify','reload']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', runningtasks...');
});
*第二种形式
gulp.watch(glob[, opts, cb])
glob:同上
opts:同上
cb(event):类型 Function
监听文件发生改变时候的回调函数
例子:
gulp.watch('js/**/*.js', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', runningtasks...');
});
回调函数会传递一个参数event,event描述了文件的改变
event.type:类型 String
发生改变的类型,是新增added,修改changed,或是删除deleted
event.path:类型 String
触发事件的文件所在的目录.
/******************************************************************************************/
另外附一个别人的入门翻译教程,虽然翻译看起来也是很那啥,但是知识点很全,内容很不错:
译文:
http://www.techug.com/gulp
对应的原文:
https://markgoodyear.com/2014/01/getting-started-with-gulp/
标注:
[1] 原文档为 JS transpiling ,关于Compiling 和 Transpiling的说明,参考了下面的blog:
http://blog.csdn.net/napolunyishi/article/details/20473799