Workflow Gulp with SASS and PUG

A great workflow with Gulp 4

I registered quite late on Github. I worked long enough with Git to be able to work with developers and integrators but I never really had triggered with Github until finally having something to present. And for me the first thing to present was a part of my workflow, the implementation of the automation of my tasks with the help of Gulp.

What it does?

Since I use the preprocessor SASS, Gulp became a real friend. It must be said that before I had to go through Koala to compile and it tired me despite the ease of execution. Thanks to Gulp I don't have to worry anymore about the compilation, it does it automatically with each modification on my scss files.

Given the possibilities of Gulp I had fun to take a look at the PUG preprocessor which was also interesting with its syntax and its understanding of other languages ​​(like Markdown for example). This is where I left on a complete workflow with PUG and SASS.

The different tasks

Here is a list of the tasks included:

• Server launch with Node (no more local server like WAMP).
• Synchronization of the browser and automatic refreshing at each modification.
• Image optimization (reduces image weight).
• Setting up a cache to avoid optimizing all the images each time. Gulp will take care of optimizing only the new images.
• Javascript minification.
• Compilation of scss files in only one css file.
• Compilation of pug files in html files.
• Some tasks that simply allow to get folders and files from the development directory to add them to the production directory (the simplest task and natively usable with Gulp).
• And of course all this could not be automatic without a watcher that will perform the tasks as soon as it is needed.

Packages needed

And finally for the packages used in the project (in the package.json):

'devDependencies': {
    'browser-sync',
    'gulp',
    'gulp-cache',
    'gulp-cssbeautify',
    'gulp-imagemin',
    'gulp-pug',
    'gulp-load-plugins',
    'gulp-prettify',
    'gulp-sass',
    'gulp-uglify'
}

Gulp is not the only solution

Today I adapt my Gulp workflow according to the projects, but this one is a good base.

Note that Gulp is not the solution for every projects. Gulp should be used for project that needs multiple tasks to be launched individually. Almost all my projects use webpack but I like to use Gulp too.

Of course for more information I recommend my repo on Github.