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就是這樣一個能夠幫助您簡單、快速完成任務的工具。