學習使用grunt來打包JavaScript和CSS程式的教學課程
- PHPz原創
- 2016-05-16 15:22:031613瀏覽
Grunt.js是基於Node.js的自動化任務執行器。 Grunt.js結合NPM的套件依賴管理，完全可以媲美Maven。 Grunt.js天然適合前端應用程式的建置－不僅限於JavaScript項目，同樣可以用於其他語言的應用程式建置。越來越多的JavaScript專案已經在使用Grunt，其中最大的使用者包括著名的jQuery專案。
Grunt的生態系統正在快速的成長，目前已經有上百種外掛程式發佈在NPM上可供選擇。同時，任何人都可以方便的發布自己的插件到NPM上供其他人使用。
Grunt沒有像Maven那樣強調建置的生命週期，各種任務的執行順序可以隨意配置。 Grunt本身只是一個執行器，大量的功能都存在於NPM管理的插件中。特別是以grunt-contrib-開頭的核心插件，涵蓋了大部分的核心功能，例如handlebars，jade，less，compass，jshint，jasmine，clean，concat，minify，copy，uglify，watch，minify，uglify等。
透過提供通用的介面以進行程式碼規範檢驗（Lint）、合併、壓縮、測試及版本控制等任務，Grunt使入門門檻大大降低了。
一，安裝nodejs，grunt,以及grunt外掛程式
1，安裝nodejs
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语法检测插件 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都安裝一下，建議這樣，省得出錯。
3，建立工作目錄
當上面的安裝都結束後，node_modules裡面就包含了上面安裝的插件，將nodejs安裝目錄中的node_modules，copy到新的目錄中，並建立Gruntfile.js，package.json，
在這裡要注意一點，Gruntfile.js，package.json一定要與這個node_modules同一目錄下，不然在調用grunt插件的時候會報錯的，例如：
>> Local Npm module "grunt-contrib-uglify" not found. Is it installed? Warning: Task "uglify" not found. Use --force to continue.
二，建立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", //后面的数字是版本号，从各个插件目录下的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: '/*! */\n' //文件顶部的注释，可自定义
},
build: { //将package.json中的file对应的文件，进行压缩并重命名
src: 'js_s/.js', //注意空格，官方配置例子是pkg.name
dest: 'js_d/.min.js' //注意空格，官方配置例子是pkg.name
},
buildall: {//将js_s文件夹下的所有js文件，压缩后，放到js_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是不是有语法错误
all: ['js_s/function.js']
},
cssmin: {
combine: {
files: { //将css_s文件夹下的css文件合成一个
'css_d/main.css': ['css_s/*.css']
}
},
minify: {
options: {
keepSpecialComments: 0, /* 删除所有注释 */
banner: '/* minified css file */'
},
files: { //单个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');
// 是否调用插件功能
//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就可以合併壓縮了。上面的測試文件，基本上都是圍繞著，合併與壓縮來的，對於做WEB前端的來說，這個還是比較重要的。