Yeoman,教你快速打造自己的脚手架

yeoman.png

不造大家在实际开发项目中,有没有这样的困惑,就是每次起一个新的项目,脚手架都要从旧有的项目copy,然后改名、删除内容,留下基本框架,最后还有npm install,安装包。并且,经常会因为插件的版本问题,导致运行出错(当然,如果你所在的小组有一套完整的工具流,可以忽略我)。

身为程序媛的我,怎么可以忍受这种不高bigger的项目脚手架搭建方式呢?

还好,有Yeoman来相助。

搭建脚手架必备工具

  • yeoman
  • 脚手架模板

起始准备

  • 确定你安装了node和npm,node的版本要求在4.0以上,npm要求与node相匹配的版本。
    版本号可以通过以下方式查看:
node-version.png
  • 全局安装yeoman
sudo npm install -g yo
  • 查看版本
yo-version.png

创建属于你自己的generator

创建文件目录

  • 创建文件夹,文件夹名为generator-namename是你创建的generator的名字。这里我以generator-gulp为例,创建以gulp为构建工具的脚手架

  • 创建package.json

npm init
  • 创建文件夹app、templates,文件index.js

  • 现在的文件目录如下:

  - generator-gulp
    - app
      - templates  // 存放脚手架目录
      - index.js     // 对脚手架进行操作的代码
    - package.json

修改package.json

{
    "name": "generator-gulp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [
        "yeoman-generator"
    ],
    "author": "huangxiaoyan",
    "license": "ISC",
    "dependencies": {
        "del": "^2.2.0",
        "yeoman-generator": "^0.23.3"
    }
}

安装插件

执行npm install,安装yeoman-generator和del这两个插件

npm install

创建脚手架模板

我以基于gulp的脚手架为例。分为pc端和移动端这两种模板,创建后的目录如下:

  - templates
    - mobile
      - html
      - js
      - sass
      -images
    - pc
     - html
      - js
      - sass
      -images
    - gulpfile.js
    - package.json

编写index.js

这是最重要最关键的一步。

Yeoman提供了多个方法来搭建你自己的脚手架。具体的可以去看看官方文档,在这里,我只抽取里面主要的方法来完成脚手架的搭建。

先上框架版的index.js

var generators = require('yeoman-generator'),
    _ = require('yeoman-generator/node_modules/lodash'),
    glob = require('yeoman-generator/node_modules/glob'),
    chalk = require('yeoman-generator/node_modules/chalk'),
    log = console.log,
    fs = require('fs'),
    path = require('path'),
    del = require('del'),
    generatorName = 'gulp';  // 记住这个名字,下面会有用

 // 导出模块,使得yo xxx能够运行
module.exports = yeoman.generators.Base.extend({
    constructor: function () {
        // 默认会添加的构造函数
        yeoman.generators.Base.apply(this, arguments);
    },
    prompting: function () {
         // 询问用户
    },
    writing: {
        // 拷贝文件,搭建脚手架
    },
    end: {
        // 搭建完执行的操作
    }
})

constructor

在这个阶段,检查脚手架是否已经存在,如果存在,则退出。

  constructor: function(){
        generators.Base.apply(this, arguments);

        // 检查脚手架是否已经存在
        var dirs = glob.sync('+(src)');
        //now _.contains has been abandoned by lodash,use _.includes
        if(_.includes(dirs, 'src')){
            // 如果已经存在脚手架,则退出
            log(chalk.bold.green('资源已经初始化,退出...'));
            setTimeout(function(){
                process.exit(1);
            }, 200);
        }
    },

prompting

询问用户,根据答案生成不同模板的脚手架

  prompting: function(){
        var questions = [
            {
                name: 'projectAssets',
                type: 'list',
                message: '请选择模板:',
                choices: [
                    {
                        name: 'PC模板',
                        value: 'pc',
                        checked: true   // 默认选中
                    },{
                        name: 'Mobile模板',
                        value: 'mobile'
                    }
                ]
            },
            {
                type: 'input',
                name: 'projectName',
                message: '输入项目名称',
                default: this.appname
            },
            {
                type: 'input',
                name: 'projectAuthor',
                message: '项目开发者',
                store: true,   // 记住用户的选择
                default: 'huangxiaoyan'
            },{
                type: 'input',
                name: 'projectVersion',
                message: '项目版本号',
                default: '0.0.1'
            }
        ]
        return this.prompt(questions).then(
            function(answers){
                for(var item in answers){
                    // 把answers里的内容绑定到外层的this,便于后面的调用
                    answers.hasOwnProperty(item) && (this[item] = answers[item]);
                }
            }.bind(this));
    }

writing

copy文件到指定目录,生成脚手架。

writing: function(){
        /**
        * 可以在prompting阶段让用户输入
        * 也可以指定,完全根据个人习惯
        **/
        this.projectOutput = './dist';
        //拷贝文件
        this.directory(this.projectAssets,'src');
        this.copy('gulpfile.js', 'gulpfile.js');
        this.copy('package.json', 'package.json');
    }

end

生成脚手架后,进行的一些处理。

end: function(){
          /**
          * 删除一些多余的文件
          * 由于无法复制空文件到指定目录,因此,如果想要复制空目录的话
          * 只能在空文件夹下建一个过渡文件,构建完后将其删除
        **/
        del(['src/**/.gitignore','src/**/.npmignore']);
        var dirs = glob.sync('+(node_modules)');
        if(!_.includes(dirs, 'node_modules')){
            // 将你项目的node_modules和根目录下common-packages的node_modules进行软连接
            // 为什么要这样做,大家可以先想想
            this.spawnCommand('ln', ['-s', '/usr/local/lib/node_modules/common-packages/'+generatorName+'/node_modules', 'node_modules']);
        }
    }

最后一步

generator-gulp目录下执行

npm link

这一步将generator-gulp软连接到你的usr/local/lib/node_modules/generator-gulp
这样运行yo时,就可以找到这个generator-gulp

未解决的问题

最后还有一个问题,就是为什么在end阶段要对node_modules进行软连接呢?

因为这样每次构建脚手架的时候,不需要每次都去安装插件,不需要每次都去执行npm install,并且可以保证包的版本号一致。

common-packages

我们可以创建这样的一个目录,专门存放需要的node_modulescommon-packages就是这样的一个功能。
目录结构如下:

- common-packages
  - gulp
    - package.json
    - node_modules

其中,gulp这个文件名是跟你的generatorName是一致的。
刚刚上面说了,这个文件是在根目录下的,但是,由于我们可能以后会对这个目录进行修改添加,所以放在根目录不是很合适。
所以我们可以这样做,将common-package同样软连接到根目录。

进入common-packages,执行

npm link

至此,脚手架模板打造完成。

新建项目文件,打开终端,执行yo,可以看到:

脚手架搭建.png

恭喜恭喜,您已经成功了!

完整的项目代码可以到我的github上查看。
github项目地址:https://github.com/SunnySnail/yo

推荐阅读更多精彩内容