gulp-autoprefixer и gulp-sass создают бесконечный цикл компиляции sass с задачей gulp по умолчанию

Question

Я получаю бесконечный цикл компиляции sass со следующим (упрощенным) файлом gulp.

'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/' 
}; 

Независимо от того, u вы должны убедиться, что ваши просмотренные файлы не содержат файлы в вашем целевом каталоге.