是時候來用 Slush 構建你本身的腳手架了

Slush 是什麼？

簡單的來講，Slush 就是一個腳手架生成工具。什麼？腳手架？這是什麼鬼？嗯，腳手架嘛，天然是這個樣子咯~

什麼？你問的是編程中的腳手架呀？啊，這麼說吧。身爲一個前端開發者，每次新建一個項目的時候是否是要建立好多個文件夾、配置文件？寫個文檔是否是要建立好多個目錄？然而每一個項目的結構和配置文件都大同小異，是否是早已繁瑣感受人生無望，失去了活着的意義？

就在這個時候，Slush 橫空出世，可以讓你輕鬆搞定這些繁瑣的事情，從新找回人生的意義，你就說吼不吼啊。今後麻麻不再用擔憂我成天都在忙着建立文件夾啦。

道理我都懂，可我大 Yeoman 用的好好的，爲何要換新？

嗯。Yeoman 確實也是一個很好用的腳手架工具，歷史悠久。然而它以 Grunt 爲基礎工具，上手難度大大提升。在輪子層出不窮的前端領域早已經是風前殘燭。而 Slush 則是基於 Gulp 的 『流式』思想做爲基礎工具，當你在作定製化腳手架時，Gulp 簡單易用的特色則能讓你輕輕鬆鬆搞定。

噢，這麼屌？那該怎麼用呢？

說了這麼多，我到底該怎麼用？

好啦，廢話很少說啦，咱們趕忙來趁着這個熱乎勁看看怎麼使用吧。

1. 安裝 slush

首先，你得有 NodeJS 環境，什麼？連 NodeJS 都沒裝？趕忙回家洗洗睡吧。若是你已經有了呢，你就能夠經過 npm 直接將 slush 安裝到全局環境下啦：

npm install -g slush複製代碼

安裝完了以後，你能夠執行下面這行命令來確保安裝成功：

slush -v複製代碼

若是你能看到輸出了一個版本號，就說明已經安裝成功啦。下面咱們就來看一下如何使用吧。

2. 安裝第三方腳手架

在使用 slush 建立項目以前，你得先安裝一些別人開發好的腳手架。安裝好腳手架以後才能根據腳手架生成約定好的項目結構喲。

咦？不知道有什麼腳手架？快來 大廳 裏找找吧。

很好，你已經找到了本身喜歡的腳手架了，咱們快來安裝它吧。打住，提醒你一下，腳手架要安裝到全局環境下才有效喲。

npm install -g slush-react-starter-kit複製代碼

3. 開始生成項目吧

如今咱們已經安裝好須要的一切了，終於能夠開始建立項目啦。

首先，建立一個項目文件夾並進入文件夾中：

mkdir my-first-slush-project
cd my-first-slush-project複製代碼

其次，執行 slush 生成命令：

slush react-starter-kit複製代碼

react-starter-kit是什麼鬼？咱們安裝的明明是 slush-react-starter-kit 呀。沒錯，在生成項目的時候，slush 後面跟的腳手架名字中是不帶 slush 關鍵詞的。就是這麼任性。

沒找到好使的，寶寶想要自定義怎麼辦？

固然了，可能你翻遍了整個大廳都沒找到本身想要的，迫切想要本身定製一個腳手架怎麼辦呢？且聽我慢慢道來。

其實很簡單啦，Slush 腳手架就是一個普通的 npm package，惟一須要注意的有這麼幾點：

1. 名字要以 slush-* 的方式
2. package 中包含一個 slushfile.js 文件
3. package.json 文件中加上 slushgenerator 關鍵詞方便別人檢索
4. 模板文件放在 templates 文件夾中
5. 別忘了安裝 gulp 做爲本地依賴啦

假設你已經按照上面這些約定作好了準備工做，那麼接下來咱們就能夠搞一件大新聞啦。

第一步：建立模板文件

首先，你要將模板文件（就是運行腳手架以後生成的項目文件）所有放到 templates 文件夾中

