Scss files don't seem to be building correctly

sage
1

Hi all,

I’m new to Sage and from what I’ve seen it looks great however I’m having some trouble getting started. Its been a long while since I’ve done web dev so a lot has changed - hence why I thought Sage would be a good place to start (at the deep end I know though!!).

Anyway…I’ve got my local MAMP environment set up with Wordpress and Sage running correctly AFAIK, but I seem to be having some problems with the build pipeline.

If I use gulp watch then my site fires up successfully - I’m serving my devUrl via a vhost from MAMP to mysite.co.uk:8888 in my manifest.json file.

All seems to be ok, editing PHP files happily causes a BrowserSync refresh, however whilst editing a SCSS file triggers gulp the main.css file is not updated and BrowserSync is not fired.

This is the gulp watch log

[22:54:23] Starting 'wiredep'...
[22:54:23] Finished 'wiredep' after 210 ms
[22:54:23] Starting 'styles'...
[BS] 1 file changed (main.css)
[22:54:29] Finished 'styles' after 5.04 s

If I do a gulp --production the files seem to be generated correctly.

I’ve just checked and .js files are doing something similar but different - they trigger a BrowserSync but they also do not update without a gulp --production

Have I failed to configure something?

1 Like
2

If you’ve done a gulp --production you’ll need to rm -rf dist and then gulp again before you gulp watch to clear out the versioned copies of the compiled files.

2 Likes
3

Thanks a lot, that explains it and solves the problem - makes a lot of sense, I guess I should have read up a bit more on gulp before trying something so ambitious!

I’ll be back with more problems Im sure!

I’d love to see some a good example of gulp used in the real world for a theme, are their any online. I’m mainly looking for how people actually build out the CSS and JS files for their theme.

2 Likes
4

This is correct, only thing to note is you don’t need to delete the dist folder manually, running gulp or gulp --production will do that automatically for you with the clean task.

2 Likes