雖然現在grunt的用的越來越少了,但是插件數量還是相當多的,另外grunt和gulp的使用相當相似;
grunt需要安裝node和npm
驗證node是否安裝:node -v
驗證npm是否安裝:npm -v
下面是具體的使用方法:
1》安裝全局的配置環境 npm install -g grunt-cli
2》安裝grunt 在命令行中運行命令 npm install grunt --save-dev (這樣輸入的是每個項目都必須重新安裝grunt) 這里如果想使用全局的就加-g ,如果只是本次項目用grunt,就不用加-g全局
2》准備兩個文件
a> Gruntfile.js 文件 ---》文件書寫按照對應要使用的模塊的內容來寫
主任務和模塊名稱一致
子任務 / src: 需要壓縮的文件路徑
dest :壓縮后的路徑和名稱,沒有路徑會創建
只壓縮代碼,不修改參數的名字 options/ mangle/ Default:{} 默認是true 混淆參數 false 是不混淆
運行命令 grunt uglify
b>配置任務 package.json 文件 關於項目的配置信息文件 記錄項目的詳細信息
注意這步必須在安裝完grunt后操作
編輯 package.json 文件有兩種方法:
①在官網找一個package.json文件復制到編輯器中,進行修改並保存到你操作grunt的文件夾中;
②用nodejs命令行創建一個package.json文件:
在你操作grunt的文件夾中運行命令行,輸入npm init 回車,然后會提示你輸入一系列信息內容(每次輸入信息完成后按回車),信息如下:
name: (grunt)
version: (1.0.0)
description:
entry point: (Gruntfile.js)
test command:
git repository:
keywords:
author:
license: (ISC)
完成后會顯示所有你輸入過的信息並提示你填寫yes
信息如下:
About to write to D:\grunt\package.json:
{
"name": "grunt",
"version": "1.0.0",
"description": "",
"main": "Gruntfile.js",
"dependencies": {
"grunt": "^1.0.1",
"grunt-contrib-uglify": "^2.0.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) yes
執行到此步驟環境配置完成,剩下的就是挑選你需要的模塊了
3》下載模塊
在官網找到你需要的模塊內容
官網--插件列表(頭部)--選擇需要的插件
注意:
官方維護的都帶星號
不帶星號的都是第三方的插件
使用插件的步驟:
⑴下載插件(模塊)
⑵配置模塊
每個插件的詳解中都有如何下載該模塊,首先在你操作grunt的文件夾中運行命令行,然后執行對應下載插件的命令,然后按照插件的說明配置Gruntfile.js文件(注意Gruntfile.js 文件名使唯一的每次只能修改內容)
轉載請注明‘轉載於Jason齊齊的博客http://www.cnblogs.com/jasonwang2y60/’