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就是这样一个能够帮助您简单、快速完成任务的工具。