Question

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

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

目录结构很简单：

- ＆GT; SCSS
- ＆GT; SCSS /分音

以下是我的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更好的方法是在你的“开发风格”结束时重新加载。像这样的任务：

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仅用两次保存编译

1 个答案: