Grunt針對(duì)靜態(tài)文件的壓縮,版本控制打包的實(shí)例講解
在講之前先談?wù)劥笾虏襟E：安裝nodejs -> 全局安裝grunt -> 項(xiàng)目創(chuàng)建package.json --> 項(xiàng)目安裝grunt以及grunt插件 -> 配置Gruntfile.js -> 運(yùn)行任務(wù)
1.安裝Node
我們開始之前需要安裝Nodejs，如果沒有安裝的 傳送門
安裝好了之后，查看是否安裝成功，正常是這樣的提示
這里建議npm換成淘寶的cnpm，速度杠杠的。
安裝命令:
2.安裝全局Grunt
安裝命令：
cnpm install grunt -g
3.項(xiàng)目創(chuàng)建package.json
在項(xiàng)目根目錄下創(chuàng)建package.json文件，文件內(nèi)容如下
4.項(xiàng)目安裝grunt以及grunt插件
我們所需要的插件
| 插件名稱 | 說明 | Github地址 |
| grunt-contrib-clean | 清空文件和文件夾 | https://github.com/gruntjs/grunt-contrib-clean |
| grunt-contrib-copy | 復(fù)制文件和文件夾 | https://github.com/gruntjs/grunt-contrib-copy |
| grunt-contrib-concat | 連接、合并文件（沒用到） | https://github.com/gruntjs/grunt-contrib-concat |
| grunt-contrib-cssmin | （CSS文件）壓縮 | https://github.com/gruntjs/grunt-contrib-cssmin |
| grunt-contrib-uglify | （JS文件）壓縮 | https://github.com/gruntjs/grunt-contrib-uglify |
| grunt-filerev | 文件內(nèi)容hash（MD5）（版本號(hào)控制） | https://github.com/yeoman/grunt-filerev |
| grunt-usemin | 文件進(jìn)行引用修改 | https://github.com/yeoman/grunt-usemin |
| load-grunt-tasks | oad-grunt-tasks | https://github.com/sindresorhus/load-grunt-tasks |
我們打開我們的項(xiàng)目文件夾，在路徑欄中輸入cmd然后回車
回車后的界面
打開命令行窗口之后，我們輸入安裝命令：
cnpm install grunt grunt-contrib-clean grunt-contrib-copy grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-uglify grunt-filerev grunt-usemin load-grunt-tasks --save-dev
5.配置Gruntfile.js （這是重點(diǎn)，重點(diǎn)，重點(diǎn)。重要的事情說三遍。）
先貼一下我的配置，后面慢慢說明
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
var path = {
src : 'test',
dest : 'dist',
}
grunt.initConfig({
path : path,
clean : {//清空生產(chǎn)文件夾
beforebuild : {
files : [{
src : ['<%= path.dest %>/']
}
]
}
},
filerev : {//對(duì)css和js文件重命名
build : {
files : [{
src : ['<%= path.dest %>/**',
'!<%= path.dest %>/page/*.html',//html文件不加版本號(hào)
'!<%= path.dest %>/**/*.{png,jpg,jpeg}']//圖片 不需要加版本號(hào)
}
]
}
},
useminPrepare : {//聲明concat、cssmin、uglify
build : {
files : [{
src : '<%= path.src %>/page/*.html'
}
],
}
},
usemin : {//修改html中的css和js引用
html : {
files : [{
src : '<%= path.dest %>/page/*.html'
}
]
}
},
copy : {//復(fù)制文件
build : {
files : [{
expand : true,//為true啟用cwd,src,dest選項(xiàng)
cwd : '<%= path.src %>/',//所有src指定的匹配都將相對(duì)于此處指定的路徑（但不包括此路徑）
src : ['**/*.*'],//相對(duì)于cwd路徑的匹配模式。意思就是 src/**/*.*，匹配src下面所有文件
dest : '<%= path.dest %>/'//目標(biāo)文件路徑前綴。
}
]
}
},
cssmin :{
build : {
files : [{
expand : true,//為true啟用cwd,src,dest選項(xiàng)
cwd : '<%= path.src %>/',//所有src指定的匹配都將相對(duì)于此處指定的路徑（但不包括此路徑）
src : ['css/*.css'],//相對(duì)于cwd路徑的匹配模式。意思就是 src/**/*.css，匹配src下面所有css文件
dest : '<%= path.dest %>/'//目標(biāo)文件路徑前綴。
}
]
}
},
uglify :{
build : {
files : [{
expand : true,//為true啟用cwd,src,dest選項(xiàng)
cwd : '<%= path.src %>/',//所有src指定的匹配都將相對(duì)于此處指定的路徑（但不包括此路徑）
src : ['js/*.js'],//相對(duì)于cwd路徑的匹配模式。意思就是 src/**/*.js，匹配src下面所有js文件
dest : '<%= path.dest %>/'//目標(biāo)文件路徑前綴。
}
]
}
},
});
grunt.registerTask('default', ['clean:beforebuild', 'copy', 'cssmin', 'uglify','filerev', 'usemin']);
};
我們前面一直都在安裝這個(gè)安裝那個(gè)，但是安裝的這些東西怎么用起來了？
首先我們通過學(xué)習(xí) grunt入門 了解到插件如何使用，這是官網(wǎng)的例子。
pkg是通過讀取package.json生成的json對(duì)象。
uglify是 grunt-contrib-uglify 指定的任務(wù)名，每個(gè)插件都有對(duì)應(yīng)的任務(wù)名，可以在對(duì)應(yīng)的github里面查看
grunt.loadNpmTasks('grunt-contrib-uglify'); 從字面上就可以看出來/，加載能夠提供"uglify"任務(wù)的插件。
grunt.registerTask('default', ['uglify']); 注冊(cè)別名任務(wù)，這個(gè)別名任務(wù)對(duì)應(yīng)的是一個(gè)任務(wù)列表
當(dāng)通過 grunt 別名時(shí)，實(shí)際是執(zhí)行列表里的任務(wù)，并按順序執(zhí)行
這些基本的信息都可以通過官網(wǎng)查看。
我們來說說我們需求，我們需要對(duì)靜態(tài)文件打包壓縮，并且需要對(duì)靜態(tài)文件加入版本號(hào)而且所有引用靜態(tài)文件的html或css都得修改文件名，我們的需求明確后來來看看我們?cè)趺醋觥?/p>
第一步：我們需要重新打包，那就需要復(fù)制文件，所以我們需要grunt-contrib-copy插件。
在copy之前我們先要確定源文件和目標(biāo)文件，我這里源文件都放在test文件夾中，目標(biāo)文件都放在dist文件夾中
我們創(chuàng)建文件路徑
var path = {
src : 'test',
dest : 'dist',
}
文件路徑創(chuàng)建好了，我們來看copy
copy : {//復(fù)制文件
build : {
files : [{
expand : true,//為true啟用cwd,src,dest選項(xiàng)
cwd : '<%= path.src %>/',//所有src指定的匹配都將相對(duì)于此處指定的路徑（但不包括此路徑）
src : ['**/*.*'],//相對(duì)于cwd路徑的匹配模式。意思就是 src/**/*.*，匹配src下面所有文件
dest : '<%= path.dest %>/'//目標(biāo)文件路徑前綴。
}
]
}
},
從代碼的注釋就可以看出一二了。這里說下cwd，src，dest 。
其實(shí)這里的源路徑是 cwd + src。這才是真正的源路徑。dest是目標(biāo)路徑前綴。
我這里的意思是src下面所有的文件，意思就是把 src文件夾 里面的文件復(fù)制到 dest文件夾 里。這里可以指定需要復(fù)制的具體文件夾或者文件類型
第二步：進(jìn)行文件壓縮，我這里只是針對(duì)js和css壓縮，對(duì)img的壓縮可以查看對(duì)應(yīng)的插件，思路都一樣。
css壓縮需要用到 grunt-contrib-cssmin 插件，該插件對(duì)應(yīng)的任務(wù)名為 cssmin
cssmin :{
build : {
files : [{
expand : true,//為true啟用cwd,src,dest選項(xiàng)
cwd : '<%= path.src %>/',//所有src指定的匹配都將相對(duì)于此處指定的路徑（但不包括此路徑）
src : ['css/*.css'],//相對(duì)于cwd路徑的匹配模式。意思就是 src/**/*.css，匹配src下面所有文件
dest : '<%= path.dest %>/'//目標(biāo)文件路徑前綴。
}
]
}
},
js 壓縮需要用到 grunt-contrib-uglify 插件，該插件對(duì)應(yīng)的任務(wù)名為 uglify
uglify :{
build : {
files : [{
expand : true,//為true啟用cwd,src,dest選項(xiàng)
cwd : '<%= path.src %>/',//所有src指定的匹配都將相對(duì)于此處指定的路徑（但不包括此路徑）
src : ['js/*.js'],//相對(duì)于cwd路徑的匹配模式。意思就是 src/**/*.js，匹配src下面所有文件
dest : '<%= path.dest %>/'//目標(biāo)文件路徑前綴。
}
]
}
},
第三步：靜態(tài)文件重命名，我們這里的版本控制是通過對(duì)靜態(tài)文件重命名來現(xiàn)實(shí)的。
重命名需要用到 grunt-filerev 插件，該插件對(duì)應(yīng)的任務(wù)名為 filerev
filerev : {//對(duì)css和js文件重命名
build : {
files : [{
src : ['<%= path.dest %>/**',
'!<%= path.dest %>/page/*.html',//html文件不加版本號(hào)
'!<%= path.dest %>/**/*.{png,jpg,jpeg}']//圖片 不需要加版本號(hào)
}
]
}
},
這里只有一個(gè)src參數(shù)，傳的是個(gè)數(shù)組，我們這里是只想給css和js重命名，其他文件不需要。所以數(shù)組第一個(gè)參數(shù) src/** 匹配src文件夾中所有文件，后面兩個(gè) ! xx，是排除的意思，
第四步：修改html中css和js的引用
修改文件引用需要用到 grunt-usemin 插件，該插件對(duì)應(yīng)的任務(wù)名為 usemin
usemin : {//修改html中的css和js引用
html : {
files : [{
src : '<%= path.dest %>/page/*.html'
}
]
}
},
這里也只有一個(gè)src參數(shù)，給出的是html的地址，如果你還有css 可以這樣寫
usemin : {//修改html中的css和js引用
html : {
files : [{
src : '<%= path.dest %>/page/*.html'
}
]
},
css :{
files : [{
src : '<%= path.dest %>/css/*.css'
}
]
}
},
第五步：我們從 復(fù)制，壓縮，重命名，修改引用都說了一遍，這里還少一個(gè)東西，就是我們每次復(fù)制之前需要把目標(biāo)文件夾里面的文件刪除掉。
修改文件引用需要用到 grunt-contrib-clean 插件，該插件對(duì)應(yīng)的任務(wù)名為 clean
clean : {//清空生產(chǎn)文件夾
beforebuild : {
files : [{
src : ['<%= path.dest %>/']
}
]
}
},
這里也只有一個(gè)src參數(shù)，給出目標(biāo)文件夾的地址。
所有任務(wù)到這里就結(jié)算了。
我們注冊(cè)任務(wù)別
grunt.registerTask('default', ['clean:beforebuild', 'copy', 'cssmin', 'uglify','filerev', 'usemin']);
可以看到，我們這里只是注冊(cè)了任務(wù)，并沒有應(yīng)用插件。我們添加插件是聽過 load-grunt-tasks 插件完成的
require('load-grunt-tasks')(grunt);
這里指令相當(dāng)于我們一個(gè)個(gè)寫
grunt.loadNpmTasks('xxx');
Gruntfile.js 配置完了之后我們執(zhí)行g(shù)runt命令就可以在目標(biāo)文件夾中得到我們所需要的文件
這里補(bǔ)充說明幾點(diǎn)：
Gruntfile.js 配置完了之后我們執(zhí)行g(shù)runt命令就可以在目標(biāo)文件夾中得到我們所需要的文件
這里補(bǔ)充說明幾點(diǎn)：
這種寫法是動(dòng)態(tài)構(gòu)建文件對(duì)象
這種寫法是文件數(shù)組格式
以上這篇Grunt針對(duì)靜態(tài)文件的壓縮,版本控制打包的實(shí)例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
NPM是隨同NodeJS一起安裝的包管理工具,允許用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用,本文主要介紹了Node.js管理工具npm的具體使用,感興趣的可以了解一下2023-12-12
Express + Session 實(shí)現(xiàn)登錄驗(yàn)證功能
本文主要介紹在 Express 框架中，如何使用 Session 來實(shí)現(xiàn)用戶登錄身份驗(yàn)證。對(duì)express session實(shí)現(xiàn)登錄驗(yàn)證相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-09-09
安裝nvm并使用nvm安裝nodejs及配置環(huán)境變量的全過程
有時(shí)候使用nvm管理node會(huì)發(fā)現(xiàn)無法使用node或npm,主要原因是環(huán)境變量沒有配置成功,下面這篇文章主要給大家介紹了關(guān)于安裝nvm并使用nvm安裝nodejs及配置環(huán)境變量的相關(guān)資料,需要的朋友可以參考下2023-03-03
Node.js Sequelize如何實(shí)現(xiàn)數(shù)據(jù)庫的讀寫分離
Sequelize是一個(gè)易于使用，支持多SQL方言(dialect)的對(duì)象-關(guān)系映射框架（ORM），這個(gè)庫完全采用JavaScript開發(fā)并且能夠用在Node.JS環(huán)境中。它當(dāng)前支持MySQL, MariaDB, SQLite 和 PostgreSQL 數(shù)據(jù)庫。在Node.js中，使用 Sequelize操作數(shù)據(jù)庫時(shí)，同樣支持讀寫分離。2016-10-10
詳解基于node.js的腳手架工具開發(fā)經(jīng)歷
這篇文章主要介紹了詳解基于node.js的腳手架工具開發(fā)經(jīng)歷，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
當(dāng)我們想要更改一下所有的文件,如何可以在修改到這些文件的同時(shí)又能實(shí)現(xiàn)節(jié)省時(shí)間呢,通過這篇文章我們將來學(xué)習(xí)一下怎么通過這個(gè)腳本來實(shí)現(xiàn)這個(gè)功能,希望對(duì)大家有所幫助2023-11-11
node.js基于express使用websocket的方法
這篇文章主要介紹了node.js基于express使用websocket的方法,結(jié)合實(shí)例形式分析了node.js基于express調(diào)用websocket相關(guān)設(shè)置與使用操作技巧,需要的朋友可以參考下2017-11-11
一文教會(huì)你從Windows中完全刪除node.js
作為新手nodejs卸載后安裝就總出錯(cuò),下面這篇文章主要給大家介紹了關(guān)于如何從Windows中完全刪除node.js的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了如何在Node.js應(yīng)用程序中實(shí)現(xiàn)獲取視頻詳情的功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
這篇文章介紹了npm的安裝與使用，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06