Для преобразования SCSS в CSS использую Gulp + SASS. В gulpfile.js создал task, который "наблюдает" за изменением SCSS-файлов.
Но есть проблема.
Когда я изменяю SCSS-файл, в скомпилированном CSS-файле самых последних изменений
не появляется, а остаются
только предыдущие изменения. Приходится компилировать по два раза.
Сам gulpfile.js вот:
gulp.task('sass', function() {
return gulp.src([
'./'+dirs.src+'/app/**/*.scss',
'./'+dirs.src+'/app/**/*.sass',
'!./'+dirs.src+'/app/bower_components/'
])
.pipe(plugins.sass({
outputStyle: 'pretty',
precision: 8,
includePaths: [
'./'+dirs.src+'/app/'
]
})
.on('error', plugins.sass.logError))
.pipe(gulp.dest('./'+dirs.src+'/app/'));
});
gulp.task('css:single', ['css:single-clean'], function() {
return gulp.src([
'./'+dirs.src+'/app/!(bower_components)**/*.css',
'./'+dirs.src+'/app/main.css',
])
.pipe(plugins.concatcss('app.css'))
.pipe(plugins.cssnano({
discardComments: {
removeAll: true
}
}))
.pipe(gulp.dest('./'+dirs.src+'/app/'));
});
gulp.task('css:single-clean', function() {
return del('./'+dirs.src+'/app/app.css');
});
gulp.task('sass:watch', ['sass', 'css:single'], function() {
return gulp.watch([
'./'+dirs.src+'/app/**/*.scss',
'./'+dirs.src+'/app/**/*.sass'
], ['sass', 'css:single']);
});
Подскажите, в чём ошибка? Чтобы я сразу мог получать в CSS все изменения, которые вношу в SCSS-файл.