【问题标题】：Live reload using gulp使用 gulp 实时重新加载
【发布时间】：2016-02-15 22:00:17
【问题描述】：

我是 gulp 的新手。我正在使用 Angular js 创建应用程序。我已经在我的项目中集成了 gulp。我想在我的应用程序中集成实时重载。我在互联网上搜索了有关实时重载的信息，但找不到解决方案。我也使用 npm 成功安装了 live-reload。但我不知道如何在 gulp 文件中使用 live reload。这是我的 gulp 文件：

/*=============Minify html==============*/
var gulp = require('gulp'); 

// include plug-ins
var changed = require('gulp-changed');
var minifyHTML = require('gulp-minify-html');
var 
// minify new or changed HTML pages
gulp.task('minify-html', function() {
 var opts = {empty:true, quotes:true};
 var htmlPath = {htmlSrc:'./app/templates/*.html', htmlDest:'./appbuild/views'};

  return gulp.src(htmlPath.htmlSrc)
    .pipe(changed(htmlPath.htmlDest))
    .pipe(minifyHTML(opts))
    .pipe(gulp.dest(htmlPath.htmlDest));
});
/*=============Minify html==============*/


/*=============Minify CSs==============*/
var concat = require('gulp-concat');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var rename = require('gulp-rename');

// CSS concat, auto prefix, minify, then rename output file
gulp.task('minify-css', function() {
var cssPath = {cssSrc:['./app/css/*.css', '!*.min.css', '!/**/*.min.css'], cssDest:'./contentbuild/css/'};

  return gulp.src(cssPath.cssSrc)
    .pipe(concat('styles.css'))
    .pipe(autoprefix('last 2 versions'))
    .pipe(minifyCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(cssPath.cssDest));
});
/*=============Minify CSs==============*/

/*=============Minify JS==============*/
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');

// JS concat, strip debugging code and minify
gulp.task('bundle-scripts', function() {
var jsPath = {jsSrc:['./app/js/*.js','./app/**/*.js'], jsDest:'./appbuild'};
  gulp.src(jsPath.jsSrc)
    .pipe(concat('ngscripts.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(jsPath.jsDest));
});

/*=============Minify CSs==============*/
// default gulp task
gulp.task('default', ['minify-html', 'bundle-scripts', 'minify-css'], function() {
  // watch for HTML changes
  gulp.watch('./app/templates/*.html', ['minify-html']);
  // watch for JS changes
  gulp.watch('./app/js/**/*.js', ['bundle-scripts']);
  // watch for CSS changes
  gulp.watch('./app/css/*.css', ['minify-css']);
});

请帮忙。

【问题讨论】：

我建议使用 gulp-browser-sync
发球在哪里？基本上，在服务部分使用 connect-livereload 中间件，设置 gulp-livereload 服务脚本并使用 gulp-watch 调用 livereload over watch

标签： javascript angularjs node.js gulp

【解决方案1】：

使用gulp-connect 重新加载

我更喜欢 gulp-connect 来完成这项任务。查看必要的修改以在您的默认任务中启用 livereload：

/*=============Minify html==============*/
var gulp = require('gulp'); 
var connect = require('gulp-connect');
…
gulp.task('minify-html', function() {
  …
  return gulp.src(htmlPath.htmlSrc)
    …
    .pipe(connect.reload());
});
/*=============Minify html==============*/


/*=============Minify CSs==============*/
…
gulp.task('minify-css', function() {
  …
  return gulp.src(cssPath.cssSrc)
    …
    .pipe(connect.reload());
});
/*=============Minify CSs==============*/

/*=============Minify JS==============*/
…
gulp.task('bundle-scripts', function() {
…
  gulp.src(jsPath.jsSrc)
    …
    .pipe(connect.reload());
});

/*=============Livereload==============*/
gulp.task('connect', function() {
    connect.server({
        port: 8001,
        livereload: true
    });
});

/*=============Minify CSs==============*/
gulp.task('default', ['minify-html', 'bundle-scripts', 'minify-css', 'connect'], function() {
  …
});

【讨论】：