Nodejs的Gruntjs使用一則

Gruntjs是前端項目構建工具，基於nodejs命令。有些js項目是基於Gruntjs構建的，如Jquery。

Gruntjs主要功能有：

1.合併文件。

2.壓縮html,js,css,圖片文件。

3.語法檢測。

4.單元測試。

5.watch功能。

本文主要介紹watch配合chrome瀏覽器插件LiveReload實現網頁自動刷新功能。

Nodejs安裝

下載nodejs，官網地址 http://nodejs.org/ 下載最新版本按照提示下一步安裝便可。

Gruntjs的安裝

Gruntjs是基於Nodejs的，安裝前要保證Nodejs環境成功安裝，每一個Gruntjs都包括兩個文件：

1.package.json:依賴模塊和用到的變量說明等，如：version,name。

2.Gruntfile.js:node module寫法的任務管理文件。

package.json

例如個人package.json內容以下：

{
"name": "mitunes",
"version": "1.0.0",
"description": "mitunes",
"devDependencies": {
  "grunt-shell": "~0.2.2",
  "grunt-contrib-watch": "~0.4.4"
  }
}

若是安裝了新的插件，那麼這個package.json會自動更新的，或者修改它而後執行npm install，也能夠安裝對應的插件。

Gruntfile.js

Gruntfile.js是node module格式的任務管理文件，以下：

module.exports = function(grunt) {
grunt.initConfig({
watch: {
  files: ['../*.html','../js/*.js','../css/*.css'],
  options: {
    livereload: true
  }
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
};

運行Grunt

1.任意新建一個文件夾，例如：

D:\work\nodejs，新建的nodejs文件夾而後添加package.json和Gruntfile.js文件

2.打開cmd進入到nodejs文件夾，運行 npm install命令，例如：

此時文件夾下多出一個文件夾node_modules。

3.輸入命令grunt wacth，例如：

安裝chrome瀏覽器插件LiveReload

例如：

完成

chrome打開你的網站使你的網站引用的靜態文件指向Gruntfile.js中watch的文件或目錄，開啓liveReload插件，此時修改你的網站靜態文件看到chrome自動刷新。

如何修改網站靜態文件指向本地，參考：Fiddler的簡單使用