编译好所有文件后的Gulp Livereload？

Question

我有一个问题，我认为可能对很多人来说很常见，但似乎我不对。 所以我希望有人可以提供帮助，因为我无法在Gulp文件中找到答案。

现在我的gulpfile.js有以下内容：

'use strict';

var gulp = require('gulp');
var jade = require('gulp-jade');
var gutil = require('gulp-util');
var stylus = require('gulp-stylus');
var jeet = require('jeet');
var nib = require('nib');
var uglify = require('gulp-uglify');
var livereload = require('gulp-livereload');

var sources = {
  jade: "jade/**/*.jade",
  partials: "partials/**/*.jade",
  stylus: "styl/**/*.styl",
  scripts: "js/**/*.js"
};

// Define destinations object

var destinations = {
  html: "dist/",
  css: "dist/css",
  js: "dist/js"
};

// Compile and copy Jade
gulp.task("jade", function(event) {
  return gulp.src(sources.jade)
  .pipe(jade({pretty: true}))
  .pipe(gulp.dest(destinations.html))
});

// Compile and copy Stylus
gulp.task("stylus", function(event) {
  return gulp.src(sources.stylus).pipe(stylus({
    use: [nib(), jeet()],
    import: [
      'nib',
      'jeet'
    ],
    style: "compressed"
  })).pipe(gulp.dest(destinations.css));
});

// Minify and copy all JavaScript
gulp.task('scripts', function() {
  gulp.src(sources.scripts)
    .pipe(uglify())
    .pipe(gulp.dest(destinations.js));
});

// Server
gulp.task('server', function () {
  var express = require('express');
  var app = express();
  app.use(require('connect-livereload')());
  app.use(express.static(__dirname+'/dist/'));
  app.listen(4000, '0.0.0.0');
});

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch(sources.jade, ["jade"]);
  gulp.watch(sources.partials, ["jade"]);
  gulp.watch(sources.stylus, ["stylus"]);
  gulp.watch(sources.scripts, ["scripts"]);
});

// Define default task
gulp.task("default", ["jade", "stylus", "scripts", "server", "watch"], function(){
  gulp.watch([
    sources.jade,
    sources.partials,
    sources.stylus,
    sources.scripts,
  ]).on('change', function(event) {
    livereload.changed();
    console.log('File', event.path, 'was', event.type);
    console.log('LiveReload is triggered');
  });
});

会发生什么是我有超过1个玉文件。 当我按照字母顺序工作时 - 比如说 - 按照字母顺序排列第10个，然后我更改它，我立即执行livereload。 问题是它在所有jade文件完成编译并被复制到目标之前重新加载浏览器选项卡，因此我正在处理的文件甚至在刷新时都没有编译。 有没有办法在任务完成后链接重新加载？

Answer 1

您必须通知livereload更改。 在您的任务中，您必须在管道末尾添加livereload选项。

例如在玉器任务中：

gulp.task("jade", function(event) {
  return gulp.src(sources.jade)
  .pipe(jade({pretty: true}))
  .pipe(gulp.dest(destinations.html))
  .pipe(livereload());
});

我不在你的Gulpfile中尝试这个代码，但我认为它有效。

问候。

Answer 2

我已经做了。 我要做的是创建一个名为“Reload”的新任务，将依赖项放在其上并在每个其他任务之后运行它。 这是新的Gulpfile“：

'使用严格';

var gulp = require('gulp');
var jade = require('gulp-jade');
var gutil = require('gulp-util');
var stylus = require('gulp-stylus');
var jeet = require('jeet');
var nib = require('nib');
var uglify = require('gulp-uglify');
var livereload = require('gulp-livereload');

var sources = {
  jade: "jade/**/*.jade",
  partials: "partials/**/*.jade",
  stylus: "styl/**/*.styl",
  scripts: "js/**/*.js"
};

// Define destinations object
var destinations = {
  html: "dist/",
  css: "dist/css",
  js: "dist/js"
};

// Compile and copy Jade
gulp.task("jade", function(event) {
  return gulp.src(sources.jade)
  .pipe(jade({pretty: true}))
  .pipe(gulp.dest(destinations.html))
});

// Compile and copy Stylus
gulp.task("stylus", function(event) {
  return gulp.src(sources.stylus).pipe(stylus({
    use: [nib(), jeet()],
    import: [
      'nib',
      'jeet'
    ],
    style: "compressed"
  })).pipe(gulp.dest(destinations.css));
});

// Minify and copy all JavaScript
gulp.task('scripts', function() {
  gulp.src(sources.scripts)
    .pipe(uglify())
    .pipe(gulp.dest(destinations.js));
});

// Server
gulp.task('server', function () {
  var express = require('express');
  var app = express();
  app.use(require('connect-livereload')());
  app.use(express.static(__dirname+'/dist/'));
  app.listen(4000, '0.0.0.0');
});

// Watch sources for change, executa tasks
gulp.task('watch', function() {
  livereload.listen();
  gulp.watch(sources.jade, ["jade", "refresh"]);
  gulp.watch(sources.partials, ["jade", "refresh"]);
  gulp.watch(sources.stylus, ["stylus", "refresh"]);
  gulp.watch(sources.scripts, ["scripts", "refresh"]);
});

// Refresh task. Depends on Jade task completion
gulp.task("refresh", ["jade"], function(){
  livereload.changed();
  console.log('LiveReload is triggered');
});

// Define default task
gulp.task("default", ["jade", "stylus", "scripts", "server", "watch"]);