學(xué)習(xí)使用grunt來打包JavaScript和CSS程序的教程
Java世界里的Maven提供了強(qiáng)大的包依賴管理和構(gòu)建生命周期管理。在JavaScript的世界里,隨著Node.js的流行,JavaScript原生的構(gòu)建工具已經(jīng)成為可能。
Grunt.js是基于Node.js的自動(dòng)化任務(wù)運(yùn)行器。Grunt.js結(jié)合NPM的包依賴管理,完全可以媲美Maven。Grunt.js天然適合前端應(yīng)用程序的構(gòu)建——不僅限于JavaScript項(xiàng)目,同樣可以用于其他語言的應(yīng)用程序構(gòu)建。越來越多的JavaScript項(xiàng)目已經(jīng)在使用Grunt,其中最大的使用者包括著名的jQuery項(xiàng)目。
Grunt的生態(tài)系統(tǒng)在迅速的成長,目前已經(jīng)有上百種插件發(fā)布在NPM上可供選擇。同時(shí),任何人都可以方便的發(fā)布自己的插件到NPM上供其他人使用。
Grunt沒有像Maven那樣強(qiáng)調(diào)構(gòu)建的生命周期,各種任務(wù)的執(zhí)行順序可以隨意配置。Grunt本身僅是一個(gè)執(zhí)行器,大量的功能都存在于NPM管理的插件中。特別是以grunt-contrib-開頭的核心插件,覆蓋了大部分的核心功能,比如handlebars,jade,less,compass,jshint,jasmine,clean,concat,minify,copy,uglify,watch,minify,uglify等。
通過提供通用的接口以進(jìn)行代碼規(guī)范檢驗(yàn)(Lint)、合并、壓縮、測(cè)試及版本控制等任務(wù),Grunt使入門門檻大大降低了。
一,安裝nodejs,grunt,以及grunt插件
1,安裝nodejs
下載地址:https://nodejs.org/download/
2,安裝grunt,以及插件
npm install grunt -g //安裝grunt,-g全局變量 npm install grunt-cli -g //安裝grunt命令行 npm install grunt --save-dev //安裝grunt,--save-dev保存到安裝目錄 npm install grunt-cli --save-dev //安裝grunt命令行 npm install grunt-contrib-jshint --save-dev //js語法檢測(cè)插件 npm install grunt-contrib-concat --save-dev //js合并插件 npm install grunt-contrib-uglify --save-dev //js壓縮插件 npm install grunt-contrib-cssmin --save-dev //CSS壓縮插件
grunt和grunt-cli,-g和--save-dev都安裝一下,建議這樣,省得出錯(cuò)。
3,創(chuàng)建工作目錄
當(dāng)上面的安裝都結(jié)束后,node_modules里面就包含了上面安裝的插件,將nodejs安裝目錄中的node_modules,copy到新的目錄中,并創(chuàng)建Gruntfile.js,package.json,
在這里要注意一點(diǎn),Gruntfile.js,package.json一定要與這個(gè)node_modules同一目錄下,不然在調(diào)用grunt插件的時(shí)候會(huì)報(bào)錯(cuò)的,例如:
>> Local Npm module "grunt-contrib-uglify" not found. Is it installed? Warning: Task "uglify" not found. Use --force to continue.
如果你沒有裝grunt-contrib-uglify插件,也會(huì)報(bào)這個(gè)錯(cuò)誤。
二,創(chuàng)建Gruntfile.js和package.json
1,package.json
{
"name": "jstest",
"file": "function",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.11.3", //后面的數(shù)字是版本號(hào),從各個(gè)插件目錄下的package.json能找到
"grunt-contrib-concat": "~0.5.1",
"grunt-contrib-uglify": "~0.9.2",
"grunt-contrib-cssmin": "~0.14.0"
}
}
2,Gruntfile.js
module.exports = function (grunt) {
// grunt配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['js_s/function.js', 'js_s/jquery.validate.js'],
dest: 'js_d/main.js' //合并不壓縮
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' //文件頂部的注釋,可自定義
},
build: { //將package.json中的file對(duì)應(yīng)的文件,進(jìn)行壓縮并重命名
src: 'js_s/<%= pkg.file %>.js', //注意空格,官方配置例子是pkg.name
dest: 'js_d/<%= pkg.file %>.min.js' //注意空格,官方配置例子是pkg.name
},
buildall: {//將js_s文件夾下的所有js文件,壓縮后,放到j(luò)s_d文件夾中,文件名不變
files: [{
expand:true,
cwd:'js_s',//js目錄下
src:'**/*.js',//所有js文件
dest: 'js_d'//輸出到此目錄下
}]
},
hebin: {//將function.js和jquery.validate.js,合并,并壓縮成main.min.js
files: {
'js_d/main.min.js': ['js_s/function.js', 'js_s/jquery.validate.js']
}
},
ymain: {//將main.js壓縮成main1.min.js
src: 'js_d/main.js',
dest: 'js_d/main1.min.js'
}
},
jshint: { //檢查,function.js是不是有語法錯(cuò)誤
all: ['js_s/function.js']
},
cssmin: {
combine: {
files: { //將css_s文件夾下的css文件合成一個(gè)
'css_d/main.css': ['css_s/*.css']
}
},
minify: {
options: {
keepSpecialComments: 0, /* 刪除所有注釋 */
banner: '/* minified css file */'
},
files: { //單個(gè)CSS文件壓縮
'css_d/index.min.css': ['css_s/index.css']
}
},
test: {//按文件夾下的所有CSS文件,壓縮后,放到新的文件夾中,文件名不變
files: [{
expand:true,
cwd:'css_s',//css目錄下
src:'**/*.css',//所有css文件
dest: 'css_d'//輸出到此目錄下
}]
}
}
});
// 加載插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 是否調(diào)用插件功能
//grunt.registerTask('default', ['concat','uglify','jshint','cssmin']);
// grunt.registerTask('default', ['uglify']);
// grunt.registerTask('default', ['concat']);
//grunt.registerTask('default', ['jshint']);
grunt.registerTask('default', ['cssmin']); //CSSMIN插件的功能能用,其他功能都不起作用
}
配置文件好了以后,在命令行下,輸入grunt就可以合并壓縮了。上面的測(cè)試文件,基本上都是圍繞著,合并與壓縮來的,對(duì)于做WEB前端的來說,這個(gè)還是比較重要的。
從壓縮效果來說,JS的壓縮效果比較理想,CSS一般,當(dāng)然,這根寫的代碼有關(guān)系。

