A very long compilation of Gulp + gulp-sass. What you can do with it?

Hello! Use to build the frontend gulp + sass. Is the main app file.scss, which connects the styles for the different components, they can be quite a lot. The first 5-10 minutes after start gulp default all the rules, then the compiler sass (gulp-sass) starting to think for too long, has no patience is not enough. Part gulpfile.js attached.

The system is Win x64, i3, 8Gb of RAM (if relevant).
Gulp v4, v Node.6.9.0, npm v3.10.8

What could be the problem, comrades?

//Here the way to connect the scss/css
var styles_paths = [
'lib/foundation-sites/scss',
'lib/motion-ui/src',
'lib/components-font-awesome/scss',
'lib/malihu-custom-scrollbar-plugin',
'lib/fancybox/source'

]

// compile the SCSS
function styles() {
 return gulp.src(path.src + '/scss/app.scss')
 // compile the scss to css:
 .pipe(debug({title: 'css'}))
.pipe(sass({
 includePaths: styles_paths
 }).on('error', sass.logError))
 // add vendorname prefixes:
 .pipe($if(PRODUCTION autoprefixer({
 browsers: ['last 5 versions', 'ie >= 9'],
})))
 // minimize if there is a flag --production:
 .pipe($if(PRODUCTION, cssmin()))
 .pipe(gulp.dest(path.dist + '/css'))
 .pipe(browser.reload({ stream: true }));
}

// Problem build the project, run gulp build
gulp.task('build',
 gulp.series(clean, sprite, gulp.parallel(copy, styles, javascript, images)));

// The default task
gulp.task('default',
 gulp.series('build', server watch));

// The tracked changes and run the appropriate task
function watch() {
 gulp.watch(copy_paths).on('all', gulp.series(copy browser.reload));
 gulp.watch(path.src + '/scss/**/*.scss').on('all', gulp.series(styles browser.reload));
 gulp.watch(path.src + '/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
 gulp.watch(path.src + '/img/**/*').on('all', gulp.series(images, browser.reload));
 gulp.watch(path.src + '/img/sprite/**/*').on('all', gulp.series(sprite, browser.reload));
}


a87d243e5873493fa7d707cc027550e2.jpg
July 2nd 19 at 13:45
2 answers
July 2nd 19 at 13:47
Solution
At this point the solution is still not found, so switched to Php Storm - with him everything is OK. - hillard commented on July 2nd 19 at 13:50
Yesterday found the solution to this problem, all described in detail here Why gulp-sass progressive increases the performance of the Tusk? - Sarah59 commented on July 2nd 19 at 13:53
Checked, it works in Sublime Text with "atomic_save": true. Although for me not so important now - I Php Storm has a spell :) But I hope someone can help. - hillard commented on July 2nd 19 at 13:56
: how long is the compilation of the file in phpStorm?
In this work long before yuzal LESS. Now decided to change to the SASS. Set up the entire compilation, but a little disappointed - compilation is too long (currently 15 files). After every sneeze (changes) thinks for about 5 sec. LESS this was not. What's wrong?
My File Watcher
abf04bad745f417a80f19a69d67e9c1e.jpg
- Edmund.Hammes78 commented on July 2nd 19 at 13:59
: I could not get a satisfactory compile-time, especially if the css modular (more than 20-30 files). So I converted the projects to PostCSS. - hillard commented on July 2nd 19 at 14:02
July 2nd 19 at 13:49
Forgot to specify that I use Sublime Text 3. Apparently, the blame for the parameter "atomic_save": true, which was exhibited after reading this topic. Once set to false, off app.scss, watch him stupidly ignored — ie did not work the mask path.src + '/scss/**/*.scss'. Corrected so:
was:
gulp.watch(path.src + '/scss/**/*.scss').on('all', gulp.series(styles browser.reload));

was:
gulp.watch([path.src + '/scss/**/*.scss', path.src + '/scss/*.scss']).on('all', gulp.series(styles browser.reload));

Find more questions by tags JavaScriptSassGulp.js