Gulp 入门指南

参考

原文地址： https://scotch.io/tutorials/a...

源码Github地址：https://github.com/scotch-io/...

Preface

前端的世界越来越丰富，各种新鲜工具层出不穷。然而，人生却还是越来越寂寞。年纪越小的时候，越容易交到朋友，或者说越容易玩到一起。到了现在，往往是路不同不相谋，表面酒肉知己。如今webpack可以说是非常火热的构建工具，gulp的许多功能它都可以完成。不过，还是有很多场景使用Gulp即可完成。所以，技术要选合适的，路要走自己的。

正文：Automate Your Tasks Easily with Gulp.js

作为开发人员，我们经常需要查看我们所使用的工具，并决定该工具是否适合当前工作。Chris在去年写了一个很棒的工具 —— Grunt 。但是Grunt并不一定是你的最佳选择。

Gulp 是一个流式构建系统，通过使用node流将文件操作全部在内存中完成，而且文件在接受到您的命令前不会写入。

像Grunt一样，Gulp是一个javascript任务运行器（task runner）。然而，Gulp更喜欢代码配置。由于您的任务在代码中编写，所以Gulp更像是一个构建框架（build framework），提供了一个根据特定需求创建任务的工具。

➻ 安装

Gulp的安装和运行非常简单，只需要如下步骤：

1. 全局安装
2. 作为开发依赖安装
3. 创建一个gulpfile.js文件

第一步，全局安装Gulp。

$ npm install --global gulp

然后，您需要将gulp设为项目的开发依赖模块。确保您已经有package.json文件或者命令行运行npm init，然后就可以用下面的命令将其安装为项目开发依赖模块：

$ npm install --save-dev gulp

最后，您需要在项目的根目录创建gulpfile.js文件，其中包含着你的任务。作为中间步骤，我们将添加gulp util插件，以便我们有一个可以显示执行情况的可运行任务。

$ npm install --save-dev gulp-util

在刚才创建的gulpfile.js中，我们将写一个非常简单的任务来打印一行字符串。

/* File: gulpfile.js */

// grab our gulp packages
var gulp = require('gulp');
var gutil = require('gulp-util');

// create a default task and just log a message
gulp.task('default', function () {
  return gutil.log('Gulp is running');
});

现在执行gulp命令，如果一切正常的话，将会有如下的输出：

> gulp
[12:32:08] Using gulpfile ~/Projects/gulp-scotch-io/gulpfile.js
[12:32:08] Starting 'default'...
[12:32:08] Gulp is running!
[12:32:08] Finished 'default' after 1 ms

➻ Overview

本教程的目录结构

我们可能需要先花一些时间定义一下项目结构。在此示例中，我们将使用下面的结构，你可以先将文件内容空着。

public/
  |  assets/
  |  |  stylesheets/
  |  |  |  style.css
  |  |  javascript/
  |  |  |  vendor/
  |  |  |  |  jquery.min.js
  |  |  |  bundle.js 
source/
  |  javascript/
  |  |  courage.js
  |  |  wisdom.js
  |  |  power.js
  |  scss/
  |  |  styles.scss
  |  |  grid.scss
gulpfile.js
packages.json

source是我们的工作目录。assets/style.css会在我们使用gulp处理和组合source/scss中的SASS文件时创建。bundle.js文件会在我们使用gulp压缩和组合JS文件时创建。

gulp 简述

Gulp是一个流式构建系统。它的流特性允许它管理和传递被操作的数据或插件使用的数据。插件旨在每次只做一个工作，所以通过一个多个插件传递一个单一的文件并不罕见。

gulp的api非常简洁轻量，包含4个顶级函数。如下所示：

• gulp.task
• gulp.src
• gulp.dest
• gulp.watch

gulp.task方法定义你的任务。它的参数是name，deps和fn。

name是一个字符串，deps是一个包含任务名称的数组，fn是执行任务的一个函数。deps是可选的，所以gulp.task有两种形式：

gulp.task('mytask', function () {
  // do stuff
});

gulp.task('dependenttask', ['task'], function () {
  // do stuff after 'mytask' is done
})

gulp.src指向我们要使用的文件。它的参数是一个匹配规则和一个可选的选项对象。它使用.pipe方法将其输出链接到其他插件。

gulp.dest指向我们想要文件输出的位置。

我们可以使用gulp.src和gulp.dest进行简单的文件复制操作：

gulp.task('copyHtml', function () {
  // copy any html files in source/ to public/
  gulp.src('source/*.html').pipe(gulp(.dest('public')));
});

gulp.watch像gulp.task一样有两种形式。它们都返回一个EventEmitter并触发change事件。第一种形式的参数是一个匹配规则，一个可选的选项对象，和一个任务数组。

gulp.watch('source/javascript/**/*.js', ['jshint']);

