使用Nodejs+Yeoman定制前端开发项目构建工具

Nodejs介绍

现在说起Nodejs大家肯定不陌生了，没吃过猪肉也见过猪跑，它的推广也是带着争议的，有些人或多或少会鄙视它，免不了被各种程序语言社区对比。在我开始用它之前，我也不知道它到底有什么好的。原归正传，官方的介绍如下：

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

这句话中的几个要点：1，它是基于chrome的javascript引擎编译出的平台；2，它使用事件驱动和无阻塞I/O模型；3，它是轻量高效的；4，适用于数据密集型的实时应用；5，它是跨平台的。

大概是这样，更多关于Nodejs的背景我就不再赘述，google之。有群友问我怎么学Nodejs，我的回答是，我也是最近一个月边学边开发了两个工具（重构内审规范自动化审查工具和前端开发项目初始化工具），从实际问题着手，寻找解决方案，没有系统的学，对它，我也是一知半解，它只是一个工具，实现这两个工具查官方API文档和google足够了。

yo fedp

说到前端开发项目构建不得不提鼎鼎大名的Yeoman，它定义了一个工作流，包含了三个核心工具（yo，bower和grunt）来帮你更快的构建和开发应用。这个项目自动构建的实现是Yeoman的核心脚手架工具yo帮我做了大部分工作，而我只是编写了要生成的目标项目框架模版。

开始讲如何实现工具之前，我们先来体验一下如何快速生成一个前端开发项目框架，该项目框架包含源码目录，单元测试，代码校验，文档工具，合并压缩，coffeescript编译等前端常用工具及相关配置。假设你已经完成Nodejs环境的安装配置并了解基本的命令行操作。

全局安装yo：

Shell

$ npm install -g yo

1

$ npm install -g yo

全局安装generator-fedp：

Shell

$ npm install -g generator-fedp

1

$ npm install -g generator-fedp

通过上面两条命令，你已经成功安装了yo和fedp这个项目生成器，接下来只要一条命令就可以完成前端开发项目的初始化构建，首先在命令行里切换到即将进行开发的项目目录，然后执行以下命令：

Shell

$ yo fedp

1

$ yo fedp

你会看到yo帮你创建之前说到的相关文件并且根据模版配置自动帮你下载所需的node模块以及这些模块的依赖模块，一阵刷屏之后，项目就构建完毕了，你只要把相关的配置（gruntfile.js,package.json或bower.json等）进行小调整就可以开始你的开发工作了。

生成目录框架如下，大概意思应该都能看明白，readme文件里也有说明

接下来介绍怎么实现这个过程，其实很简单，按照官方文档关于generator的介绍就可以完成一个generator的编写：http://yeoman.io/generators.html，简单讲几个要点。

yo已经为你准备开发generator做了一个generator模版，好像有点绕，意会意会，只要你装有yo和generator-generator模块，你就可以完成一个generator雏形，正如我们的fedp一样。先装个generator-generator：

Shell

$ npm install -g yo generator-generator

1

$ npm install -g yo generator-generator

然后命令行切换到你要编写generator的目录下，执行如下命令：

Shell

$ yo generator

1

$ yo generator

执行命令后，会要你输入你在Github上的用户名和仓库名，用来生成默认的配置信息，这些配置信息可以在你即将开发的generator根目录的package.json中找到并修改，当然如果你要使用Travis测试框架，也可以修改.travis.yml文件，如果有要改名的话。要注意的是，yo的generator命名规则就是generator-yourname，yourname是自定义的名称，但一定是以generator加横杠开头。当然这一步不会去检测你是否真的在Github上有这个项目，但是为了保险起见，可以在Github上创建一个，以免后面要提交npm的时候跟别人冲突了。成功生成后的目录结构如下：

我们要实现的这个generator的逻辑和模板在app下，index.js处理如何生成目标文件和定制化的参数处理，template里存放目标文件的模版，我们现在创建了一个叫test2的generator，然后我贴出index.js并注释说明这个文件里主要代码的作用。

JavaScript

