windows下安裝node環境，以及grunt試水筆記

grunt，當下前端界知名度最高的工做流處理工具。

在一線的互聯網公司，它早已經被用爛了，而我真正接觸，是在去年年末...

期間還由於心裏太雜分心玩樂而荒廢學途，以至到最近才重拾學業，在這裏BS一下本身...

其實最近心裏依然還包含雜質，只不過已收心迴歸一點點學習狀態了。

廢話到此爲止，這便把這星期對grunt的學習心得整理彙總一下。

 

要說grunt，不得不先說說node.js。當下，不少大神的博客網站都能找到grunt的教程。可是，其中對node.js的說明都是一筆帶過。

而這對沒接觸node.js的人而言就比如想進門看個究竟，卻發現門上有鎖，不得不先找鑰匙。

而我碰巧就是這種人...因此，我在本身的整理筆記上，決定一說這環境搭建。

至於node.js是什麼，不在筆記的範圍內，就很少言了。

這裏只需知道，要運行grunt，必須有node.js環境。

 

下面是搭建node.js的主要步驟：

1.下載安裝文件，下面是win7 64位系統版本的安裝文件下載鏡像地址：

http://dist.u.qiniudn.com/v0.10.26/node-v0.10.26-x86.msi

若是上面的地址不能用了，或者以爲版本過低不喜歡，能夠直接去node官網下載：

http://www.nodejs.org/download/

2.下載以後，傻瓜式安裝，不停的下一步。

3.安裝完成以後，「開始—全部程序—Node.js—Node.js command prompt」

4.打開命令窗以後，執行下面語句：

npm config set prefix "E:\node\node-global"

npm config set cache "E:\node\node-cache"

上面語句的做用是配置全局模塊的安裝路徑到「E:\node\node-global」，npm緩存到「E:\node\node-cache」

node 全局模塊大多數都是提供命令行訪問的，因此還要把 「E:\node\node-global」 加到系統PATH裏面，方面直接運行使用！

PS：上面的路徑，可根據我的須要設置到不一樣地方

 

安裝玩node.js後，還要安裝grunt。在完成上面的提到的工做以後，安裝grunt只須要簡單的一行指令便可：

npm install -g grunt-cli

這裏須要注意的是，grunt有兩個版本，服務端版本（grunt）和客戶端版本（grunt-cli），咱們要安裝的是客戶端版本。

若是你不慎安裝了服務端版本，執行下面指令卸載之。

npm uninstall -g grunt

npm install 和 npm uninstall 分別是模塊安裝和卸載命令， -g 是全局安裝/卸載的意思，後面跟的是須要安裝/卸載的模塊名。

 

環境搭好了，接下來講說怎麼使用。

首先，在須要使用grunt的項目根目錄建兩個文件package.json和Gruntfile.js

下面是一個很簡單的package.json文件實例：

{ 　　"name": "ngDemo", //項目名
　　"version": "1.0.0", //項目版本號
　　"devDependencies": { 　　　　"grunt-cmd-transport": "~0.3.0",
　　　　"grunt-contrib-concat": "~0.3.0", 　　　　"grunt-contrib-uglify": "~0.2.4", 　　　　"grunt-contrib-copy": "~0.5.0", 　　　　"grunt-contrib-clean": "~0.5.0" 　　} //項目中依賴的grunt插件，冒號後面的內容表示使用該版本以上的插件
}

此外，package.json還能配置其餘信息，這裏就不一一列出，有興趣可閱讀下面文章，當中有提到相關內容：

http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html

package.json建好以後，運行命令行窗口，cd到項目根目錄，執行下面命令，就能安裝所需插件了。

npm install

上面命令成功執行後，項目根目錄會多出一個node_modules文件夾，裏面就是剛剛安裝的插件了。

 

接下來，就是重頭戲了—Gruntfile.js

這是grunt的任務配置文件，它告訴grunt咱們要作什麼，使用grunt，不外乎二者：1.寫任務配置，2.寫grunt插件

做爲菜鳥，我目前只在應用階段，因此我只瞭解了任務配置一環，也就是Gruntfile.js的編寫。

至於grunt插件的編寫，等往後有再深刻，一來grunt的插件自己很豐富，功能也全面；二來當下還有其餘學習目標。

再而後，我要掉鏈子了。對於Gruntfile.js的編寫說明，實在是太繁瑣太複雜，要在這裏說清楚，須要很長的篇幅。

因爲我實在缺乏這個耐心去整理（知識點很散不少），因此這裏無恥的以一個傳送門解決問題，阿門，主會原諒個人...

