gulp-autoprefixer和gulp-sass使用默認的gulp任務創建無限的sass編譯循環

Question

我正在通過以下（簡化）gulp文件獲得無限的sass編譯循環。

'use strict'; 

// include gulp and all plugins 
var gulp   = require('gulp'), 
    notify  = require('gulp-notify'), 
    rename  = require('gulp-rename'), 
    sass   = require('gulp-sass'), 
    sourcemaps = require('gulp-sourcemaps'), 
    autoprefixer = require('gulp-autoprefixer'); 


var app = { 
    src: 'styles/main.scss', 
    watch: 'styles/**/*.*', 
    dest: 'styles/dist/' 
}; 

// compile sass, apply autoprefixer 
gulp.task('sass', function(){ 
    console.log('compiling SASS files') 
    return gulp.src(app.src) 
     .pipe(drano()) 
     .pipe(sourcemaps.init()) 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions'] 
     })) 
     .pipe(gulp.dest(app.dest)) 
     .pipe(sourcemaps.write(app.dest)) 
     .pipe(rename('main.css')); 
}); 

// create watch task 
gulp.task('watch', function(){ 
    gulp.watch(app.watch, ['sass']); 
}); 

gulp.task('default', ['sass','watch']); 

當我自己運行gulp sass任務時，它很好。但是當我運行默認任務（gulp）時，sass將無盡地重新編譯。

我真的需要讓autoprefixer工作。任何建議將不勝感激！

Answer 1

您正在看目標文件夾。 glob styles/**/*.*也與styles/dist/中的每個文件相匹配。那麼什麼情況是：

• 您修改styles/main.scss
• styles/main.scss比賽styles/**/*.* =>執行sass任務
• sass任務生成styles/dist/main.css
• styles/dist/main.css比賽styles/**/*.* =>執行sass任務
• sass任務生成styles/dist/main.css
• 場styles/dist/main.css比賽styles/**/*.* =>執行sass任務
• 等...

您需要從您的手錶排除styles/dist/：

var app = { 
    src: 'styles/main.scss', 
    watch: ['styles/**/*.*', '!styles/dist/**/*'], 
    dest: 'styles/dist/' 
}; 

另一種方法是將手錶僅限制於.scss文件：

var app = { 
    src: 'styles/main.scss', 
    watch: 'styles/**/*.scss', 
    dest: 'styles/dist/' 
}; 

無論喲你是否必須確保你的監視文件不包含目標目錄中的文件。