简而言之，任何符合匹配规则的文件发生改变就会运行任务列表中的任务。如上面的代码，只要任何source/javascript子文件夹下的.js文件发生了改变，就会对这些文件运行jshint任务。

第二种形式的参数是一个匹配规则，可选的选项对象，和一个可选的回调函数。当change事件发生时会运行该回调函数。

你可以将它与Grunt比较，Grunt需要安装其他的包才能实现watch功能。而Gulp原生支持。

更多Gulp的资料请参考api docs。

➻ Tasks that are actually useful

Being able to tell us that it is running is a fine task, but lets get gulp to do some real tasks for us.

We'll start with simple tasks and work our way up.

➻ jshint 检查代码

我们的第一个任务是使用jshint检查javascript代码，我们将会设置在每次保存javascript文件时运行该任务。

首先我们需要通过npm来安装gulp-jshint模块。我们还需要一个jshint的报告工具，使输出格式化并添加颜色。输入如下命令安装这两个模块：

$ npm install --save-dev gulp-jshint jshint-stylish

现在将该任务添加到gulpfile。

/* File: gulpfile.js */

// grab our package
var gulp = require('gulp');
var jshint = require('gulp-jshint');

// define the default task and add the watch task to it
gulp.task('default', ['watch']);

// configure the jshint task
gulp.task('jshint', function () {
      return gulp.src('source/javascript/**/*.js')
          .pipe(jshint())
          .pipe(jshint.reporter('jshint-stylish'));
});

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function () {
      gulp.watch('source/javascript/**/*.js', ['jshint']);
});

看看我们做了哪些修改。

我们将watch任务添加为default任务的依赖，所以当我们运行：

$ gulp

也将会运行watch任务。

现在看看新的jshint任务。它获取任何source/javascript或其子目录下的.js文件，因此，source/javascript/carousel/main.js同样会应用于该任务。这些文件将会传递给gulp-jshint插件，然后再传递给stylish reporter，给我们展示jshint检查代码的结果。

我们可以这样运行该任务：

$ gulp jshint

非常简单！

OK，那么后面的watch任务呢。其实也很简单，如果检测到任何js文件有改动，就会运行jshint任务。

➻ 使用libsass编译Sass文件

Sass作为CSS的扩展，支持变量，嵌套规则，混合，内联导入等。

Ken Wheeler has already done an awesome write up on Sass that you can find here.

为了编译Sass，我们需要使用gulp-sass。

NOTE: gulp-sass uses node-sass which in turn uses libsass. On windows you'll need to install python 2.7.x and Visual Studio Express 2013 in order to compile libsass. Mac and Linux will use whatever gcc is available.

An alternative is to use gulp-ruby-sass, which uses ruby and the sass gem instead.

/* file: gulpfile.js */

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    sass = require('gulp-sass');
    
/* jshint task would be here */

gulp.task('build-css', function () {
      return gulp.src('source/scss/**/*.scss')
          .pipe(sass())
          .pipe(gulp.dest('public/assets/stylesheets'));
});

/* updated watch task to include sass */

gulp.task('watch', function () {
      gulp.watch('source/javascript/**/*.js', ['jshint']);
      gulp.watch('source/scss/**/*.scss', ['build-css']);
});

我们可以使用gulp-sourcemaps添加sourcemaps。sourcemap是非常棒的功能，如果你从未使用过可以体验一下了。它可以将处理压缩或修改过的文件映射到源文件。

A list of the plugins that support gulp-sourcemaps can be found here.

/* file: gulpfile.js */
var gulp       = require('gulp'),
    jshint     = require('gulp-jshint'),
    sass       = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps');

gulp.task('build-css', function() {
  return gulp.src('source/scss/**/*.scss')
    .pipe(sourcemaps.init())  // Process the original sources
      .pipe(sass())
    .pipe(sourcemaps.write()) // Add the map to modified source.
    .pipe(gulp.dest('public/assets/stylesheets'));
});

➻ Javascript合并与压缩

在使用大量的JavaScript时，通常需要将它们整合在一起。通用插件gulp-concat可以轻松完成这个任务。

我们还可以更进一步，通过使用uglify工具以获得更小的文件体积。

另外，我们将根据是否在生产环境来判断是否使用uglify。

gulp.task('build-js', function() {
  return gulp.src('source/javascript/**/*.js')
    .pipe(sourcemaps.init())
      .pipe(concat('bundle.js'))
      //only uglify if gulp is ran with '--type production'
      .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop()) 
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('public/assets/javascript'));
});

➻ 总结

我们只是了解了gulp的表面。Gulp可以根据您的需要变的复杂或者简单，您可以通过代码配置让它完成任何任务。

从简单如合并JavaScript文件，到自动化部署到S3 bucket。Gulp就是这样一个可以帮助您简单、快速完成任务的工具。