grunt的使用方法,環境配置和插件安裝


雖然現在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/’


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM