Gulp is a build system implemented using stream. You can use gulp to hinting and linting scripts, concatenate and minify them, automate testing and many others. I have been wanted to use Gulp in my Nodejs project for a while (I have tried Grunt once, but that not work well for me). This is my working with Gulp notes.
To start, install Gulp globally
npm install -g gulp
Next, install gulp as development module in your Nodejs project
Now that we have Gulp ready, we can start looking for flow that we want to use. I think we should customized our gulp workflow to our developments style. There are many tutorials available on how you can setup your Gulp flow. For example here and here
My aim to to group assets in different swig file into different concatenated, minified and uglified scripts. If login page is rendered, it would be
Swig base template
<!DOCTYPE html><htmllang="en"><head><linkrel="stylesheet"href="/css/base.min.css"/><linkrel="stylesheet"href="/css/login.min.css"></head><body><divclass="content-area"><divclass="row"><!-- Login form --></div></div><script src="/js/base.min.js"></script><script src="/js/login.min.js"></script></body></html>
I think this approach is better than combining all files into one big min.js or min.css file. It provide separate file for asset that might be changes frequently. With that in mind I start looking available Gulp plugin for such task (someone must have thought that too!).
I found gulp-useref which do exactly as I wanted. and I also add gulp-rev to add hash of content into filename.
So head to your console and install the followings: