首页 > 代码库 > Grunt之项目脚手架
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文件,代码如下:
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。