Gulp Sass 仅通过两次保存编译

Question

我一直在尝试编译对@imports 的更改以及对主要 SCSS 文件的更改，并且基本上可以正常工作。

我的设置问题：要查看更改，我必须保存文件两次（无论它们是主文件还是导入文件）。非常感谢关于此的想法。

目录结构简单：

--> SCSS
--> SCSS/partials

以下是我的 gulpfile 的相关部分：

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var sync = require('browser-sync').create(); // create a browser sync instance.

var sassPaths = [
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src'
];

var paths = {
  'assets': 'assets',
  'dev': 'assets/styles/dev'
};

// DEV CSS

  gulp.task('dev-styles', function() {
    return gulp.src(['scss/**/*.scss', 'scss/*.scss'])
    .pipe($.sass({
      includePaths: sassPaths,
      outputStyles: 'expanded'
    })
      .on('error', $.sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 versions', 'ie >=9']
    }))
    .pipe(rename({
      suffix: '.dev'
    }))
    .pipe(gulp.dest('paths.dev'));
  });


// DEFAULT WATCH

  gulp.task('default', function() {

    sync.init({
      injectChanges: true,
      proxy: 'localhost/basic-modx'
    });
 
 gulp.watch([ 'scss/**/*.scss', 'scss/*.scss' ], ['dev-styles']);
    gulp.watch([ 'scss/**/*.scss', 'scss/*.scss' ]).on('change', sync.reload);
});

Answer 1

您的手表设置不正常。我怀疑重新加载浏览器的第二个在第一个实际转换 scss 之前完成，所以当重新加载发生时没有任何改变。因此你必须点击保存两次。

browserSync documentation 的更好方法是在 'dev-styles' 任务结束时重新加载，如下所示：

gulp.task('dev-styles', function() {
   return gulp.src(['scss/**/*.scss', 'scss/*.scss'])
     .pipe($.sass({
        includePaths: sassPaths,
        outputStyles: 'expanded'
     })
    .on('error', $.sass.logError))
    .pipe(autoprefixer({
       browsers: ['last 2 versions', 'ie >=9']
    }))
    .pipe(rename({
      suffix: '.dev'
    }))
   .pipe(gulp.dest('paths.dev'));
   .pipe(sync.stream());
});

并删除第二个 gulp.watch 语句。

Gulp Sass 仅通过两次保存编译

Gulp Sass Compiles Only With Two Saves

gulp

gulp-sass

gulp-watch