Livereload介紹，livereload

Livereload介紹，livereload

Livereload可理解為即時重新整理，在前端開發中，開發人員在編寫或調試html/js/css代碼後需要從編輯器切換到瀏覽器，再重新整理瀏覽器才能看到頁面變化，這種十分頻繁的操作在一定程度上影響了工作效率，而Liverelod可以協助我們ad解決了這個問題。

實現livereload有多種方式，可以藉助Livereload軟體加瀏覽器外掛程式實現，也可以藉助nodejs，通過gulp或者grunt這些task runner實現，但其基本原理都是一樣的，即通過在本地開啟一個websocket服務，檢測檔案變化，當檔案被修改後觸發livereload任務，推送訊息給瀏覽器重新整理頁面。

在眾多的實現方法中，相比nodejs代碼實現，使用其他軟體或瀏覽器外掛程式顯然沒有必要，這裡介紹gulp的實現方式，個人認為是比較簡單快捷的方式。

gulpjs 實現 livereload

首先需要安裝nodejs, 再安裝 gulp， gulp-connect 模組

  $ sudo npm install -g gulp //全域安裝gulp模組

切換到項目根目錄下

  $ mkdir ~/gulptest && cd ~/gulptest  $ npm init  $ npm install --save-dev gulp gulp-connect  $ touch gulpfile.js

在項目根目錄下需要有gulpfile.js這個檔案

var gulp = require('gulp'),  connect = require('gulp-connect');gulp.task('connect', function() {  connect.server({    root: 'app',    livereload: true  });});gulp.task('html', function () {  gulp.src('./app/*.html')    .pipe(connect.reload());});gulp.task('watch', function () {  gulp.watch(['./app/*.html'], ['html']);});gulp.task('default', ['connect', 'watch']);

建立gulpfile.js檔案後在根目錄下運行命令：

  $ gulp

即可看到本地啟動了web server和livereload server，現在開啟http://localhost:8080 編輯html檔案儲存後就可以看到瀏覽器自動重新整理。

使用yoeman generator產生已經整合livereload功能的項目腳手架

安裝yeoman和相應的generator(generator-gulpx)

  $ sudo npm install -g yo generator-gulpx

建立項目

  $ mkdir ~/yogulpx/ && cd ~/yogulpx  $ sudo yo gulpx  $ gulp

可以看到藉助yeoman generator可以很方便的構建項目，推薦使用

推薦觀看:
gulp入門 (一個15分鐘的介紹視頻)