前端資源構建-Grunt環境搭建

前端資源構建-Grunt

隨着前端開發的複雜度愈來愈高，前端頁面動輒上幾十個js，十幾個html頁面。用戶打開一個頁面須要加載一堆的css，js，html文件，對於有大量用戶的web應用來講，既消耗服務帶寬，用戶加載速度也很受影響。特別是如今大量的移動端web應用涌現出來，頁面加載速度相當重要，因此對前端資源作壓縮是必須作的工做。grunt就是nodejs平臺上一個很是優秀的前端構建工具。他能夠拼接、醜化、壓縮前端資源，大大提高頁面訪問速度

下面簡要介紹grunt構建環境在windows平臺的搭建過程。

1. install nodejs

nodejs for windows download address

2. install npm

open nodejs cmd window

 

npm install -g grunt-cli

　

3. 建立grunt依賴文件

package.json

 

{
  "name": "www",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "geekchow",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-copy": "^0.8.1",
    "grunt-contrib-cssmin": "^0.14.0",
    "grunt-contrib-jshint": "^0.11.2",
    "grunt-contrib-requirejs": "^0.4.4",
    "grunt-contrib-uglify": "^0.9.2",
    "grunt-css": "latest",
    "grunt-filerev": "latest",
    "grunt-strip": "^0.2.1",
    "grunt-usemin": "latest"
  }
}

　　

 

此json文件中記錄了grunt構建過程當中須要使用的包，放置在網站根目錄

4. 安裝構建依賴包

命令行去到網站目錄，運行以下命令,安裝全部的依賴包。

 

npm install

 

安裝完後發現網站目錄下多了一個叫 node_modules的目錄，裏面放着package.json中所引用的js包。

5. 建立構建文件Gruntfile.js

前端工程構建一把包括如下幾個操做。

1. concat:合併js文件，減小js文件數量。
2. uglify:js、html文件去空白，js作變量混淆。
3. clean: 清除構建過程當中產生的中間文件。
4. copy:拷貝文件，通常發佈目錄和開發目錄是分開的，copy操做能夠將文件從開發目錄
5. usemin:在js作完合併後，自動使用合而且混淆過的js替換原有引用。
6. cssmin:樣式文件去空白。

示例Gruntfile.js文件：

6.構建代碼

在nodejs命令窗口下運行以下代碼，執行構建任務

 

grunt task-name

　　

 

GRUNTJS壓縮前端構建