簡單地說，livereload做了這麼一件事情：監測網頁檔案的變化，自動重新整理瀏覽器，實時呈現效果。 

這裡要在瀏覽器上安裝相應外掛，我在chrome上安裝的是 LiveReload 2.1.0

注意：

livereload外掛啟動時，中心的原點是實心的！當你發現原點是空心的時候，手動點選開啟~

四、gulp 
gulp大有取代grunt之勢。

它的理念就是--“用自動化構建工具增強你的工作流程！”

我們這裡來利用它實現一些自動化任務：

1、監測帶sass檔案修改後，自動編譯sass，重新整理瀏覽器;

2、檢測到html檔案發生變化，重新整理瀏覽器

----------------------分隔線------------------------------------

上面是一些簡單的介紹，下面開始怎麼構建專案
五、實施教程 

1）環境要求：
1、安裝nodejs 
2、安裝ruby 

步驟：
1、新建專案

這裡簡單地新建一個資料夾，後面我們手動安裝包，新增配置檔案。

2、初始化package.json配置檔案：

命令列中輸入：

npm init

輸入這個命令後，會提示你輸入專案名稱、版本號、等等資訊，按照提示輸入即可。

輸入完成後，根目錄下會生成package.json檔案，開啟可以看到類似下面的程式碼：

{
  "name": "testgulp-demo",
  "version": "1.0.0",
  "description": "test gulp build tools",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "wanghao",
  "license": "ISC"
}
 

現在這裡面並沒有我們需要關心的東西，接著往下走：

3、安裝npm包

安裝我們專案需要的一些外掛：

命令列中執行下面命令：

npm install gulp gulp-ruby-sass  connect-livereload gulp-connect --save-dev

安裝完成之後，專案根目錄下會生成node_modules資料夾，這裡存放著剛剛安裝的外掛。
同時開啟package.json檔案，我們會發現多了devDependencies欄位，理解為開發過程中需要的包。（注：npm install 命令後面附上--save-dev會將新安裝的包新增到devDependencies裡面）

  "devDependencies": {
    "connect-livereload": "^0.5.4",
    "gulp": "^3.9.1",
    "gulp-connect": "^3.2.2",
    "gulp-ruby-sass": "^2.0.6"
  }

配置包管理的一個好處就是，在將程式碼用在他處時，只需要拷貝出自己寫的原始檔和package.json即可，在新的專案裡面執行npm init(後面不加引數)，npm包管理系統會根據package.json的配置自動安裝所需包。

4、新建一些資料夾，管理程式碼

我在根目錄下面新建了public資料夾存放前端程式碼；

public下面新建sass、stylesheets資料夾分別存放sass檔案和編譯後的css檔案

所以現在專案根目錄是這樣的：

public資料夾：

5、編寫gulpfile.js

在專案的根目錄下執行gulp命令，系統執行gulpfile.js的內容：

下面直接附上我寫好的：

var gulp = require('gulp');
var connect = require('gulp-connect');
var sass = require('gulp-ruby-sass');

//建立watch任務去檢測html檔案,其定義了當html改動之後，去呼叫一個Gulp的Task
gulp.task('watch', function() {
    gulp.watch(['./public/*.html'], ['html']);
    gulp.watch(['./public/sass/*.scss'], ['sass']);
  
});

gulp.task('connect', function() {
    connect.server({
        root: 'public',
        livereload: true
    });
});
 
gulp.task('sass', function() {
  return sass('./public/sass/*.scss', { style: 'expanded' })
    .pipe(gulp.dest('./public/stylesheets'))
    .pipe(connect.reload())
});
gulp.task('html', function() {
    gulp.src('./public/*.html')
        .pipe(connect.reload())


});


//執行Gulp時，預設的Task
gulp.task('default', ['connect', 'sass','watch']);

當然大家也可以根據自己的實際業務需求自己編寫gulpfile 這裡不對gulp的配置方法做說明，大家可以去網上查詢相關教程。

以上，所有的專案初始化工作已經完成！！！

--------------------------------------------------------------------------------------------

下面給出接著編寫程式碼的例項，測試一下專案的構建是否成功。

大家感受一下這種配置的妙處！

 1、在public資料夾下面新建index.html

記得使用zen coding

html:5

Tab後，生成了一份標準的html5模板。

2、開啟終端，切換到專案根目錄下面：

gulp

這個命令後面不用跟任何引數，預設執行default任務。
當出現如下輸出時，gulp啟動成功····

在瀏覽器中輸入