I
I
Ilya Belsky2016-08-01 17:08:08
gulp.js
Ilya Belsky, 2016-08-01 17:08:08

Optimized incremental scss build?

Good day! How can you optimize the assembly of styles when there is one main.scss file in which the rest of the scss files are included?
There is 1 main.scss file, files like _header.scss, _footer.scss, etc. are included in it. Other main files from other directories are also connected. Like this:
c2f9ceeaf8c3410ba9202dd734f06496.png
Now the work task for styles rebuilds all styles. It looks like this:

/********************************************************************/
/*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}));
});

While the project is small, everything is more or less working. But over time, the project grows, and the speed of the task reaches 20 seconds or more. This is due to the fact that there are a lot of styles and rebuilding them over and over again takes more and more time. As a result, it is completely impossible to use. Plugins gulp-newer, gulp-changed, gulp-cached, gulp-remember have been tried.
A similar option was also tested with gulp 4 boxes:
{since: gulp.lastRun('style')}
The result was disappointing, the main files without "_" worked as they should, rebuilt incrementally. But with included files, everything is more complicated. Watcher reacted to them, launched the task, showed that it was completed. But in fact, no changes are made to the main file. I have some ideas about this, but it can't help.
Therefore, I ask for advice on how to make an incremental assembly of styles with my file structure?
UPD: Minified file size.
861571b9a697450a82630a2d28778a6e.png

Answer the question

In order to leave comments, you need to log in

1 answer(s)
Z
zooks, 2016-08-01
@vik_kodik

If Ruby Sass is used, then I recommend replacing it with libsass.
sass = require('gulp-sass')

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question