[node.js] 快快樂樂學node.js (二) 如何設定自動重啟

先前有說到如果你沒有用任何套件的話，
基本上修改程式過程是很麻煩的，
因此要裝一些套件來達到這件事，
而且一個完整的範例，要包含前後端，
早期有一些grunt套件，目前個人則偏愛用gulp相關套件:D

Gulp安裝

npm install -g gulp

gulp-nodemon與gulp-livereload套件安裝

https://www.npmjs.com/package/gulp-nodemon =>負責後端重啟
https://www.npmjs.com/package/gulp-livereload => 負責前端refresh，需要套配chrome的livereload外掛

安裝語法如下：

$>npm install --save-dev gulp-nodemon

$>npm install --save-dev gulp-livereload

gulpfile.js配置

專案目錄下要新增一個gulpfile.js配置檔，
寫入以下設定

'use strict';  
  
//引入 gulp 和 nodemon livereload 插件  
var gulp       = require('gulp');  
var nodemon    = require('gulp-nodemon');  
var livereload = require('gulp-livereload')

// 一些文件的路径  
var paths = {  
    client: [  
    'public/javascripts/**/*.js',  
    'public/stylesheets/**/*.css'  
    ],  
    server: {  
        index: 'app.js'  
    }  
};  
  
// nodemon 的配置  
var nodemonConfig = {  
    script : paths.server.index,  
    ignore : [  
        "tmp/**",  
        "public/**",  
        "views/**"  
    ],  
    env    : {  
        "NODE_ENV": "development"  
    }  
};  

gulp.task('browser-sync', ['nodemon'], function() {
 browserSync.init(null, {
  proxy: "http://localhost:5000",
        files: ["public/**/*.*"],
        browser: "google chrome",
        port: 7000,
 });
});

// 使用nodemone run server 
gulp.task('nodemon', ['livereload'], function(cb) {

 var started = false;

    return nodemon(nodemonConfig).on('start', function () {
  // to avoid nodemon being started multiple times
  // thanks @matthisk
  if (!started) {
   cb();
   started = true; 
  } 
 });;  
});  
  
// live reload監聽 
gulp.task('livereload', function() { 

    livereload.listen();  
    // var server = livereload();  

    return gulp.watch(
     paths.client, function(event) {  
      console.log('變動的路徑: '+ event.path)
      // server.changed(event.path);
      livereload.changed(event.path);
      

    });  
});  
  

// 我們可以建立一個預設任務，當只輸入 $>gulp 指令時執行的任務
gulp.task('default',['nodemon'],function(){
 console.log('run default');

});

安裝Livereload Chrome 套件

https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=zh-TW

安裝完成點擊工具列上的icon即可，實心表示啟動中

Gulp啟動

接著在專案cmd路徑下執行，之後就可以看到console有印變動的檔案了

$>sudo gulp

注意app.js要加入app.listen(3000)，才有辦法用!!

參考

https://www.kancloud.cn/revin/nodejs/179512
http://unremittingly.iteye.com/blog/2153932
https://kejyuntw.gitbooks.io/gulp-learning-notes/plguins/Tool/Plugins-Tool-gulp-livereload.html