- Node.js的項(xiàng)目構(gòu)建工具Grunt的安裝與配置教程
- 使用基于Node.js的構(gòu)建工具Grunt來發(fā)布ASP.NET MVC項(xiàng)目
- 配置Grunt的Task時(shí)通配符支持和動(dòng)態(tài)生成文件名問題
- Grunt入門教程(自動(dòng)任務(wù)運(yùn)行器)
- 詳解Grunt插件之LiveReload實(shí)現(xiàn)頁面自動(dòng)刷新(兩種方案)
- 使用GruntJS構(gòu)建Web程序之Tasks(任務(wù))篇
- 使用GruntJS構(gòu)建Web程序之合并壓縮篇
- 使用GruntJS構(gòu)建Web程序之構(gòu)建篇
- 使用GruntJS構(gòu)建Web程序之安裝篇
- 使用GruntJS鏈接與壓縮多個(gè)JavaScript文件過程詳解
- 使用Grunt.js管理你項(xiàng)目的應(yīng)用說明
- 基于Node.js的JavaScript項(xiàng)目構(gòu)建工具gulp的使用教程
相關(guān)文章
Node.js全局處理響應(yīng)并進(jìn)行異常管理
這篇文章主要為大家介紹了Node.js全局處理響應(yīng)并進(jìn)行異常管理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
npm安裝windows-build-tools卡在Successfully?installed?Python2.7
這篇文章主要介紹了npm安裝windows-build-tools卡在Successfully?installed?Python2.7的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
node.js實(shí)現(xiàn)回調(diào)的方法示例
這篇文章主要介紹了node.js實(shí)現(xiàn)回調(diào)的方法,結(jié)合實(shí)例形式分析了node.js實(shí)現(xiàn)向回調(diào)函數(shù)傳遞參數(shù)、閉包的使用及鏈?zhǔn)交卣{(diào)相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
Node.js版本升級(jí)如何修改模塊默認(rèn)的保存位置
這篇文章主要給大家介紹了關(guān)于Node.js版本升級(jí)如何修改模塊默認(rèn)的保存位置,文中通過代碼以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用node.js具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-05-05
Electron如何通過ffi-napi調(diào)用dll導(dǎo)出接口
文章介紹了如何在Electron項(xiàng)目中使用ffi-napi模塊調(diào)用DLL文件,并詳細(xì)描述了環(huán)境搭建、安裝Electron和ffi-napi、配置Visual Studio和Python環(huán)境、解決常見問題等步驟,感興趣的朋友跟隨小編一起看看吧2025-02-02
node實(shí)現(xiàn)簡單的反向代理服務(wù)器
本篇文章主要介紹了node實(shí)現(xiàn)簡單的反向代理,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07

