Fatal编程技术网
  • javascript/
  • Javascript 我可以将gulp livereload设置为在编译所有文件后运行吗？

Javascript 我可以将gulp livereload设置为在编译所有文件后运行吗？

javascript gulp

Javascript 我可以将gulp livereload设置为在编译所有文件后运行吗？,javascript,pug,gulp,stylus,Javascript,Pug,Gulp,Stylus,我已经准备好用手写笔、翡翠和小lr工作了。我的问题是，当我保存一个jade文件时，它开始编译所有文件，因此在编译当前正在处理的文件之前，对复制到目标的第一个文件进行实时重新加载，导致我必须手动刷新。我已经用“gulp changed”解决了这个问题，但我似乎无法配置它或其他东西。以前有人有过这个问题吗？我正在发布我的吞咽文件，以便您可以查看 可在此处找到问题的时间线图： 感谢您的帮助 'use strict'; var gulp = require('gulp'); v

我已经准备好用手写笔、翡翠和小lr工作了。我的问题是，当我保存一个jade文件时，它开始编译所有文件，因此在编译当前正在处理的文件之前，对复制到目标的第一个文件进行实时重新加载，导致我必须手动刷新。我已经用“gulp changed”解决了这个问题，但我似乎无法配置它或其他东西。以前有人有过这个问题吗？我正在发布我的吞咽文件，以便您可以查看

可在此处找到问题的时间线图：

感谢您的帮助

    '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 lr = require('tiny-lr')();
    // var mainBowerFiles = require('main-bower-files');

    // Define sources object
    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));
    });

    // Consolidate Bower Files and copy to /dist/js/
    // gulp.task('bower-files', function() {
    //   return gulp.src(mainBowerFiles(/* options */), {})
    //     .pipe(gulp.dest(destinations.js));
    // });

    // Watch for file changes and execute tasks
    gulp.task("watch", function() {
      gulp.watch(sources.jade, ["jade"]);
      gulp.watch(sources.partials, ["jade"]);
      gulp.watch(sources.stylus, ["stylus"]);
      gulp.watch(sources.scripts, ["scripts"]);
      gulp.watch('dist/**/*', refresh);
    });

    // Live Reload
    gulp.task('serve', 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');
      lr.listen(35729);
    });

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

    // Refresh function
    var refresh = function(event) {
      var fileName = require('path').relative(__dirname, event.path);
      gutil.log.apply(gutil, [gutil.colors.magenta(fileName), gutil.colors.cyan('built')]);
      lr.changed({
        body: { files: [fileName] }
      });
    };
您可以使用并编写自己的回调函数，以便在需要时发送重新加载事件：

var livereload = require('gulp-livereload'),
    path = require('path');

module.exports = function(gulp) {
    gulp.task('watch', function() {
        livereload.listen();
        gulp.watch([
            path.resolve(__dirname, '../src/**/*.js'),
            path.resolve(__dirname, '../index.html')
        ]).on('change', function(event) {
            livereload.changed();
            console.log('File', event.path, 'was', event.type);
            console.log('LiveReload is triggered');
        });
    });
};
UPD:因此，对于您的情况，您可以这样做：

1） 安装
gulplivereload
：

npm install gulp-livereload --save-dev
2） 在
gulpfile.js中包含
gulplivereload


var livereload = require('gulp-livereload');



gulp.task('watch', function() {
    $.livereload.listen();

    gulp.watch([
        path.join(config.path.app, 'media/js/**/*.js'),
        path.join(config.path.app, 'media/css/**/*.css'),
        path.join(config.path.app, 'templates/**/*.html')
    ]).on('change', stackReload);

    // a timeout variable
    var timer = null;

    // actual reload function
    function stackReload() {
        var reload_args = arguments;

        // Stop timeout function to run livereload if this function is ran within the last 250ms
        if (timer) clearTimeout(timer);

        // Check if any gulp task is still running
        if (!gulp.isRunning) {
            timer = setTimeout(function() {
                $.livereload.changed.apply(null, reload_args);
            }, 250);
        }
    }

});


3） 用
watch
task替换旧代码，我的意思是：


// Watch for file changes and execute tasks
gulp.task("watch", function() {
  gulp.watch(sources.jade, ["jade"]);
  gulp.watch(sources.partials, ["jade"]);
  gulp.watch(sources.stylus, ["stylus"]);
  gulp.watch(sources.scripts, ["scripts"]);
  gulp.watch('dist/**/*', refresh);
});


并将其替换为新代码：


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



4） 当然，请检查此配置是否符合您的要求。
我已经完成了。我要做的是创建一个名为“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"]);



我通过在gulpfile.js中编写一个简单的javascript函数来实现这一点

我这样做是因为当我编译我的sass文件时，livereload将运行大约10次，这个方法将使它只运行一次

My
gulpfile.js


var livereload = require('gulp-livereload');



gulp.task('watch', function() {
    $.livereload.listen();

    gulp.watch([
        path.join(config.path.app, 'media/js/**/*.js'),
        path.join(config.path.app, 'media/css/**/*.css'),
        path.join(config.path.app, 'templates/**/*.html')
    ]).on('change', stackReload);

    // a timeout variable
    var timer = null;

    // actual reload function
    function stackReload() {
        var reload_args = arguments;

        // Stop timeout function to run livereload if this function is ran within the last 250ms
        if (timer) clearTimeout(timer);

        // Check if any gulp task is still running
        if (!gulp.isRunning) {
            timer = setTimeout(function() {
                $.livereload.changed.apply(null, reload_args);
            }, 250);
        }
    }

});



我在编译typescript然后使用livereload刷新时遇到了类似的问题。为了解决这个问题，我创建了“监视任务”，在工作完成后运行刷新任务

下面是从您的问题中提取的一个最小代码示例，其中包含我使用的模式：


'use strict';

var gulp = require('gulp');
var jade = require('gulp-jade');
var livereload = require('gulp-livereload');

var sources = {
  jade: "jade/**/*.jade"
};

var destinations = {
  html: "dist/"
};

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

gulp.task('refresh', function() { return livereload.reload(); });

// execute task, then when finished, refresh
gulp.task("watch-jade", ["jade"], function() { return gulp.start('refresh'); });

gulp.task("watch", function() {  
  livereload.listen();
  gulp.watch(sources.jade, ["watch-jade"]);
});



你能帮我把这个逻辑整合到我当前的设置中吗？我对JS不是很在行：（我现在看得更清楚了。但是如果我按照你给我看的方式替换它，Gulp将在文件更改时停止触发相应的任务，这意味着它不会编译Jade和Stylus文件。我将尝试将我的内容与你提供的代码结合起来。我将写一篇文章，说明它是否有效！）实际上，当我更仔细地观察它时，它似乎与我的旧配置做了相同的事情——这意味着它会在第一个更改的文件上刷新。问题是，我有大约10个jade文件，当我保存其中一个时，它会编译所有文件。因此，“更改”事件会在复制到目标文件夹的第一个文件上触发并刷新在我在浏览器中查看的文件被编译之前，我将尝试制作一个图表并发布它，以便问题清楚。在描述中添加了一个图表，我希望这能澄清问题：）Gulp基于streams，因此实际上，您可以为其设置依赖项任务。我认为，这是解决此问题的唯一方法。根据文档，
调用此函数（livereload已更改）如果没有路径，则什么也做不到。
您发现了不同的情况？gulp.isRunning的文档在哪里？我在gulp API中找不到它的任何其他用途。参数是什么。当您说：var reload_args=arguments时，不建议像这一个那样链接外部文件，以防链接失效。