Question

我正在尝试简化我的工作流程并包含模板。我安装了Nunjucks并尝试设置它，所以每当我保存对模板文件的更改时，gulp watch会触发nunjucks函数并刷新我的浏览器。（firefoxdeveloperedition）

它首先工作，但我的浏览器停止重新加载更改。每次我保存浏览器都会刷新，但不会出现更改。这是我的gulpfile（我删除了其他任务，但保留了要求，以便您可以看到我安装的模块）

/* Module Requirements */
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var imagemin = require('gulp-imagemin');
var nunjucksRender = require('gulp-nunjucks-render');
/* //Module Requirements */



//Compile sass into css
gulp.task('sass', function(){
  return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
    .pipe(sass()) // Converts Sass to CSS with gulp-sass
    .pipe(gulp.dest('app/css'))
    .pipe(browserSync.reload({
      stream: true
    }))    
});

gulp.task('nunjucks', function() {
  // Gets .html and .nunjucks files in pages
  return gulp.src('app/pages/**/*.+(html|nunjucks)')
  // Renders template with nunjucks
  .pipe(nunjucksRender({
      path: ['app/templates']
    }))
  // output files in app folder
  .pipe(gulp.dest('app'))
});


//Watch for changes in sass and html and update browser.
gulp.task('watch', ['browserSync', 'sass', 'nunjucks'], function (){
  gulp.watch('app/scss/**/*.scss', ['sass']); 
  gulp.watch('app/templates/**/*.+(html|nunjucks)', ['nunjucks']);  
  gulp.watch('app/*.html', browserSync.reload); 
  gulp.watch('app/js/**/*.js', browserSync.reload);   
  // Other watchers
});

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: 'app'
    },
    browser: ['firefoxdeveloperedition']
  })
})

我的代码错了吗？

编辑：经过一些更多的测试后，它实际上似乎与Firefox开发人员版本有关......

Gulp browsersync重新加载浏览器

0 个答案: