Доброго времени суток! Как можно оптимизировать сборку стилей, когда есть один файл main.scss в котором подключены остальные scss файлы?
Есть 1 файл main.scss , в него подключены файлы типа _header.scss, _footer.scss и т.п. Так же подключены другие main файлы из других директорий. Вот так:
Сейчас рабочий таск для стилей пересобирает все стили. Выглядит он вот так:
/********************************************************************/
/*STYLES*************************************************************/
/********************************************************************/
gulp.task('style', function () {
return gulp.src(path.src.style)
.pipe(plugins.sourcemaps.init())
.pipe(plugins.sass.sync().on('error', plugins.sass.logError))
.pipe(plugins.autoprefixer({browsers: ['last 2 versions'], cascade: false}))
.pipe(plugins.csso())
.pipe(plugins.rename({suffix: '.min'}))
.pipe(plugins.sourcemaps.write())
.pipe(gulp.dest(path.dist.css))
.pipe(reload({stream: true}));
});
Пока проект маленький все более менее работает. Но со временем, проект разрастается, и скорость таска достигает 20 и более секунд. Все из-за того что стилей много и пересобирая их раз за разом тратится все больше и больше времени. В итоге пользоваться совершенно невозможно. Были перепробованы плагины gulp-newer, gulp-changed, gulp-cached, gulp-remember.
Так же была испытана аналогичная опция и коробки gulp 4:
{since: gulp.lastRun('style')}
Полученный результат был неутешительным, главные файлы без "_" работали как надо, пересобирались инкрементально. А вот с заинклюжеными файлами все сложнее. Вотчер на них реагировал, запускал задачу, показывал что она завершена. Но на деле никаких изменения в главном файле не происходит. Кое какие мысли у меня по этому поводу есть, но помочь это никак не может.
Поэтому прошу совета как сделать инкрементальную сборку стилей с моей структурой файлов?
UPD: Размер минифицированного файла.
