使用GruntJS構建Web程序 (3)

前一篇講述了如何使用concat和uglify命令實現JavaScript資源的合並，壓縮。這篇講述下css資源的合並和壓縮。

有如下步驟：

1. 新建項目Bejs
2. 新建文件package.json
3. 新建文件Gruntfile.js
4. 命令行執行grunt任務

 

一、新建項目Bejs

源碼放在src下，該目錄有兩個子目錄asset和js。js下放selector.js和ajax.js，這在上一篇已經講了如何合並壓縮它們。這篇只關注asset目錄，asset目錄下放了一些圖片和css文件。一會會把兩個css資源reset.css和style.css合並，壓縮到dest/asset目錄。一個合並版本all.css，一個壓縮版本all-min.css。

 

二、新建package.json

package.json放在根目錄下，它的意義上一篇已經介紹過了。 現在的項目結構如下

package.json內容需符合JSON語法規范，如下

{
  "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上一篇已經介紹過了，grunt-css 是這篇要使用的插件。

此時，打開命令行工具進入到項目根目錄，敲如下命令: npm install

查看根目錄，發現多了個node_modules目錄，包含了四個子目錄，見圖

 

三、新建文件Gruntfile.js

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

源碼如下

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插件，分別對於合並和壓縮
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-css');
	// 默認任務
	grunt.registerTask('default', ['concat', 'cssmin']);
}; 

 

四、執行grunt任務

打開命令行，進入到項目根目錄，敲 grunt

從打印信息看出成功的合並和壓縮並生成了dest目錄及期望的文件，這時的項目目錄下多了dest，如下

 

至此，css合並壓縮完畢。

 

BeJS

另cssmin也不錯