Gulp入门

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有几个重要方法分别为 :

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