快捷導(dǎo)航

使用GruntJS構(gòu)建Web程序之合并壓縮篇

更新時(shí)間：2014年06月06日 10:58:34 作者：

前一篇講述了如何使用concat和uglify命令實(shí)現(xiàn)JavaScript資源的合并，壓縮。這篇講述下css資源的合并和壓縮。

有如下步驟：

1.新建項(xiàng)目Bejs
2.新建文件package.json
3.新建文件Gruntfile.js
4.命令行執(zhí)行g(shù)runt任務(wù)

一、新建項(xiàng)目Bejs
源碼放在src下，該目錄有兩個(gè)子目錄asset和js。js下放selector.js和ajax.js，這在上一篇已經(jīng)講了如何合并壓縮它們。這篇只關(guān)注asset目錄，asset目錄下放了一些圖片和css文件。一會(huì)會(huì)把兩個(gè)css資源reset.css和style.css合并，壓縮到dest/asset目錄。一個(gè)合并版本all.css，一個(gè)壓縮版本all-min.css。

二、新建package.json
package.json放在根目錄下，它的意義上一篇已經(jīng)介紹過(guò)了。現(xiàn)在的項(xiàng)目結(jié)構(gòu)如下

package.json內(nèi)容需符合JSON語(yǔ)法規(guī)范，如下

復(fù)制代碼代碼如下:

{
  "name": "BeJS",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-css":   ">0.0.0"
  }
}

grunt-contrib-concat上一篇已經(jīng)介紹過(guò)了，grunt-css 是這篇要使用的插件。

此時(shí)，打開(kāi)命令行工具進(jìn)入到項(xiàng)目根目錄，敲如下命令: npm install

查看根目錄，發(fā)現(xiàn)多了個(gè)node_modules目錄，包含了四個(gè)子目錄，見(jiàn)圖

三、新建文件Gruntfile.js
Gruntfile.js也是放在項(xiàng)目根目錄下，幾乎所有的任務(wù)都定義在該文件中，它就是一個(gè)普通的js文件，里面可以寫任意js代碼而不僅局限于JSON。和package.json一樣它也要和源碼一樣被提交到svn或git。

源碼如下

復(fù)制代碼代碼如下:

module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            css : {
                src: ['src/asset/*.css'],
                dest: 'dest/asset/all.css'
            }
        },
        cssmin: {
            css: {
                src: 'dest/asset/all.css',
                dest: 'dest/asset/all-min.css'
            }
        }
    });
    // 載入concat和css插件，分別對(duì)于合并和壓縮
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-css');
    // 默認(rèn)任務(wù)
    grunt.registerTask('default', ['concat', 'cssmin']);
}; 