Question

我想为我的项目使用相同的gulpfile.js，我在纯css中使用预编译器（sass）和来处理较旧/较小的项目。我也使用浏览器同步，我想注入 css到浏览器中（不重新加载整个页面）。

我的以下配置有效，即当我编辑sass文件时，它编译并注入已编译的css，当我编辑css文件时，它会正确地注入它。但是一些细节仍然令我感到沮丧：当我编辑一个sass文件时，浏览器同步被通知2次css文件已经改变。在sass观察者中有1次，在css观察者中有1次。这对他来说似乎不是问题，因为它正确地在我的浏览器中注入了css。但这不是很“干净”。

我想找到一种方法对此进行某种排除。理想情况下，只需要在我的编码中使用更多逻辑，无需添加其他软件包，如gulp-watch，gulp-if ...

var gulp = require('gulp'),
    rubySass = require('gulp-ruby-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    browsersync  = require('browser-sync').create();

gulp.task('rubySass', function() {
  return rubySass('sources/', {
      style: 'expanded',
      sourcemap: true
    })
    .on('error', function (err) {
      console.error('Error!', err.message);
    })
    .pipe(sourcemaps.write('maps', {
        includeContent: false,
        sourceRoot: '/sources'
    }))
    .pipe(gulp.dest('./css'))
    .pipe(browsersync.stream({match: "**/*.css"}));
    // If I remove this line, browser-sync is still notified 2 times
    // (the console is still showing 2 times "[BS] 1 file changed (main.css)")
    // but, moreover, the css is no longer injected : the whole page is reloading.
});

gulp.task('browsersync', function() {
  browsersync.init({
    server: './',
    logConnections: true
  });
});

gulp.task('default', ['rubySass', 'browsersync'], function (){
  gulp.watch('**/*.html', browsersync.reload);
  gulp.watch('**/*.php', browsersync.reload);
  gulp.watch('js/**/*.js', browsersync.reload);

  gulp.watch('**/*.css', function(file){
    console.log("In gulp watch : css");
    gulp.src(file.path)
        .pipe(browsersync.stream());
  });
  gulp.watch('./sources/**/*.scss', ['rubySass']).on('change', function(evt) {
    console.log("In gulp watch : sass");
  });
});

保存sass文件时，这是控制台输出： Console output

正如我们所看到的，我们连续输入2个观察者，浏览器同步说2次“[BS] 1个文件改变了（main.css）”。

Answer 1

由于您的SASS始终编译为.css，您只需要注意.css文件中的更改。无论如何它都将触发SASS更改（因为.css将生成并且gulp.watch由此.css更改触发）。否则，您可以在gulp.watch（）中使用排除项，并使用某种模式（例如子目录）来标识从SASS生成的.css文件。你可以尝试这个：

var gulp = require('gulp'),
    rubySass = require('gulp-ruby-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    browsersync  = require('browser-sync').create();

gulp.task('rubySass', function() {
  return rubySass('sources/', {
      style: 'expanded',
      sourcemap: true
    })
    .on('error', function (err) {
      console.error('Error!', err.message);
    })
    .pipe(sourcemaps.write('maps', {
        includeContent: false,
        sourceRoot: '/sources'
    }))
    // note the destination change here
    .pipe(gulp.dest('./css/sass')) // note the destination change here
    .pipe(browsersync.stream({match: "**/*.css"}));
});

gulp.task('browsersync', function() {
  browsersync.init({
    server: './',
    logConnections: true
  });
});

gulp.task('default', ['rubySass', 'browsersync'], function (){
  gulp.watch('**/*.html', browsersync.reload);
  gulp.watch('**/*.php', browsersync.reload);
  gulp.watch('js/**/*.js', browsersync.reload);

  // added exclusion for the CSS files generated from SASS
  gulp.watch(['**/*.css', '!./css/sass/**/*.css'], function(file){
    console.log("In gulp watch : css");
    gulp.src(file.path)
        .pipe(browsersync.stream());
  });
  gulp.watch('./sources/**/*.scss', ['rubySass']).on('change', function(evt) {
    console.log("In gulp watch : sass");
  });
});

如何配置gulp观察器进行浏览器同步以在编辑sass文件时注入css和编辑纯css文件？

1 个答案: