寫到今天，其實應該都已經知道 webpack 是做什麼用的了，名副其實的 module bundler，就是將你的各種 assets 打包在一起，形成模組。

而 gulp 呢？就是 Task Runner，你可以在 build process 中建立很多的任務，而 webpack 與 gulp 聯手，webpack 的作用就是 gulp 的其中一種任務(模組化的任務)，gulp 就是用來執行整個 build process 的 workflow。

為什麼是番外篇呢？其實原本不是很想寫 gulp，但其實 webpack 我已經不知道要寫什麼了，當然若你去看 webpack 的官網的話，其實還是有很多的東西，只是我想寫些比較常用的，本身也對 gulp 有一點瞭解，而 gulp 與 webpack 也算相輔相成，來試著看看如何整合吧。

所以今天，就讓我們先來安裝 gulp。

安裝 gulp

若之前已經有安裝過 gulp 的話，官方建議先將原來的 gulp 移除，再安裝 gulp-cli，以免有衝突產生：

$ npm rm --global gulp
$ npm install --global gulp-cli

這時候，再到專案資料夾中執行以下：

$ npm init // 在我們原來的專案資料夾中，這行已經執行過了，若是新專案，才需要執行
$ npm install --save-dev gulp

建立 gulp 的設定檔：gulpfile.js

在專案資料夾中，建立 gulp 本身的設定檔 gulpfile.js，內容如下：

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

上面這段的意思就是定義了一個 default 的任務，裡面就可以放所想要執行的程式。

再於專案資料夾中執行以下指令：

$ gulp

會出現以下訊息：

[23:33:27] Using gulpfile ~/path/to/webpack_proj/gulpfile.js
[23:33:27] Starting 'default'...
[23:33:27] Finished 'default' after 98 μs

從訊息中可以看出 gulp 指令執行了 gulpfile.js，並且開始(Starting)執行 default 任務，但 default 任務沒有什麼程式，所以很快就結束(Finished)了。

到這邊， gulp 就算順利安裝完成了。但畢竟這是 webpack 的系列教學，還是應該要帶點與 webpack 相關的東西：

透過 gulp 執行 webpack

讓我們修改 gulpfile.js 成如下：

var gulp = require('gulp');
var gutil = require("gulp-util");
var webpack = require("webpack");

var webpackConfig = require("./webpack.config.js");

gulp.task('default', function() {
  // place code for your default task here
});

gulp.task("webpack", function(callback) {
  // run webpack
  webpack(webpackConfig, function(err, stats) {
    if(err) throw new gutil.PluginError("webpack", err);
    gutil.log("[webpack]", stats.toString({
      // output options
    }));
    callback();
  });
});

很清礎地，我們多 require 了 gulp-util 與 webpack，以及 webpack 的設定檔 ./webpack.config.js；也新增了一個 webpack 的任務，該任務僅僅是去抓取設定檔 webpackConfig 來執行 webpack 指令，然後有錯誤訊息也會顯示出來。這時，我只要再執行以下指令：

// gulp <task 名稱>
$ gulp webpack

就可以完成透過 gulp 來執行 webpack 的這個任務了~~

明天依然會繼續撰寫 webpack 與 gulp 的番外篇，敬請期待