I’m not going to discuss about which one is better but I already used
Grunt in dominion and it works pretty well. I find it to be sometimes slow but my computer that may be my computer’s fault too.
Gulp is all about piping files into plugins and it runs faster (at least in my case). It’s a streaming build system. Finally I could also use Brunch but that won’t be this time.
Gulp configuration file
gulpfile.js is actually easier than a
Gruntfile.js. It starts as any node module:
And then you add modules and tasks:
This is just an example to lint the
js code using a better reporter. You will have to install these modules with
jslib but you could also use
bowerto install them.
cssfrom lib/frameworks but you could, again, use
srccontain all the files that we are writing ourselves
When creating some webpages, the size of the resources is always what takes longer to load. Therefore optimizing images is always a good idea. We will be using
gulp-imagemin. In addition to that we will also be using
gulp-changed to only pipe images that were modified and therefore diminishing deploy time.
We are chaging the images in place because we don’t need to save the same image twice if we are only going to use one of them.
imagemin can also optimize
svg files and support some options that should be taken into account depending of the kind of pictures you’ll be using on your site. You can check the readme for more help.
Now, we are going to minimize the
css and the
html files all together by using the gulp plugin
usemin. This is really useful because it will rename the tags used on your dev page as well, meaning that we won’t need to manually create an
html page that includes your minified
js files. Unfortunately we need to add some lines to help it:
It’s very similar for the
ìndex.html being located under
src we need to reference the folders properly. One downside about usemin is that it rips off any comment including those targeting IE:
I might fix this myself in a pull-request.
minifyHTML should not be ripping off these kind of comments because they’re not comments!
html is fine, we should add the corresponding
js to the
As you may have noticed we are creating the files at
., this is because having a
gh-pages branch allows to Github to directly serve that
index.html without further configuration.
Now we can do
gulp usemin and we will be generating our site. But you can do better right. Gulp does have a built-in
watch method. However we will not be using it because it doesn’t detect new or deleted files. We are therefore using
gulp-watch plugin instead.
Please note that
gulp.start will be removed in later versions. We could just copy the task code inside that function instead. It’s important to add
default as a dependency so the generation will be executed at least once. Otherwise it will just wait for changes before generating anything.
If we run audits on the page with Chrome or Firefox, you may notice that most of the
css is unused. What a shame! Fortunately we can fix this! We can rip off the unused
css rules with
gulp-uncss plugin. It also takes the
html to detect what is not used. If some rules are not present in the
index.html we must add an
ignore array to the
uncss call. This is documented on the Github page for
What we are going to do is simply strip off anything unused from the final
style.css file instead of doing it with each file because it’s way faster. We are going to create a task named
style depending on
usemin so that the initial
style.css file exists and we can modify it. We also need to update the default task to depend on
style instead of
usemin and, a new
watch(from.css,...) and remove that
from.css from the last
Finally I like to serve at the same time so I can launch
gulp watch and then just keep working. This is very easy, we just need to add the
gulp-connect plugin, create a task for it and add it as a dependency to the
And voilà, happy coding.
The whole code source is available at Github. Thought it may change in the future.