coServ 開發小幫手使用 gulp 實踐 Live Reload

coServ + gulp 實踐 Live Reload

本篇參考 youTobe by Ben Lue

開始之前

install Tools

gulp

1
npm install gulp

browser-sync

1
sudo npm install browser-sync

以上完成後在 coServ 資料夾中產生 gulpfile.js 內容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var  browserSync = require('browser-sync'),
     gulp = require('gulp'),
     config = require('./lib/server/config.js'),
     coServ = require('./coServ');
// deal with the www path
var  reload = browserSync.reload,
     wwwPath = config.getWWW();
gulp.task('default', function() {
    browserSync({
        proxy: '127.0.0.1:8080'
    });
    gulp.watch(['./**/*.html', './**/*.css', './**/*.js', './**/*.inc', './**/*.lang'],
        {cwd: wwwPath}, reload);
    gulp.watch(['./themes/*/blocks/modules/**/*.js'], {cwd: wwwPath}, function(e) {
        coServ.restart();
    });
});

最後原本啟動 server 命令為：

1
node coserv

現在有了 gulp 的幫忙直接啟動它，就會幫我們開啟網頁與監聽檔案變動，即時的幫你更新網頁修改畫面！

1
gulp

gulp issue 參考

Command Line : gulp 發生以下回應：

1
command not found: gulp

將 gulp 改全域安裝的方式，以下：

1
2
npm install --global gulp
npm install