關(guān)于css和js壓縮和合并的方法史煎，記得我在前端面試題目中有寫道。方法很多驳糯，今天主要介紹grunt方法篇梭。
使用前提
grunt是基于node的，要在你電腦上使用grunt酝枢，電腦上必須已安裝node環(huán)境恬偷。具體node環(huán)境的安裝和搭建。centos請(qǐng)看帘睦，windows安裝相對(duì)簡(jiǎn)單袍患，下載安裝包安裝就可以了。關(guān)于mac的安裝竣付，后面有時(shí)間在詳細(xì)介紹诡延。
一、新建package.json
package.json放在根目錄下古胆，它包含了該項(xiàng)目的一些元信息肆良，如項(xiàng)目名稱、描述逸绎、版本號(hào)惹恃，插件等。
{
"name": "haorooms.com",
"version": "v0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-concat": "~0.5.1",
"grunt-contrib-cssmin": "~0.12.3",
"grunt-htmlhint": "~0.9.2"
}
}
grunt-contrib-jshint（js語法檢查）棺牧、grunt-contrib-concat（js合并）巫糙、grunt-contrib-uglify（采用UglifyJS壓縮js）、grunt-contrib-cssmin（Css壓縮合并）陨帆、grunt-htmlhint（html語法驗(yàn)查）曲秉，以上都是常用的插件采蚀。
更多插件疲牵，請(qǐng)?jiān)L問：http://gruntjs.com/plugins
二承二、插件安裝
安裝：uglify
npm install grunt-contrib-uglify
安裝concat
npm install grunt-contrib-concat
安裝：cssmin
npm install grunt-contrib-cssmin
插件安裝完成后，查看根目錄纲爸，會(huì)發(fā)現(xiàn)node_modules目錄亥鸠，包含了相應(yīng)的插件目錄。
三识啦、新建Gruntfile.js
Gruntfile.js由以下內(nèi)容組成
1负蚊、wrapper函數(shù)，結(jié)構(gòu)如下颓哮，這是Node.js的典型寫法家妆，使用exports公開API
module.exports = function(grunt) {
// Do grunt-related things in here
};
2、項(xiàng)目和任務(wù)配置
3冕茅、載入grunt插件和任務(wù)
4伤极、定制執(zhí)行任務(wù)
例如：
module.exports = function(grunt) {
//配置參數(shù)
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';',
stripBanners: true
},
dist: {
src: [
"js/config.js",
"js/smeite.js",
"js/index.js"
],
dest: "assets/js/default.js"
}
},
uglify: {
options: {
},
dist: {
files: {
'assets/js/default.min.js': 'assets/js/default.js'
}
}
},
cssmin: {
options: {
keepSpecialComments: 0
},
compress: {
files: {
'assets/css/default.css': [
"css/global.css",
"css/pops.css",
"css/index.css"
]
}
}
}
});
//載入concat和uglify插件，分別對(duì)于合并和壓縮
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
//注冊(cè)任務(wù)
grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
}
也可以單獨(dú)壓縮js和css姨伤，不進(jìn)行合并哨坪，例如：
module.exports = function (grunt) {
// 構(gòu)建任務(wù)配置
grunt.initConfig({
//讀取package.json的內(nèi)容，形成個(gè)json數(shù)據(jù)
pkg: grunt.file.readJSON('package.json'),
//壓縮js
uglify: {
//文件頭部輸出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
my_target: {
files: [
{
expand: true,
//相對(duì)路徑
cwd: 'js/',
src: '*.js',
//src: ['**/*.js', '!**/*.min.js'], //不包含某個(gè)js,某個(gè)文件夾下的js
dest: 'dest/js/',
rename: function (dest, src) {
var folder = src.substring(0, src.lastIndexOf('/'));
var filename = src.substring(src.lastIndexOf('/'), src.length);
// var filename=src;
filename = filename.substring(0, filename.lastIndexOf('.'));
var fileresult=dest + folder + filename + '.min.js';
grunt.log.writeln("現(xiàn)處理文件："+src+" 處理后文件："+fileresult);
return fileresult;
//return filename + '.min.js';
}
}
]
}
},
//壓縮css
cssmin: {
//文件頭部輸出信息
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
//美化代碼
beautify: {
//中文ascii化乍楚，非常有用当编！防止中文亂碼的神配置
ascii_only: true
}
},
my_target: {
files: [
{
expand: true,
//相對(duì)路徑
cwd: 'css/',
src: '*.css',
dest: 'dest/css/',
rename: function (dest, src) {
var folder = src.substring(0, src.lastIndexOf('/'));
var filename = src.substring(src.lastIndexOf('/'), src.length);
// var filename=src;
filename = filename.substring(0, filename.lastIndexOf('.'));
var fileresult=dest + folder + filename + '.min.css';
grunt.log.writeln("現(xiàn)處理文件："+src+" 處理后文件："+fileresult);
return fileresult;
//return filename + '.min.js';
}
}
]
}
}
});
// 加載指定插件任務(wù)
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 默認(rèn)執(zhí)行的任務(wù)
grunt.registerTask('default', ['uglify', 'cssmin']);
};
grunt api文檔：http://gruntjs.com/api/grunt
grunt.initConfig方法
用于模塊配置，它接受一個(gè)對(duì)象作為參數(shù)徒溪。該對(duì)象的成員與使用的同名模塊一一對(duì)應(yīng)忿偷。
每個(gè)目標(biāo)的具體設(shè)置，需要參考該模板的文檔臊泌。就cssmin來講鲤桥，minify目標(biāo)的參數(shù)具體含義如下：
expand：如果設(shè)為true，就表示下面文件名的占位符（即*號(hào)）都要擴(kuò)展成具體的文件名缺虐。
cwd：需要處理的文件（input）所在的目錄芜壁。
src：表示需要處理的文件。如果采用數(shù)組形式高氮，數(shù)組的每一項(xiàng)就是一個(gè)文件名慧妄，可以使用通配符。
dest：表示處理后的文件名或所在目錄剪芍。
ext：表示處理后的文件后綴名塞淹。
grunt常用函數(shù)說明：
grunt.initConfig：定義各種模塊的參數(shù)，每一個(gè)成員項(xiàng)對(duì)應(yīng)一個(gè)同名模塊罪裹。
grunt.loadNpmTasks：加載完成任務(wù)所需的模塊饱普。
grunt.registerTask：定義具體的任務(wù)运挫。第一個(gè)參數(shù)為任務(wù)名，第二個(gè)參數(shù)是一個(gè)數(shù)組套耕， 表示該任務(wù)需要依次使用的模塊谁帕。
命令行執(zhí)行g(shù)runt任務(wù)
進(jìn)入到項(xiàng)目根目錄，敲：
grunt
就會(huì)按Gruntfile配置的文件進(jìn)行壓縮合并冯袍。
也可以單獨(dú)執(zhí)行匈挖，例執(zhí)行js壓縮命令：
grunt uglify
css壓縮命令:
grunt cssmin
