使用GruntJS構建Web程序之合并壓縮篇

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

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

有如下步驟：

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

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

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

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

復制代碼代碼如下:

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

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

查看根目錄，發(fā)現(xiàn)多了個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']);
}; 

四、執(zhí)行grunt任務
打開命令行，進入到項目根目錄，敲 grunt

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

至此，css合并壓縮完畢。

您可能感興趣的文章:

Node.js進行文件操作(讀取/寫入/修改/刪除)詳解
Node.js是一個神奇的東西，它可以讓JavaScript在服務器端運行，讓我們的很多前端程序員也能在后端大展身手了！本文就來講講如何在Node.js中進行文件操作：讀取、寫入、修改和刪除文件吧
2023-03-03
學習Node.js模塊機制
這篇文章主要為大家詳細介紹了Node.js模塊機制，一篇關于Node.js模塊機制的學習筆記，感興趣的小伙伴們可以參考一下
2016-10-10
從零開始學習Node.js系列教程四：多頁面實現(xiàn)的數(shù)學運算示例
這篇文章主要介紹了Node.js多頁面實現(xiàn)的數(shù)學運算,涉及nodejs請求響應、數(shù)值傳遞、運算等相關操作技巧,需要的朋友可以參考下
2017-04-04
Node.js的Koa實現(xiàn)JWT用戶認證方法
本篇文章主要介紹了Node.js的Koa實現(xiàn)JWT用戶認證方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
NodeJs Express中間件使用流程解析
Express中間件本質上就是一個function處理函數(shù)，多個中間件之間，共享同一份req和res，我們就可以在上游的中間件中統(tǒng)一為req或者res對象添加自定義的屬性或方法，供下游的中間件或路由進行使用,非常方便
2023-01-01
Nodejs+express+ejs簡單使用實例代碼
本篇文章主要介紹了Nodejs+express+ejs簡單使用實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
Nodejs進程管理模塊forever詳解
服務器管理是系統(tǒng)上線后，必須要面對的問題。最好有一個軟件可以提供整套的服務器運行解決方案：要求運行穩(wěn)定，支持高并發(fā)，啟動/停止命令簡單，支持熱部署，宕機重啟，監(jiān)控界面和日志，集群環(huán)境。
2014-06-06
解決node.js中bcrypt遇到的安裝問題
這篇文章主要介紹了解決node.js中bcrypt遇到的安裝問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
windows如何把已安裝的nodejs高版本降級為低版本(圖文教程)
這篇文章主要介紹了windows如何把已安裝的nodejs高版本降級為低版本,本文分步驟通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-12-12
nodejs提示：cross-device link not permitted, rename錯誤的解決方法
這篇文章主要給大家介紹了關于nodejs提示：cross-device link not permitted, rename錯誤的解決方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用nodejs具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-06-06