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

问题描述

我已经有了一大口人来配合Stylus，Jade和tiny-lr。我的问题是，当我保存一个jade文件时，它开始全部编译它们，因此，在我正在处理的文件当前编译之前，实时重新激活第一个文件复制到目标文件，导致我不得不手动刷新。我已经使用gulp-changed修复了这个问题，但我似乎无法配置它或其他东西。任何人有过这个问题吗？我发布了我的Gulp文件，以便您查看。

该问题的时间线图可以在这里找到：

任何帮助表示感谢！

 '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'）; 
 
 //定义源对象
 var sources = {
 jade：jade / ** / *。jade，
 partials：partials / ** / * .jade，
 stylus：styl / ** / *。styl，
 scripts：js / ** / *。js
}; 
 
 //定义目标对象
 
 var destinations = {
 html：dist /，
 css：dist / css，
 js：dist / js
}; 
 
 //编译并复制Jade 
 gulp.task（jade，function（event）{
 return gulp.src（sources.jade）
 .pipe （jade（{
 pretty：true 
}））。pipe（gulp.dest（destinations.html））; 
}）; 
 
编译并复制Stylus 
 gulp.task（stylus，function（event）{
 return gulp.src（sources.stylus）.pipe（stylus（{ 
使用：[nib（），jeet（）]，
导入：[
'nib'，
'jeet'
]，
风格： compressed
}））。pipe（gulp.dest（destinations.css））; 
}）; 
 
 //缩小和复制所有JavaScript 
 gulp.task（'scripts'，function（）{
 gulp.src（sources.scripts）
 .pipe uglify（））
 .pipe（gulp.dest（destinations.js））; 
}）; 
 
 //合并Bower文件并复制到/ dist / js / 
 // gulp.task（'bower-files'，function（）{
 // return gulp。 src（mainBowerFiles（/ * options * /），{}）
 // .pipe（gulp.dest（destinations.js））; 
 //}）; 
 
 //观察文件更改并执行任务
 gulp.task（watch，function（）{
 gulp.watch（sources.jade，[jade] ）; 
 gulp.watch（sources.partials，[ 玉]）; 
 gulp.watch（sources.stylus，[ 触笔]）; 
 gulp.watch（源。脚本，[脚本]）; 
 gulp.watch（'dist / ** / *'，刷新）; 
}）; 
 $ b // 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）; 
}）; 
 
 //定义默认任务
 gulp.task（default，[jade，stylus，scripts，serve，watch]）; 
 
 //刷新函数
 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]} 
}）; 
}; 
  

解决方案

我的gulpfile.js

我这样做是因为当我编译我的sass文件时，livereload将运行10次左右，这种方法只会运行一次。

$ b $ gulpfile.js

  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）; 
 
 //超时变量
 var timer = null; 
 
 //实际重载函数
函数stackReload（）{
 var reload_args =参数; 
 
 // Stop如果此函数在最后250ms 
内运行，则使用超时函数来运行livereload如果（定时器）clearTimeout（定时器）; 
 
 //检查是否有任何一饮而尽任务仍在运行
如果（！gulp.isRunning）{
定时器= setTimeout的（函数（）{
 $ .livereload。 changed.apply（null，reload_args）; 
}，250）; 
} 
} 
 
}）; 
  

I've got a gulp set up to work with Stylus, Jade and tiny-lr. My problem is that when I save one jade file, it start's compiling them all, therefore live reloading fires on the first file copied to the destination, before the file I am working on currently is compiled, resulting in me having to refresh manually. I have fixing this issue using "gulp-changed" but I don't seem to be able to configure it or something. Anyone had this problem before? I am posting my Gulp file so you can take a look.

A timeline diagram of the problem can be found here: https://www.dropbox.com/s/3g37oy25s9mq969/jade_compile_frefresh_problem.png?dl=0

Any help is appreciated!

    '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] }
      });
    };

解决方案

I have achieve this by writing a simple javascript function in my gulpfile.js

I did this because when I compile my sass files, livereload will run around 10 times, this method will make it only run once.

My gulpfile.js

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);
        }
    }

});

这篇关于在编译完所有文件后，我可以将gulp livereload设置为运行吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！