Gulp-sass会在保存部分时触发但不会写输出

Question

我使用gulp sass编译，前缀和缩小我的scss到css和min.css，我每次保存文件时都使用watch来激活编译但突然gulp-sass只在保存部分时停止写输出文件，一切正常我保存了主要的style.scss

这是两种情况下终端的SASS日志，保存主文件或部分scss文件。正如您所看到的那样，它会触发两次，但仅在主文件上生成并保存输出。

[11:54:50] Starting 'sass'...
[11:54:51] Finished 'sass' after 886 ms
[11:54:52] Starting 'sass'...
[11:54:53] Finished 'sass' after 809 ms

Gulp在全球安装，下面的Gulpfile.js一直工作到昨天。我尝试多次更改gulp.src路径，但没有运气。显然我仍然可以编译保存主style.scss的所有东西但是当你同时处理几个文件时真的很烦人。

另一个奇怪的事情是尝试更改文件路径以编译缩小版本wa恢复为较旧的日期版本;我认为它可能是一个NPM缓存问题，但我对node / npm并不是很有信心，我只是用它来编译SCSS并连接JS就是这样。

非常感谢能够帮助我的任何人。

var themeurl = './';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var rename = require("gulp-rename");
var watch = require('gulp-watch');
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify'); 
var cleanCSS = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');


gulp.task('sass', function () {
  return gulp.src(themeurl + '_sass/style.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 10 versions']
    }))
    .pipe(sourcemaps.write())   
    .pipe(gulp.dest(themeurl))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest(themeurl));

});


gulp.task('scripts', function() {
    gulp.src('_js/*.js')
    .pipe(concat('scripts.js'))
    .pipe(gulp.dest('assets/js'));
    return gulp.src(themeurl + 'assets/js/scripts.js')
        .pipe(uglify().on('error', function(e){
            console.log(e);
         }))
        .pipe(rename('scripts.min.js'))
        .pipe(gulp.dest(themeurl+'assets/js/'));    
});


gulp.task('watch', function () {
    gulp.watch(themeurl + '_sass/**/*.scss', gulp.series('sass') );
    gulp.watch(themeurl + '_js/*.js', gulp.series('scripts') );  
});

Answer 1

你解决了问题吗？我有同样的问题。

我的解决方法与我如何编写监视任务有关。我必须在每次新编译之前删除css包

// old 
watch(`${paths.src}/sass/**/*.scss`, series(css, reload));
// workaround
watch(`${paths.src}/sass/*.scss`, series(delCSSbundle, css, reload));

结果是CSS包的内容在每次编译时都会更新，但是包的日期/时间保持不变。

Answer 2

使用style替换*时是否有效，如下面的代码块所示？ *告诉gulp搜索文件夹中以.scss结尾的所有文件。

gulp.task('sass', function () {
  return gulp.src(themeurl + '_sass/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 10 versions']
    }))
    .pipe(sourcemaps.write())   
    .pipe(gulp.dest(themeurl))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest(themeurl));

});

Answer 3

谢谢Remco，我已经尝试过，但遗憾的是没有任何改变。正如我在更新中描述的那样，问题似乎与文件的日期/时间有关，而不是与编译有关：编译是用我的所有修改更新的，但日期/时间不是。