使用grunt合併壓縮js css檔案

需要了解的知識：

1、nodejs的安裝與命令列使用
2、nodejs安裝應用
3、grunt的初步了解

本文已假定讀者已經熟悉以上知識。

好，我們繼續：

任務1：將src目錄下的所有zepto及外掛程式合併，並壓縮。

--src/

ajax.js
assets.js
callbacks.js
data.js
deferred.js
detect.js
event.js
form.js
fx.js
fx_methods.js
gesture.js
ie.js
ios3.js
selector.js
stack.js
touch.js
zepto.js

目錄結構：

dist/

node_modules/
src/
gruntfile.js
package.json

gruntfile.js是執行步驟程式

一、js合併壓縮

第一次需要先安裝grunt。執行 npm install -g grunt-cli 進行安裝。如果已經安裝，可以忽略。

1.package.json檔案

,

"dependencies": 
}

module.exports = function (grunt) ,

dist: 
},uglify: 
}});  grunt.loadnpmtasks('grunt-contrib-uglify');
grunt.loadnpmtasks('grunt-contrib-concat');
grunt.registertask('default', ['concat','uglify']);
}

執行步驟：

(2)執行合併壓縮： grunt

>grunt

running "concat:dist" (concat) task
file dist/built.js created.
running "uglify:build" (uglify) task
file "dist/built.min.js" created.
done, without errors.

built.js

built.min.js

二、對css進行合併壓縮

1、package.json同上；

2、gruntfile.js如下：

module.exports = function (grunt) 

},cssmin: 
}});grunt.loadnpmtasks('grunt-css');
grunt.loadnpmtasks('grunt-contrib-concat');
grunt.registertask('default', ['concat','cssmin']);
}

生成環境中grunt的壓縮使用

1.package.json dependencies devdependencies keywords kxll mweb author cheonghu license isc 2.gruntfile.js module.exports function grunt src pkg.mweb t...

使用Grunt和Bower壓縮靜態檔案

1 拷貝 將框架 angulr拷貝到d盤，例如 d angulr。刪除d angulr src資料夾下面的 將需要壓縮的靜態檔案到d angulr src下面。2 安裝node.js 請根據不同平台系統選擇需要的node.js安裝包。3 安裝grunt 開啟命令視窗cmd，進入d angulr資料夾...

前端js和css的壓縮合併之grunt

package.json放在根目錄 例如 c users 123 下，它包含了該項目的一些元資訊，如專案名稱 描述 版本號，外掛程式等。grunt contrib jshint js語法檢查 grunt contrib concat js合併 grunt contrib uglify 採用uglif...