Grunt使用實例

Grunt 基于 Node.js 亡脸,用 JS 開發(fā),這樣就可以借助 Node.js 實現(xiàn)跨系統(tǒng)跨平臺的桌面端的操作树酪,例如文件操作等等浅碾。此外,Grunt 以及它的插件們续语,都作為一個 包 垂谢,可以用 NPM 安裝進行管理。
所以 NPM 生成的 package.json 項目文件疮茄,里面可以記錄當(dāng)前項目中用到的 Grunt 插件滥朱,而 Grunt 會調(diào)用 Gruntfile.js 這個文件,解析里面的任務(wù)(task)并執(zhí)行相應(yīng)操作力试。

安裝 Grunt-cli

其實是安裝 Grunt-cli 徙邻,這里安裝Grunt的命令行支持(command line interface,簡稱CLI)畸裳,在這之后羊苟,命令提示符中將會識別grunt命令残制。安裝grunt-cli 并不能稱為安裝Grunt完畢微酬。這是因為凛俱,Grunt本身不是全局使用的装诡,任何具體的工作目錄陶缺,如果要使用Grunt跪但,都需要安裝一次Grunt凉当。這樣做也是因為不同的工作目錄夯到,需要通過Grunt做的自動化工作也不同嚷缭,因此需要獨立配置。

npm install -g grunt-cli

—save-dev 參數(shù)耍贾,表示會把剛安裝的東西添加到 package.json 文件中阅爽。

生成 package.json 文件

npm對工作目錄有一個要求。這個要求是:根目錄位置處有一個package.json
文件荐开。這個文件定義了工作目錄對應(yīng)的一些項目信息(名字付翁,描述),以及包(就是npm模塊)依賴關(guān)系晃听。
執(zhí)行下面命令便可以初始化

npm init

為當(dāng)前工作目錄安裝Grunt和需要的插件

  • 方法1

之前我們把Grunt安裝到了全局目錄下百侧,現(xiàn)在需要引入到當(dāng)前項目路徑砰识,與此同時,所需要的插件可能有這些:

安裝它們的方式可以是:

npm install --save-dev grunt
npm install  --save-dev 插件1 插件2 插件3

這個時候package.json文件夾里多出了一些代碼佣渴。

  "devDependencies": {
    "grunt": "0.4.1"
  },
  • 方法二-手動更改package.json

"devDependencies": {
  "grunt": "~0.4.1",
  "grunt-contrib-cssmin": "~0.7.0"
 }

手動在package.json文件里面添加這個字段辫狼,將需要依賴的包添加進去,如果只需安裝最新版本辛润,可以改成** * **膨处,然后執(zhí)行npm install,會發(fā)現(xiàn)文件夾里多了node_modules文件夾砂竖,里面存放的就是我們需要的插件真椿。

Gruntfile.js文件

具體看這篇文章
http://www.reibang.com/p/78d556cd621c


插件配置區(qū)域

這里其實就是用json語法具體配置一個插件如何去完成它所要執(zhí)行的任務(wù)。詳細(xì)配置看官網(wǎng)配置說明晦溪。

開始使用

只需要輸入grunt 任務(wù)名 便可以一切自動完成瀑粥。

使用淘寶鏡像加速

網(wǎng)址:http://npm.taobao.org/

查看配置信息

npm config list ls -l

使用淘寶鏡像之后,需要對.cnpmrc文件進行配置

prefix=D:
odejs
ode global
cache=D:
odejs
ode cache

添加這樣的話語

提示

  • 如果全局目錄已經(jīng)有插件了三圆,不要直接強制覆蓋安裝狞换,可能會出現(xiàn)問題(無法寫入)。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末舟肉,一起剝皮案震驚了整個濱河市修噪,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌路媚,老刑警劉巖黄琼,帶你破解...
    沈念sama閱讀 212,332評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異整慎,居然都是意外死亡脏款,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,508評論 3 385
  • 文/潘曉璐 我一進店門裤园,熙熙樓的掌柜王于貴愁眉苦臉地迎上來撤师,“玉大人,你說我怎么就攤上這事拧揽√甓埽” “怎么了?”我有些...
    開封第一講書人閱讀 157,812評論 0 348
  • 文/不壞的土叔 我叫張陵淤袜,是天一觀的道長痒谴。 經(jīng)常有香客問我,道長铡羡,這世上最難降的妖魔是什么积蔚? 我笑而不...
    開封第一講書人閱讀 56,607評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮烦周,結(jié)果婚禮上库倘,老公的妹妹穿的比我還像新娘临扮。我一直安慰自己,他們只是感情好教翩,可當(dāng)我...
    茶點故事閱讀 65,728評論 6 386
  • 文/花漫 我一把揭開白布杆勇。 她就那樣靜靜地躺著,像睡著了一般饱亿。 火紅的嫁衣襯著肌膚如雪蚜退。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,919評論 1 290
  • 那天彪笼,我揣著相機與錄音钻注,去河邊找鬼。 笑死配猫,一個胖子當(dāng)著我的面吹牛幅恋,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播泵肄,決...
    沈念sama閱讀 39,071評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼捆交,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了腐巢?” 一聲冷哼從身側(cè)響起品追,我...
    開封第一講書人閱讀 37,802評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎冯丙,沒想到半個月后肉瓦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,256評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡胃惜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,576評論 2 327
  • 正文 我和宋清朗相戀三年泞莉,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片船殉。...
    茶點故事閱讀 38,712評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡戒财,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出捺弦,到底是詐尸還是另有隱情,我是刑警寧澤孝扛,帶...
    沈念sama閱讀 34,389評論 4 332
  • 正文 年R本政府宣布列吼,位于F島的核電站,受9級特大地震影響苦始,放射性物質(zhì)發(fā)生泄漏寞钥。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,032評論 3 316
  • 文/蒙蒙 一陌选、第九天 我趴在偏房一處隱蔽的房頂上張望理郑。 院中可真熱鬧蹄溉,春花似錦、人聲如沸您炉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽赚爵。三九已至棉胀,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間冀膝,已是汗流浹背唁奢。 一陣腳步聲響...
    開封第一講書人閱讀 32,026評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留窝剖,地道東北人麻掸。 一個月前我還...
    沈念sama閱讀 46,473評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像赐纱,于是被迫代替她去往敵國和親脊奋。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,606評論 2 350

推薦閱讀更多精彩內(nèi)容