Gulp watch taking too long to recompile styles

Hi there,

It takes approximately 5 seconds for gulp watch to recompile the styles once a change is detected. Here is a fragment of my console output:

[11:55:24] Finished ‘styles’ after 9.66 s
[11:56:54] Starting ‘wiredep’…
[11:56:54] Finished ‘wiredep’ after 70 ms
[11:56:54] Starting ‘styles’…
[BS] 2 files changed (main.css, editor-style.css)
[11:56:58] Finished ‘styles’ after 4.47 s
[11:57:19] Starting ‘wiredep’…
[11:57:19] Finished ‘wiredep’ after 57 ms
[11:57:19] Starting ‘styles’…
[BS] 2 files changed (main.css, editor-style.css)
[11:57:23] Finished ‘styles’ after 4.31 s
[11:58:54] Starting ‘wiredep’…
[11:58:54] Finished ‘wiredep’ after 68 ms
[11:58:54] Starting ‘styles’…

Is it natural that recompiling should take so long?

I will add that this I’m using a ‘clean’ installation of Sage - all settings are default.


1 Like

That’s about how long it takes on my clean Ubuntu Vagrant setup on a Macbook Air. Personally I’m not bothered by it (it sure beats the 30 seconds it took Grunt to compile) but it could be a memory or CPU constraint issue, particularly if you’re on a shared server. See if you can monitor things with top or htop to find out if there’s a heavy load on your server.

I’m also running gulp watch on a Vagrant VM, 1GB RAM.

If, however, somebody is bothered by the time it takes to recompile assets, I’m thinking that a solution would be to create a separate gulp task, e.g. ‘gulp css’, that would watch compile only *.less files and won’t run all the tasks that are currently fired off with ‘gulp watch’, e.i. styles, jshint, scripts, fonts, images, wiredep.

Obviously, this is not perfect since we would have to switch to the buil-in grunt watch if we want to recompile anything else than *.less, but the assumption is that you will spend most of your time tweaking styles.


@luqo33 what kind of synced folder method are you using with Vagrant? The fastest should be NFS.

@swalkinshaw, Yes, I’m using NFS (enabled by default in Bedrock) . But I’m thinking would the synced folders method have anything to do with how long it takes Gulp to recompile assets?


Wow. It really took you that long with Grunt? I am not using Vagrant, but Grunt was always fast for me. I just tried it again on a past project on 6.x and it clocks in at around 5 seconds.

With a fresh install of Sage and using Gulp it takes about 20 seconds. Watching Ben’s screencast and where he talks about adding Fontawesome and running Gulp it looks like it is taking him about the same also. So, I figure it is what it is.

During the screencast the recording app was unfortunately eating away at my machine

Here’s what I’m seeing on the master branch of Sage right now:

➜  sage git:(master) gulp
[15:29:40] Using gulpfile ~/Sites/
[15:29:40] Starting 'clean'...
[15:29:40] Finished 'clean' after 20 ms
[15:29:40] Starting 'default'...
[15:29:40] Starting 'wiredep'...
[15:29:40] Starting 'jshint'...
[15:29:41] Starting 'fonts'...
[15:29:41] Starting 'images'...
[15:29:42] Finished 'default' after 1.35 s
[15:29:42] gulp-imagemin: Minified 0 images
[15:29:42] Finished 'images' after 928 ms
[15:29:42] Finished 'wiredep' after 1.52 s
[15:29:42] Starting 'styles'...
[15:29:42] Finished 'jshint' after 2.12 s
[15:29:42] Starting 'scripts'...
[15:29:50] Finished 'fonts' after 9.09 s
[15:29:51] Finished 'styles' after 8.87 s
[15:29:51] Finished 'scripts' after 8.09 s
[15:29:51] Starting 'build'...
[15:29:51] Finished 'build' after 6 μs

You beat me by about 9 seconds. No biggie. I’ll blame it on Pandora radio in the bg and being a Windows user.

[14:15:02] Using gulpfile c:\LocalDev\devarea1\web\app\themes\sage-master\gulpfi
[14:15:02] Starting 'clean'...
[14:15:02] Finished 'clean' after 70 ms
[14:15:02] Starting 'default'...
[14:15:02] Starting 'wiredep'...
[14:15:02] Starting 'jshint'...
[14:15:03] Starting 'fonts'...
[14:15:03] Starting 'images'...
[14:15:05] Finished 'default' after 3.35 s
[14:15:05] gulp-imagemin: Minified 0 images
[14:15:05] Finished 'images' after 2.35 s
[14:15:05] Finished 'wiredep' after 3.63 s
[14:15:05] Starting 'styles'...
[14:15:07] Finished 'jshint' after 4.97 s
[14:15:07] Starting 'scripts'...
[14:15:19] Finished 'fonts' after 17 s
[14:15:21] Finished 'styles' after 15 s
[14:15:21] Finished 'scripts' after 14 s
[14:15:21] Starting 'build'...
[14:15:21] Finished 'build' after 18 µs

Did a test for this before switching from less to sass. for less, styles would take about 9s, but for sass it hangs around 3s

have you built it? I’m not familiar with gulp

Yeah, mine takes about 4 seconds. Would like to know if anyone get a faster way?

Mine’s taking 12 seconds to compile scripts and I only have a couple of extra bower packages and a tiny main.js file. I don’t understand how people are saying Grunt was slower. Previously, with my home-grown gruntfile this sort of thing took a couple of seconds at most and that was including linting, concating and uglifying many different packages. What’s taking so long?

1 Like

Hello, I think about separating the bootstrap/plugin scss from my custom scss. Maybe somebody of you have ideas on how to manage this in a clean way:

Your post is off topic… but look at the asset-builder docs and specs, this is pretty straightforward by editing the assets/manifest.json file in Sage.