gulp nodemon 不起作用答案

【问题标题】：gulp nodemon doesn't workgulp nodemon 不起作用
【发布时间】：2016-03-29 18:09:17
【问题描述】：

这是我的 gulpfile.js：

var gulp = require('gulp'),
  nodemon = require('gulp-nodemon'),
  plumber = require('gulp-plumber'),
  livereload = require('gulp-livereload');

gulp.task('develop', function () {
  livereload.listen();
  nodemon({
    script: 'app.js',
    ext: 'js ejs html coffee'
  }).on('restart',function() {
    console.log('Livereload reload...');
    livereload.reload();
  });  
});

gulp.task('default', [
  'develop'
]);

我的 app.js：

var express = require('express');

var app = express();

app.set('view engine','ejs');

app.get('/', function(req,res){
   res.send('Hello world!');
});

app.listen(8888, function() {
  console.log('Server started at 8888');
});

当我更改“Hello world！”时到“Hello world!!!!!”，我可以在控制台中看到以下内容：

它确实记录了我的更改。但是页面根本没有重新加载。我必须刷新浏览器才能看到更改。我的 gulpfile.js 有什么问题吗？任何想法？谢谢。

【问题讨论】：

标签： node.js gulp nodemon gulp-livereload

【解决方案1】：

我看到这个问题已经很老了，但无论如何，livereload 只有在你的浏览器支持的情况下才能工作。例如，对于 Chrome，您需要安装一个名为 LiveReload 的扩展程序。这将为您启用刷新页面（不要忘记启用它）。

另一种选择是使用BrowserSync。除了可以在 gulp 任务中使用的插件（无浏览器扩展）之外，它实际上不需要任何其他东西。这是一个例子（取自here）：

var gulp = require('gulp');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');
var BROWSER_SYNC_RELOAD_DELAY = 500;

gulp.task('nodemon', function (cb) {
var called = false;
  return nodemon({
    // nodemon our expressjs server
    script: 'app.js',

    // watch core server file(s) that require server restart on change
    watch: ['app.js']
  })
    .on('start', function onStart() {
      // ensure start only got called once
      if (!called) { cb(); }
      called = true;
    })
    .on('restart', function onRestart() {
      // reload connected browsers after a slight delay
      setTimeout(function reload() {
        browserSync.reload({
          stream: false
        });
      }, BROWSER_SYNC_RELOAD_DELAY);
    });
});

gulp.task('browser-sync', ['nodemon'], function () {

  // for more browser-sync config options: http://www.browsersync.io/docs/options/
  browserSync({

    // informs browser-sync to proxy our expressjs app which would run at the following location
    proxy: 'http://localhost:3000',

    // informs browser-sync to use the following port for the proxied app
    // notice that the default port is 3000, which would clash with our expressjs
    port: 4000,

    // open the proxied app in chrome
    browser: ['google-chrome']
  });
});

【讨论】：

【解决方案2】：

您的 nodemon 安装一切正常。您实际上必须刷新浏览器才能看到所做的更改。

如果您想为您完成这项工作，请查看 guard-livereload，地址为this website。

【讨论】：

gulp-livereload 已经在我的 gulpfile.js 中，但我仍然需要手动刷新页面。