Question

有一段时间我和Gulp和BrowserSync有一个非常奇怪的问题。每次我改变css（有时甚至是HTML）我意识到Gulp更新浏览器即使我没有保存也没有完成更改导致控制台错误每次我特别改变我的CSS文件而且HTML，我一直在工作现在有了这个gulp.js配置一段时间，但它已经慢慢地达到了一个不可能流利工作的地步。

当我正在我的style.scss文件上正确导入所有内容时，我也会偶尔但经常使用SASS导入错误。

使用/调用BrowserSync的方式可能就是我调用观看功能的那一刻？或者它只是与我正在使用的Gulp版本相关的错误。任何帮助将非常感激。

这是我当前的gulp.js文件：

var banner = [
  '/*!\n' +
  ' * <%= package.name %>\n' +
  ' * <%= package.title %>\n' +
  ' * <%= package.url %>\n' +
  ' * @author <%= package.author %>\n' +
  ' * @version <%= package.version %>\n' +
  ' * Copyright ' + new Date().getFullYear() + '. <%= package.license %> licensed.\n' +
  ' */',
  '\n'
].join('');
var config = {
  bowerDir: './bower_components'
};
gulp.task('bower', function () {
  return gulp.src(mainBowerFiles('**/*.png', {includeDev:true}), { base: config.bowerDir } )
  .pipe(bowerNormalize({ bowerJson: './bower.json'  }))
  .pipe(gulp.dest('app/assets/img'));
});
gulp.task('icons', function() {
    return gulp.src(config.bowerDir+'/font-awesome/fonts/**.*')
    .pipe(gulp.dest('app/assets/fonts'));
});
gulp.task('add-components', function() {
  return gulp.src([
    config.bowerDir+'/modernizr/bin/modernizr.js',
    config.bowerDir+'/jquery/dist/jquery.min.js',
    config.bowerDir+'/bootstrap-sass/assets/javascripts/bootstrap/button.js',
    config.bowerDir+'/bootstrap-sass/assets/javascripts/bootstrap/transition.js',         
    config.bowerDir+'/bootstrap-sass/assets/javascripts/bootstrap/carousel.js',
    config.bowerDir+'/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js',
  ])
  .pipe(concat('app.js'))    
  .pipe(gulp.dest('app/assets/js'));    
});
gulp.task('css', function () {
  var processors = [ autoprefixer, cssnext, precss, atImport, mqpacker, cssnano, fontmagician ];    
  return gulp.src('src/scss/style.scss')
  .pipe(sass({
    style: 'compressed',
    includePaths: [
      config.bowerDir + '/font-awesome/scss',
      config.bowerDir + '/bootstrap-sass/assets/stylesheets',
    ]  
  }))
  .pipe(postcss(processors))
  .pipe(gulp.dest('app/assets/css'))
  .pipe(cleanCSS())
  .pipe(rename({ suffix: '.min' }))
  .pipe(header(banner, { package : package }))
  .pipe(gulp.dest('app/assets/css'))
  .pipe(browserSync.reload({stream:true}));
});
gulp.task('js',function(){
  return gulp.src('src/js/scripts.js')
  .pipe(jshint('.jshintrc'))
  .pipe(jshint.reporter('default'))
  .pipe(header(banner, { package : package }))
  .pipe(gulp.dest('app/assets/js'))
  .pipe(uglify())
  .pipe(header(banner, { package : package }))
  .pipe(rename({ suffix: '.min' }))
  .pipe(gulp.dest('app/assets/js'))
  .pipe(browserSync.reload({stream:true, once: true}));
});
gulp.task('browser-sync', function() {
    browserSync.init(null, {
        server: {
            baseDir: "app"
        }
    });
});
gulp.task('bs-reload', function () {
    browserSync.reload();
});
gulp.task('default', ['bower','add-components','css','js', 'icons', 'browser-sync'], function () {
    gulp.watch("src/scss/*/*.scss", ['css']);
    gulp.watch("src/js/*.js", ['js']);
    gulp.watch("app/*.html", ['bs-reload']);
});

在更改完成之前，使用Gulp重新加载浏览器的BrowserSync

0 个答案: