是时候来用 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…