Grunt之项目脚手架

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

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

npm install -g grunt-init

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

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

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

三、使用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文件，代码以下：

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

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

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

在项目下运行grunt-init命令

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

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

经过grunt-init咱们能够很方便快捷的创建咱们的工程项目，想一想前端开发还在刀耕火种的那个年代，再到今日，感慨万千啊。

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

愿上帝保佑他们，Amen。