gulp编译文件基本操作集囊

一、简介

        gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不尽能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不尽可以很愉快的编写代码，而且大大提高我们的工作效率。

        gulp是基于node.js的自动任务运行器，她能自动化地完成JavaScript/coffee/sass/less/html/image/css等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成。并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了lunix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上十分简单。通过本文，我们将学习如何使用gulp来改变开发流程，从而使开发更加快速高效。

    gulp和grunt非常类似，但相比于grunt的频繁IO操作，gulp的流操作，能更快更便捷的完成项目构建工作。

二、安装以及运行

这里不做介绍，请参考以下链接：

gulp中文文档：https://www.gulpjs.com.cn/docs/getting-started/

gulp详细教程：http://www.ydcss.com/archives/18#lesson2

三、gulp主要参数

gulp主要参数有.src 、 .watch 、 .dest 、CLI：

gulp.src(globs[, options])

输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。

例如：gulp.task('less', function () {
                  return gulp.src('public/less/*.less')
                       .pipe(less())
                        .pipe(gulp.dest('public/dist'))
           });

 gulp.src返回了stream。

gulp.dest(path[, options])

能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

文件被写入的路径是以所给的相对路径根据所给的目标目录计算而来。类似的，相对路径也可以根据所给的 base 来计算。

gulp.task(name[, deps], fn)

定义一个使用 Orchestrator 实现的任务（task）。

gulp.task('somename', function() {
  // 做一些事
});

name

任务的名字，如果你需要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。

deps

类型： Array

一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // 做一些事
});

注意： 你的任务是否在这些前置依赖的任务完成之前运行了？请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。

fn

该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。

异步任务支持

任务可以异步执行，如果 fn 能做到以下其中一点：

接受一个 callback

// 在 shell 中执行一个命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
  // 编译 Jekyll
  exec('jekyll build', function(err) {
    if (err) return cb(err); // 返回 error
    cb(); // 完成 task
  });
});

返回一个 stream

gulp.task('somename', function() {
  var stream = gulp.src('client/**/*.js')
    .pipe(minify())
    .pipe(gulp.dest('build'));
  return stream;
});

返回一个 promise

var Q = require('q');

gulp.task('somename', function() {
  var deferred = Q.defer();

  // 执行异步的操作
  setTimeout(function() {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});

注意： 默认的，task 将以最大的并发数执行，也就是说，gulp 会一次性运行所有的 task 并且不做任何等待。如果你想要创建一个序列化的 task 队列，并以特定的顺序执行，你需要做两件事：

• 给出一个提示，来告知 task 什么时候执行完毕，
• 并且再给出一个提示，来告知一个 task 依赖另一个 task 的完成。

对于这个例子，让我们先假定你有两个 task，"one" 和 "two"，并且你希望它们按照这个顺序执行：

1. 在 "one" 中，你加入一个提示，来告知什么时候它会完成：可以再完成时候返回一个 callback，或者返回一个 promise 或 stream，这样系统会去等待它完成。

2. 在 "two" 中，你需要添加一个提示来告诉系统它需要依赖第一个 task 完成。

因此，这个例子的实际代码将会是这样：

var gulp = require('gulp');

// 返回一个 callback，因此系统可以知道它什么时候完成
gulp.task('one', function(cb) {
    // 做一些事 -- 异步的或者其他的
    cb(err); // 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了
});

// 定义一个所依赖的 task 必须在这个 task 执行之前完成
gulp.task('two', ['one'], function() {
    // 'one' 完成后
});

gulp.task('default', ['one', 'two']);

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

四、基本插件操作介绍

1、gulp-less：

    使用gulp-less插件将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息。

1.1、基本使用

JavaScript

1 2 3 4 5 6 7 8

var gulp = require ( 'gulp' ) ,      less = require ( 'gulp-less' ) ;   gulp . task ( 'testLess' , function ( ) {      gulp . src ( 'src/less/index.less' )          . pipe ( less ( ) )          . pipe ( gulp . dest ( 'src/css' ) ) ; } ) ;

1.2、编译多个less文件

JavaScript

1 2 3 4 5 6 7 8

var gulp = require ( 'gulp' ) ,      less = require ( 'gulp-less' ) ;   gulp . task ( 'testLess' , function ( ) {      gulp . src ( [ 'src/less/index.less' , 'src/less/detail.less' ] ) //多个文件以数组形式传入          . pipe ( less ( ) )          . pipe ( gulp . dest ( 'src/css' ) ) ; //将会在src/css下生成index.css以及detail.css } ) ;

3.3、匹配符“!”，“*”，“**”，“{}”

JavaScript

1 2 3 4 5 6 7 8 9 10

var gulp = require ( 'gulp' ) ,      less = require ( 'gulp-less' ) ;   gulp . task ( 'testLess' , function ( ) {      //编译src目录下的所有less文件      //除了reset.less和test.less（**匹配src/less的0个或多个子文件夹）      gulp . src ( [ 'src/less/*.less' , '!src/less/**/{reset,test}.less' ] )          . pipe ( less ( ) )          . pipe ( gulp . dest ( 'src/css' ) ) ; } ) ;

1.4、调用多模块（编译less后压缩css）

JavaScript

1 2 3 4 5 6 7 8 9 10 11

var gulp = require ( 'gulp' ) ,      less = require ( 'gulp-less' ) ,      //确保本地已安装gulp-minify-css [cnpm install gulp-minify-css --save-dev]      cssmin = require ( 'gulp-minify-css' ) ;   gulp . task ( 'testLess' , function ( ) {      gulp . src ( 'src/less/index.less' )          . pipe ( less ( ) )          . pipe ( cssmin ( ) ) //兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: 'ie7'}))          . pipe ( gulp . dest ( 'src/css' ) ) ; } ) ;

1.5、当less有各种引入关系时，编译后不容易找到对应less文件，所以需要生成sourcemap文件，方便修改

JavaScript

1