前端自动化解决方案

Grunt前端工具

查看本机安装的yeoman generator的版本:

$  npm ls -g --depth=1 2>/dev/null | grep generator-

解析Grunt插件

我们的任务是编写一个一个grunt插件，它能够在源文件的头部添加“佛祖保佑，永无bug”的字符画。佛家四法印有云：“诸行无常 诸法无我 诸漏皆苦 涅槃寂静”。在coding.net上创建grunt-buddha-fun项目，并克隆到本地。在yeoman上搜索安装gruntplugin这个生成器。

$ cnpm i -g generator-gruntplugin

使用以上的生成器生成我们的项目代码：

$ yo gruntplugin grunt-buddha

生成器自动为我们生成了以下的代码：

我们将主要精力放在tasks目录.将我们从网络上搜集的字符画放在此目录：

接下来我们看一下核心代码buddha.js,其中使用的大部分语法可以到Grunt API查看。

在这个文件中替换我们自己的配置项，完整的代码参见grunt-buddha

修改Gruntfile.js的Buddha任务为如下：

grunt.initConfig({
  // Configuration to be run (and then tested).
  buddha: {
    options: {
      who: 'girl', // buddha girl
      commentSymbol: '//'
    },
    dist: ['test/fixtures/*.js']
  }
});

// Actually load this plugin's task(s).运行本地的grunt插件，不通过npm
grunt.loadTasks('tasks'); 

// By default, lint and run all tests.
grunt.registerTask('default', ['buddha']);

接下来就可以运行grunt命令来将test/fixtures/*.js的头部加上字符画！

发布我们的项目

将源码提交到github并生成git pages。接下来将我们的包发布到npmjs.com，你需要先注册一个账号。接下来使用以下的npm命令即可发布npm包到npmjs社区。：

$ npm adduser
$ npm publish

Gulp实践

Gulp也是一个构建工具，只需要运行cnpm i -g gulp即可完成安装。从无到有构建一个项目，我们首先应该想到在Yeoman中是否有对应的生成器。

接下来创建测试目录并生成项目：

$ cnpm i -g generator-gulp-webapp
$ mkdir gulp-demo
$ cd gulp-demo && yo gulp-webapp gulp-test

接下来我们运行gulp serve可以发现和grunt serve差不多，打开了浏览器，修改代码浏览器会实时刷新。

关于Grunt和Gulp的选择，我们要注意一点：适合自己的才是最好的。

使用npm充当构建工具

我们常用npm进行包管理，但是在package.json中的scrtpts配置项中我们也可以配置脚本来运行自己的命令，of course，它可以当做构建工具。继续使用上面使用yeoman生成的gulp项目在package.json中添加如下的配置项：

"scripts":{
  "opn":"open 'http://www.baidu.com'"
},

运行npm run opn将会在浏览器打开百度首页。仔细观察项目目录下的node_modules/.bin目录发现有一个opn文件。使用不带任何参数的npm run命令将会列出所有可用的脚本，如下图所示：

在scripts中我们的配置可以是$PATH环境变量中的命令或者是node_modules/.bin目录下的可执行程序，但是如果我们想要执行jshint需要怎么办？——只需要在项目目录下安装cnpm i jshint即可。

在package.json的scripts中做如下的配置：

"jshint":"jshint app/scripts/*.js"

接下来执行sudo npm run jshint即可。

同理build、serve等Grunt Task都完全可以通过npm来构建。

小知识：

npm中有几个很常用的scripts是不需要使用run命令的，它们分别是start、test和stop。也就是说npm start和npm run start是等效的。

npm还可以承载业务钩子，识别pre（前置）、post（后置）。

例如如下的scripts配置：

"pretest": "echo before test",
"test": "echo test",
"posttest": "echo after test",

执行npm test将会依次输出“before test”、“test”、“after test”。

npm 传递命令行参数和配置变量引用

例如package.json的scripts如下配置：

"ls":"ls -al"

运行命令npm run ls将和ls -al得到想通的效果。变量的配置如下图所示：

注意：以上的配置并不推荐使用，因为存在跨平台的风险，Linux和OS X的变量引用的符号是$而到了window，变量引用就变成了%。

Today is history，today we make history,today is part of history.

by 《一步之遥》