@belyaevcyrill

Как решить проблему с Gulp?

Для преобразования 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-файл.
  • Вопрос задан
  • 208 просмотров
Решения вопроса 1
bingo347
@bingo347 Куратор тега HTML
Crazy on performance...
в вотчере таск css:single запускается параллельно таску sass, а нужно последовательно
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы