grunt 單獨壓縮多個js和css文件

一，什麼是grunt，

grunt是一套前端自動化工具，一個基於nodeJs的命令行工具，一般用於：

① 壓縮文件

② 合併文件

③ 簡單語法檢查

對於其他用法，我還不太清楚，我們這裡簡單介紹下grunt的壓縮、合併文件

二，準備階段

1，nodejs環境

因為grunt是基於nodeJs的，所以首先各位需要安裝nodeJS環境

安裝nodejs。

安裝好之後檢查

打開cmd

輸入：node -v

輸出：v0.10.28(這個是我的版本)

三，安裝grunt

有了nodeJs環境後，我們便可以開始搞grunt了，因為我們可能在任何目錄下運行打包程序，所以我們需要安裝CLI官方推薦在全局安裝CLI（grunt的命令行介面）

輸入：npm install -g grunt-cli

這條命令將會把grunt命令植入系統路徑，這樣就能在任意目錄運行他，原因是

每次運行grunt時，它都會使用node的require查找本地是否安裝grunt，如果找到CLI便載入這個本地grunt庫然後應用我們項目中的GruntFile配置，並執行任務

ps這裡安裝好後一般在我們的C:UsersSOSAppDataRoaming
pm
ode_modules

會看到grunt-cli文件

四，添加package.json和Gruntfile.js文件

package.json

代碼如下：

{ "name": "test", "version": "0.1.0", "description": "test", "license": "MIT", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-uglify": "~0.2.1", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.5.0", "grunt-strip": "~0.2.1" }, "dependencies": { "express": "3.x" }}

Gruntfile.js

代碼如下：

module.exports = function (grunt) { // 構建任務配置 grunt.initConfig({ //讀取package.json的內容，形成個json數據 pkg: grunt.file.readJSON("package.json"), //壓縮js uglify: { //文件頭部輸出信息 options: { banner: "/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
" }, my_target: { files: [ { expand: true, //相對路徑 cwd: "js/", src: "*.js", dest: "dest/js/", rename: function (dest, src) { var folder = src.substring(0, src.lastIndexOf("/")); var filename = src.substring(src.lastIndexOf("/"), src.length); // var filename=src; filename = filename.substring(0, filename.lastIndexOf(".")); var fileresult=dest + folder + filename + ".min.js"; grunt.log.writeln("現處理文件："+src+" 處理後文件："+fileresult); return fileresult; //return filename + ".min.js"; } } ] } }, //壓縮css cssmin: { //文件頭部輸出信息 options: { banner: "/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
", //美化代碼 beautify: { //中文ascii化，非常有用！防止中文亂碼的神配置 ascii_only: true } }, my_target: { files: [ { expand: true, //相對路徑 cwd: "css/", src: "*.css", dest: "dest/css/", rename: function (dest, src) { var folder = src.substring(0, src.lastIndexOf("/")); var filename = src.substring(src.lastIndexOf("/"), src.length); // var filename=src; filename = filename.substring(0, filename.lastIndexOf(".")); var fileresult=dest + folder + filename + ".min.css"; grunt.log.writeln("現處理文件："+src+" 處理後文件："+fileresult); return fileresult; //return filename + ".min.js"; } } ] } } }); // 載入指定插件任務 grunt.loadNpmTasks("grunt-contrib-uglify"); grunt.loadNpmTasks("grunt-contrib-cssmin"); // 默認執行的任務 grunt.registerTask("default", ["uglify", "cssmin"]);};

這個裡面主要對js和css進行批量壓縮

會依賴grunt-contrib-uglify和grunt-contrib-cssmin這兩個插件

做好後，我們需要在我們的項目的根目錄下運行命令

輸入：npm install

會將相關的文件下載下來

這個時候我們的根目錄下就會多個文件名字叫node_modules

這一步我們就可以壓縮

進入根目錄輸入命令grunt回車就ok

這個時候如果輸出有報錯可能說：「grunt-contrib-cssmin」notfound

那我們要把grunt-contrib-cssmin插件下載下來

輸入命令：npm install grunt-contrib-cssmin

OK

這個時候如果輸出有報錯可能說：Fatal error :Unable to find local grunt

或者找不到grunt的錯誤

那我們可以重新安裝grunt

把C:UsersSOSAppDataRoaming
pm
ode_modules下面的grunt-cli文件刪除。。重新執行

npm install -g grunt-cli

那麼最後我們就只用輸入grunt回車

看到輸出的內容就知道OK不OK了

運行OK後，我們的目錄裡面多了一個文件dest裡面的有css和js文件都是多個文件單獨的壓縮

這就省了我們手動去逐一壓縮的苦惱了。

對於grunt是如何工作的深入理解就可以看grunt官網了