//引入依赖模块，不了解的先看看Nodejs基础吧'use strict';var util = require('util');var path = require('path');var yeoman = require('yeoman-generator');var Test2Generator = module.exports = function Test2Generator(args, options, config) { yeoman.generators.Base.apply(this, arguments); this.on('end', function () { this.installDependencies({ skipInstall: options['skip-install'] });//读取命令中是否有--skip-install，如果有则在项目构建完毕后不自动安装依赖模块，用法：yo test2 --skip-install }); this.pkg = JSON.parse(this.readFileAsString(path.join(__dirname, '../package.json')));};util.inherits(Test2Generator, yeoman.generators.Base);Test2Generator.prototype.askFor = function askFor() { var cb = this.async(); // have Yeoman greet the user. console.log(this.yeoman);//定义在命令执行时的输出提问信息，该信息你爱怎么用怎么用，比如提问要生成的项目名是什么，然后可以自动写入配置中之类的操作 var prompts = [{ type: 'confirm', name: 'someOption', message: 'Would you like to enable this option?', default: true }]; this.prompt(prompts, function (props) { this.someOption = props.someOption; cb();//执行async，开始真正的工作，假设你不需要用户输入信息，可以把prompt去掉，但一定要执行cb，不然程序就不会有任何操作 }.bind(this));};Test2Generator.prototype.app = function app() { this.mkdir('app');//在目标文件夹创建app目录，这里的目标文件夹是指你要初始化的项目目录 this.mkdir('app/templates');//在目标文件夹app下创建templates目录 this.copy('_package.json', 'package.json');//将_package.json复制到目标文件夹下，并重命名为package.json this.copy('_bower.json', 'bower.json');};Test2Generator.prototype.projectfiles = function projectfiles() { this.copy('editorconfig', '.editorconfig');//操作与上面的一样，都会被执行，位置可以任意放 this.copy('jshintrc', '.jshintrc');};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

//引入依赖模块，不了解的先看看Nodejs基础吧

'use strict';

var util = require('util');

var path = require('path');

var yeoman = require('yeoman-generator');

var Test2Generator = module.exports = function Test2Generator(args, options, config) {

  yeoman.generators.Base.apply(this, arguments);

  this.on('end', function () {

    this.installDependencies({ skipInstall: options['skip-install'] });//读取命令中是否有--skip-install，如果有则在项目构建完毕后不自动安装依赖模块，用法：yo test2 --skip-install

  });

  this.pkg = JSON.parse(this.readFileAsString(path.join(__dirname, '../package.json')));

};

util.inherits(Test2Generator, yeoman.generators.Base);

Test2Generator.prototype.askFor = function askFor() {

  var cb = this.async();

  // have Yeoman greet the user.

  console.log(this.yeoman);

//定义在命令执行时的输出提问信息，该信息你爱怎么用怎么用，比如提问要生成的项目名是什么，然后可以自动写入配置中之类的操作

  var prompts = [{

    type: 'confirm',

    name: 'someOption',

    message: 'Would you like to enable this option?',

    default: true

  }];

  this.prompt(prompts, function (props) {

    this.someOption = props.someOption;

    cb();//执行async，开始真正的工作，假设你不需要用户输入信息，可以把prompt去掉，但一定要执行cb，不然程序就不会有任何操作

  }.bind(this));

};

Test2Generator.prototype.app = function app() {

  this.mkdir('app');//在目标文件夹创建app目录，这里的目标文件夹是指你要初始化的项目目录

  this.mkdir('app/templates');//在目标文件夹app下创建templates目录

  this.copy('_package.json', 'package.json');//将_package.json复制到目标文件夹下，并重命名为package.json

  this.copy('_bower.json', 'bower.json');

};

Test2Generator.prototype.projectfiles = function projectfiles() {

  this.copy('editorconfig', '.editorconfig');//操作与上面的一样，都会被执行，位置可以任意放

  this.copy('jshintrc', '.jshintrc');

};

整个代码就这样写完了，你要做的就只是在template下创建好目录结构，然后以后的项目都是template下的文件和目录副本，这样就实现了一个generator，是不是很简单？但是这里有一些潜在的问题，不管是Github还是generator他们都不会复制空目录，也就是说如果你要放空目录，里面必须放一个文件（可以是空文件），这样可以提交到Github也可以用this.directory直接将template下的目录整个复制到目标文件夹下，而不用一直mkdir，这样也就产生了许多垃圾文件，不用担心，你可以在gruntfile里配置clean任务，在项目构建完成后一键清除这些垃圾文件。

代码调试
在你把项目提交到npm之前，要怎么调试呢？很简单，命令行切换到你的generator目录下执行下面的命令：

Shell

$ npm link

1

$ npm link

这样就会在node全局模块目录下建立该模块的快捷方式或软链接，之后就可以随时修改代码随时使用yo命令来测试你的generator了。

发布Nodejs模块
要发布你的generator到npm服务器上，你需要有社区帐号，你只需执行命令npm adduser，然后根据提示输入你的用户名密码等信息即可创建帐号，然后在你的generator目录下执行npm publish，没有异常的话又是一阵刷屏，然后就提示你发布成功，你可以到https://npmjs.org/上搜到你发布的模块了。发布后别人就可以跟使用其他node模块一样使用你的generator啦。

总结

如果你熟悉完整个流程后会发现，这个generator的开发几乎没有什么难度，只要你有前端开发基础，最后丢个链接给大家围观参考一下，我的generator-fedp：https://github.com/hiwanz/generator-fedp，欢迎试用反馈改进建议。