Gulp watch taking way too long

Hi there,

I’ve started a new project with Sage and immediatly fell in love with the workflow, but my compile time are extremely low. I don’t think it’s a Sage problem per se, but I can’t find much info anywhere else, so I though I would ask here.
If it’s not the place, then sorry in advance !

Here’s what my console looks like when I’m working :

[BS] Watching files…
[21:44:26] Starting ‘wiredep’…
[21:44:27] Finished ‘wiredep’ after 839 ms
[21:44:27] Starting ‘styles’…
[BS] 1 file changed (main.css)
[21:44:53] Finished ‘styles’ after 27 s
[21:45:23] Starting ‘wiredep’…
[21:45:23] Finished ‘wiredep’ after 67 ms
[21:45:23] Starting ‘styles’…
[BS] 1 file changed (main.css)
[21:45:52] Finished ‘styles’ after 29 s
[21:47:06] Starting ‘jshint’…
[21:47:07] Finished ‘jshint’ after 1.27 s
[21:47:07] Starting ‘scripts’…
[BS] 3 files changed (customizer.js, jquery.js, main.js)
[21:47:26] Finished ‘scripts’ after 19 s

I’m working localy on my Windows 10 and I meet all the requirements (PHP 5.6.12, Node 0.12.10, Gulp 3.9.1 and Bower 1.7.7).

I don’t know if it’s related or if it’s supposed to be that way, but when I’m setting everything up with “npm install”, I’m ending up with 680 folders in my node_modules directory, which seems kind of excessive for less than 30 dependencies in the package.json file.

Also, when running “npm install”, I’m having two errors asking me to install Visual Studio 2015.

Do you think it has something to do with this, that my computer is just not powerful enough (I have a i7-3517U CPU with 10Go RAM and a Samsung SSD 830 Series), or am I just doing something wrong ?

Thanks !

Node 0.12.10 is pretty old now. Update it to the latest and it should be faster. Because the old node would nest all dependencies, that lead to a whole lot of slowness on Windows machines. Newer versions of node don’t suffer so much with this I believe, although I don’t use Windows so I can’t say for sure.

Ping @QWp6t since he’s a dirty Windows dev :joy:

I was running a newest version of node before, but because of the requirements, I though I had to run Node 0.12.x .

I think it was the same before, but I’m gonna try updating node to the latest version right now.

(good to know I’m not alone on Windows ! :wink: )

EDIT : So after updating to the latest version (v5.7.1), my compile times are better, but still way to long :

[BS] Watching files…
[21:44:26] Starting ‘wiredep’…
[21:44:27] Finished ‘wiredep’ after 751 ms
[21:44:27] Starting ‘styles’…
[BS] 1 file changed (main.css)
[21:44:53] Finished ‘styles’ after 19 s
[21:45:23] Starting ‘wiredep’…
[21:45:23] Finished ‘wiredep’ after 30 ms
[21:45:23] Starting ‘styles’…
[BS] 1 file changed (main.css)
[21:45:52] Finished ‘styles’ after 17 s
[21:47:06] Starting ‘jshint’…
[21:47:07] Finished ‘jshint’ after 731 ms
[21:47:07] Starting ‘scripts’…
[BS] 3 files changed (customizer.js, jquery.js, main.js)
[21:47:26] Finished ‘scripts’ after 11 s

Have you made any sort of customizations yet, or is this a fresh Sage installation?

Try implementing this. I do it for all of my Sage projects.

It’s a PR that was rejected because @austin’s incremental builds and/or webpack are coming very soon.

(note: instead of minify: !argv.fast, I use minify: argv.production, so it will always default to false unless I set the --production flag)

4 Likes

I just added a “svgstore” task, but the compile times were the same before.

I’ve implemented this, and I just went from 19 - 27 sec to 4 - 7 sec, thank you so much ! :smiley:

And for the 4 to 7 seconds left, do you think it’s only hardware ?

Probably, yeah. But it could also just be a Windows thing. That’s about how long it takes for me too from HDD (haven’t tested with SSD yet).

I also suffered this slowness on gulp and found out it was cssnano the big responsible of it. Although I know it’s deprecated, I switched again to minify-css and difference was enormous, from 9s to 1.8s when compiling styles. That’s a big change if working on small changes.

Browsing for a solution to this problem I found this benchmark study: http://goalsmashers.github.io/css-minification-benchmark/

Is there any reason to change from gulp-cssnano in favour of gulp-clean-css, which is recommended by gulp-minify-css npm repo?

Using gulp-cssnano is killing my workflow. :disappointed:

4 Likes

Yes!

This just saved me so much time and frustration.

Awesome.

1 Like

You can reduce the time for cssNano by avoiding removing duplicate CSS rules with this:

.pipe(cssNano, {
      safe: true,
      discardDuplicates : false
    })

Using Sage 8.4.2 - I’m not posting an Issue or pull request because Sage 8 is depreciated. But for anyone else in my situation who’s tried the above:

My problem has been with Bootstrap SCSS being very slow. I tried the above, but narrowed my issue down to the mergeRules optimisation being slow - increasing the “Styles” job from 2.5 to 15 seconds.

.pipe(cssNano, {
      safe: true,
      mergeRules: false
    })
4 Likes