Grunt之项目脚手架

在网上搜了下，grunt这方面的教程挺少的，来去都是一些被频繁转载的文章。唉，人艰不拆啊。

首先我们在全局环境中安装grunt-init。

npm install -g grunt-init

来看看官方的文档，举几个例子，看看grunt-init是如何使用的：

1、使用grunt-init --help来获取程序帮助以及列出可用模板清单

2、使用grunt-init TEMPLATE基于可用模板创建一个项目

3、使用grunt-init /path/to/TEMPLATE基于任意其他目录中的可用模板创建

为了更好的理解grunt-init是如何使用的，我们首先安装下模板。

Grunt官方维护了一些grunt-init模板，这里列举一些吧。

grunt-init-commonjs、grunt-init-gruntfile、grunt-init-jquery、grunt-init-node.

在这里我们拿最基本的grunt-init-gruntfile来练手。

运行如下命令（windows下的同学请先安装git,重击这里：http://msysgit.github.io/），克隆 gruntfile模板到本地目录（目录可自选）。

Ok,这个时候我们可以看到在.grunt-init目录下生成了gruntfile文件夹.

这其中包含了一些文件。template.js是我们的主模板文件，如果你想要自定义一个模板，那么这个文件是不可或缺的。

root文件夹是你要复制到目标位置的文件，在gruntfile模板中，里面只包含有Gruntfile.js文件。

这个时候我们来试着运行一下模板文件。

在我们新建一个gruntInitTest项目，在其目录下运行如下命令：

grunt-init gruntfile

运行完成之后，我们可以看到Gruntfile.js已经生成在项目文件夹下了。

就是这样简单！

~~~~~~~~~~~~~~~~~~~~~~无力吐槽的分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

在学习了如何安装运行模板之后，我们再来看看，如何创建一个自己的模板。

我们新建一个自定义的模板，命名为myTemplate。

这个模板我建立在系统的.grunt-init目录下，这样，在运行grunt-init命令时，就不需要敲上一大堆的路径了，直接‘grunt-init xxx’（xxx是你自己的模板名称）就行了，简单快捷。

查阅官网的资料，我写了个简单的template.js文件，代码如下：

 /*
  * just for test
  */
 'use strict';
 // 基本的模板描述，当用户运行grunt init或grunt-init时显示
 exports.description = 'Create a ckTemp.';
 // 给用户展示的一些信息[可选参数]
 exports.notes = '';
 // 通过可选的通配模式或者通配模式数组，对目录下的文件进行匹配，若匹配，grunt将终止并生成一个警告信息，防止可能出现的文件覆盖
 exports.warnOn = ['*'];
 //init
 exports.template = function(grunt, init, done) {
     init.process({}, [
         init.prompt('projectName','Godzilla'),
         init.prompt('licenses', 'MIT'),
         init.prompt('author_name'),
         init.prompt('author_email')
     ], function(err, props) {
         // 返回一个包含待复制文件的对象，每个文件都包含了源文件的绝对路径和目标文件的相对路径，并按照rename.json(如果存在)中的规则进行重命名(或者忽略)。
         var files = init.filesToCopy(props);
         // 给files对象添加许可协议证书文件.
         init.addLicenseFiles(files, props.licenses);
         // 复制并处理root下的文件（root下所有{%%}模板都会依据props数据对象集合中的数据进行替换，除非设置了noProcess选项）
         init.copyAndProcess(files, props);
         //init.copyAndProcess(files, props, {noProcess: 'html/**'});
         //在这里也可以使用init.writePackageJSON来生成package.json,以供grunt使用
         init.writePackageJSON(props.projectName+'.json', props);
         //done
         done();
     });
 };

更多的参数说明，请大家去官网查阅，这里我就不一一说明了。

建立好template.js文件后，我们新建一个项目Godzilla（哥斯拉）。

在项目下运行grunt-init命令

这个时候在项目下就生成了我们需要的文件了。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~结束前的分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

通过grunt-init我们可以很方便快捷的建立我们的工程项目，想想前端开发还在刀耕火种的那个年代，再到今日，感慨万千啊。

真心感想那些无私奉献的可爱前端er,如果不是他们，前端依然处在石器时代，黑暗继续笼罩大地，黎明遥遥无期。

愿上帝保佑他们，Amen。