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 publishGulp实践
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 《一步之遥》