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。