問(wèn)題描述

我已經(jīng)設(shè)置了一個(gè) gulp 來(lái)使用 Stylus、Jade 和 tiny-lr.我的問(wèn)題是，當(dāng)我保存一個(gè)玉文件時(shí)，它開(kāi)始編譯它們，因此在我當(dāng)前正在處理的文件被編譯之前，實(shí)時(shí)重新加載會(huì)在復(fù)制到目標(biāo)的第一個(gè)文件上觸發(fā)，導(dǎo)致我不得不手動(dòng)刷新.我已經(jīng)使用gulp-changed"解決了這個(gè)問(wèn)題，但我似乎無(wú)法配置它或其他東西.以前有人遇到過(guò)這個(gè)問(wèn)題嗎?我正在發(fā)布我的 Gulp 文件，以便您查看.

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.

可以在此處找到問(wèn)題的時(shí)間線(xiàn)圖:https:///www.dropbox.com/s/3g37oy25s9mq969/jade_compile_frefresh_problem.png?dl=0

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

感謝任何幫助！

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

推薦答案

我已經(jīng)通過(guò)在我的 gulpfile.js 中編寫(xiě)一個(gè)簡(jiǎn)單的 javascript 函數(shù)來(lái)實(shí)現(xiàn)這一點(diǎn)

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

我這樣做是因?yàn)楫?dāng)我編譯我的 sass 文件時(shí)，livereload 會(huì)運(yùn)行大約 10 次，這種方法會(huì)使其只運(yùn)行一次.

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

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

});

這篇關(guān)于我可以將 gulp livereload 設(shè)置為在所有文件編譯后運(yùn)行嗎?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！