第二步：在 slushfile.js 文件中編寫任務流。

前面已經說到 Slush 是基於 Gulp 做爲基礎工具的，因此你只須要按照 Gulp 的使用方法在 slushfile.js 編寫任務流就能夠啦。

咦，好像有點不太對，既然是用 Gulp，那麼 gulpfile.js 文件呢？

這裏確實是不須要 gulpfile.js 文件啦，由於 Gulp 任務都在 slushfile.js 文件中寫啦，Slush 會幫你自動驅動 Gulp 的啦。

好了，那麼 slushfile.js 文件中的到底該怎麼寫呢？放着我來，小哥親自給你示範一下：

var gulp = require('gulp'),
    install = require('gulp-install'),
    conflict = require('gulp-conflict'),
    template = require('gulp-template'),
    inquirer = require('inquirer');

gulp.task('default', function (done) {
  inquirer.prompt([
    {
        type: 'input',
        name: 'name', 
        message: 'Give your app a name', 
        default: gulp.args.join(' ') // 從運行參數中獲取值做爲 name 的默認值。
    },
    {
        type: 'confirm',
        name: 'moveon',
        message: 'Continue?'
    }
  ]).then(function (answers) {
    if (!answers.moveon) {
      return done();
    }

    gulp.src(__dirname + '/templates/**')      // 使用腳本所在的目錄做爲相對路徑。
      .pipe(template(answers))                 // Lodash 模板支持，能夠方便的在模板中進行插值。
      .pipe(conflict('./'))                    // 當文件衝突時，詢問是否覆蓋。
      .pipe(gulp.dest('./'))                   // 輸出到執行命令的當前文件夾中。
      .pipe(install())                         // 使用 `bower install` 或 `npm install` 執行安裝操做。
      .on('end', function () {
        done();                                // 告知完成。
      });
  });
});複製代碼

PS: 去哪裏發現諸如 [inquirer](https://github.com/SBoudrias/Inquirer.js) 這麼好用的 package 呢？你能夠關注下 github.com/sqrthree/aw… 喲。

如今就已經搞定啦，接下來怎麼使用呢？由於 Slush 調用的是全局環境下的腳手架，可是目前咱們的腳手架並不在全局環境中，然而你還沒發佈這個腳手架，不能直接工做 npm install -g 進行全局安裝，因此顯然是不！能！用！啦！哈！哈！哈！

彆着急砸電腦嘛，咱們還有一個辦法捏。那就是經過 npm link 命令將當前腳手架掛載到全局環境中啦。你只須要在當前文件夾中執行 npm link，搞定，收工（前提是 package.json 已經寫好）。而後就能夠隨便找個文件夾安裝咱們上面說的方法使用腳手架啦。

生成 Slush 腳手架的腳手架

儘管自定義一個腳手架已經很是方便了，可是細心的你會發現幾乎每一個腳手架之間 slushfile.js 也都大同小異，只是 templates 文件夾中的模板文件不同，因此呢，你懂得😉。

slush-generator 就是這麼一個讓咱們來生成 Slush 腳手架的腳手架。有了它，建立自定義腳手架的時候異常方便。

第一步：安裝 slush-generator

npm install -g slush-generator複製代碼

第二步：建立並進入自定義腳手架的文件夾

mkdir my-slush-generator
cd my-slush-generator複製代碼

第三步：運行任務：

slush generator複製代碼

以後會讓你回答一些問題，在回答過以後，你的自定義腳手架目錄就已經生成好啦。接下來只須要在 templates 文件夾中放置你須要的文件就行了。

查看已經安裝好的腳手架

直接輸入 slush 便可看到已經安裝過的腳手架：

➜  slush
[slush] Installed generators
[slush] ├── generator (0.2.11)
[slush] └── koa2 (0.1.0)複製代碼

怎麼樣？是否是已經火燒眉毛的想要嘗試了？

喔，對了，少俠留步，差點忘了告訴你一件事情：

查看更多文章請關注 github.com/sqrthree/sq…