下面鏈接，是大漠大神對Gruntfile.js任務配置的一篇教程，很詳細，很長，知識點比較散，耐心看完吧：

http://www.w3cplus.com/tools/grunt-tutorial-configuring-tasks.html

但在本部分結束以前，仍是要把當中的重點記下。

一是關於文件路徑的匹配規則：

* — 匹配任意數量的字符，但不匹配/

? — 匹配單個字符，但不匹配/

** — 匹配任意數量的字符，包括/，只要它是路徑中惟一的一部分

! — 在模式的開頭用於否認一個匹配模式(即排除與模式匹配的信息)

[] — 匹配指定範圍內的字符，如：[0-9] 匹配數字 0-9， [a-z] 配置字母 a-z

{x,y} — 匹配指定組中某項，如 a{d,c,b}e 匹配 ade ace abe

下面是一些示例：

//能夠指定單個文件
{src: 'foo/this.js', dest: …} //或者指定一個文件數組
{src: ['foo/this.js', 'foo/that.js', 'foo/the-other.js'], dest: …} //或者使用一個匹配模式
{src: 'foo/th*.js', dest: …} //一個獨立的node-glob模式
{src: 'foo/{a,b}*.js', dest: …} //也能夠這樣編寫
{src: ['foo/a*.js', 'foo/b*.js'], dest: …} //foo目錄中全部的.js文件，按字母排序
{src: ['foo/*js'], dest: …} //這裏首先是bar.js，接着是剩下的.js文件按字母排序
{src: ['foo/bar.js', 'foo/*.js'], dest: …} //除bar.js以外的全部的.js文件，按字母排序
{src: ['foo/*.js', '!foo/bar.js'], dest: …} //全部.js文件按字母排序, 可是bar.js在最後.
{src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: …} //模板也能夠用於文件路徑或者匹配模式中
{src: ['src/<%= basename %>.js'], dest: 'build/<%= basename %>.min.js'} //它們也能夠引用在配置中定義的其餘文件列表
{src: ['foo/*.js', '<%= jshint.all.src %>'], dest: …}

 

好了，當任務配置文件寫好後，就一切就緒了。

固然，在這裏我假設並默認你已經看完上面的任務配置教程，並能寫出優美無誤的配置文件來了...

接下來是執行了任務了。先運行命令行窗口，cd到項目根目錄。

 

假如你配置了默認任務，直接執行：

grunt

就會執行默認任務中的全部子任務。

 

你也能夠單獨執行某個任務：

grunt uglify

命令格式是grunt task。

 

若是某個任務裏還配置了子任務，能夠指定執行某個子任務：

grunt uglify:dist

命令格式是grunt task:target。

 

除了命令行方式外，你還可使用webstrom 8.0，它內置了grunt工具。具體的話你只要安裝以後就一目瞭然了，很是方便。

此外還能一鍵打開命令行工具，自動cd到當前項目根目錄，也是至關的便捷。

 

雖然對於grunt插件的編寫，我還未有深刻研究，但仍是找了一個示例，以備往後學習之用：

'use strict'; //這裏能夠寫依賴的模塊
var path = require("path"); module.exports = function(grunt) { 　　grunt.registerMultiTask('{your task name}', '', function() { 　　　　//這裏拿到options信息，便是gruntfile.js裏的對的{your task name}的配置的options
　　　　var options = this.options({}); 　　　　//遍歷全部的src文件
　　　　this.files.forEach(function(f) { 　　　　　　//根據正則過濾相應文件
　　　　　　var src = f.src.filter(function(filepath) { 　　　　　　　　// filepath是當前文件相對項目目錄的路徑
　　　　　　　　if (!grunt.file.exists(filepath)) { 　　　　　　　　　　grunt.log.warn('Source file "' + filepath + '" not found.'); 　　　　　　　　　　return false; 　　　　　　　　} else { 　　　　　　　　　　//這裏作想要作的事
　　　　　　　　　　var commentsReg = /<!--.*?-->/g; 　　　　　　　　　　//讀到當前文件
　　　　　　　　　　var html = grunt.file.read(filepath); 　　　　　　　　　　//替換註釋
　　　　　　　　　　html = html.replace(commentsReg, ""); 　　　　　　　　　　//寫到文件
　　　　　　　　　　grunt.file.write(f.dest + filepath, html); 　　　　return true; 　　　　} 　　　　　　}); 　　　　}); 　　}); };

 

最後，送上w3cplus的grunt系列教程鏈接：

http://www.w3cplus.com/blog/tags/372.html

裏面有不少篇關於grunt使用的文章，很全，在此向大漠致敬，w3cplus真是一個很是優秀的前端專業網站。