使用GruntJS構(gòu)建Web程序之合并壓縮篇
有如下步驟：
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)介紹過了。 現(xiàn)在的項(xiàng)目結(jié)構(gòu)如下
package.json內(nèi)容需符合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 是這篇要使用的插件。
此時(shí)，打開命令行工具進(jìn)入到項(xiàng)目根目錄，敲如下命令: npm install
查看根目錄，發(fā)現(xiàn)多了個(gè)node_modules目錄，包含了四個(gè)子目錄，見圖
三、新建文件Gruntfile.js
Gruntfile.js也是放在項(xiàng)目根目錄下，幾乎所有的任務(wù)都定義在該文件中，它就是一個(gè)普通的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插件，分別對(duì)于合并和壓縮
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-css');
// 默認(rèn)任務(wù)
grunt.registerTask('default', ['concat', 'cssmin']);
};
四、執(zhí)行g(shù)runt任務(wù)
打開命令行，進(jìn)入到項(xiàng)目根目錄，敲 grunt
從打印信息看出成功的合并和壓縮并生成了dest目錄及期望的文件，這時(shí)的項(xiàng)目目錄下多了dest，如下
至此，css合并壓縮完畢。
- Node.js的項(xiàng)目構(gòu)建工具Grunt的安裝與配置教程
- 使用基于Node.js的構(gòu)建工具Grunt來發(fā)布ASP.NET MVC項(xiàng)目
- 學(xué)習(xí)使用grunt來打包JavaScript和CSS程序的教程
- 配置Grunt的Task時(shí)通配符支持和動(dòng)態(tài)生成文件名問題
- Grunt入門教程(自動(dòng)任務(wù)運(yùn)行器)
- 詳解Grunt插件之LiveReload實(shí)現(xiàn)頁面自動(dòng)刷新（兩種方案）
- 使用GruntJS構(gòu)建Web程序之Tasks（任務(wù)）篇
- 使用GruntJS構(gòu)建Web程序之構(gòu)建篇
- 使用GruntJS構(gòu)建Web程序之安裝篇
- 使用GruntJS鏈接與壓縮多個(gè)JavaScript文件過程詳解
- 使用Grunt.js管理你項(xiàng)目的應(yīng)用說明
- 基于Node.js的JavaScript項(xiàng)目構(gòu)建工具gulp的使用教程
相關(guān)文章
Node.js進(jìn)行文件操作(讀取/寫入/修改/刪除)詳解
Node.js是一個(gè)神奇的東西，它可以讓JavaScript在服務(wù)器端運(yùn)行，讓我們的很多前端程序員也能在后端大展身手了！本文就來講講如何在Node.js中進(jìn)行文件操作：讀取、寫入、修改和刪除文件吧2023-03-03
這篇文章主要為大家詳細(xì)介紹了Node.js模塊機(jī)制，一篇關(guān)于Node.js模塊機(jī)制的學(xué)習(xí)筆記，感興趣的小伙伴們可以參考一下2016-10-10
從零開始學(xué)習(xí)Node.js系列教程四：多頁面實(shí)現(xiàn)的數(shù)學(xué)運(yùn)算示例
這篇文章主要介紹了Node.js多頁面實(shí)現(xiàn)的數(shù)學(xué)運(yùn)算,涉及nodejs請(qǐng)求響應(yīng)、數(shù)值傳遞、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
Node.js的Koa實(shí)現(xiàn)JWT用戶認(rèn)證方法
本篇文章主要介紹了Node.js的Koa實(shí)現(xiàn)JWT用戶認(rèn)證方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Express中間件本質(zhì)上就是一個(gè)function處理函數(shù)，多個(gè)中間件之間，共享同一份req和res，我們就可以在上游的中間件中統(tǒng)一為req或者res對(duì)象添加自定義的屬性或方法，供下游的中間件或路由進(jìn)行使用,非常方便2023-01-01
Nodejs+express+ejs簡單使用實(shí)例代碼
本篇文章主要介紹了Nodejs+express+ejs簡單使用實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
服務(wù)器管理是系統(tǒng)上線后，必須要面對(duì)的問題。最好有一個(gè)軟件可以提供整套的服務(wù)器運(yùn)行解決方案：要求運(yùn)行穩(wěn)定，支持高并發(fā)，啟動(dòng)/停止命令簡單，支持熱部署，宕機(jī)重啟，監(jiān)控界面和日志，集群環(huán)境。2014-06-06
這篇文章主要介紹了解決node.js中bcrypt遇到的安裝問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
windows如何把已安裝的nodejs高版本降級(jí)為低版本(圖文教程)
這篇文章主要介紹了windows如何把已安裝的nodejs高版本降級(jí)為低版本,本文分步驟通過圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
nodejs提示：cross-device link not permitted, rename錯(cuò)誤的解決方法
這篇文章主要給大家介紹了關(guān)于nodejs提示：cross-device link not permitted, rename錯(cuò)誤的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用nodejs具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06