Node.js

Using SASS in Bootstrap Drupal theme

As of this writing, Bootstrap Drupal theme only supports LESS. This tutorial will show how to create bootstrap sub-theme supporting SASS and use Grunt to manage our workflow effectively. My operating system is Windows. Therefore, the shell commands, output, etc. that will be shown here are for Windows.

Setup WebPack to sync your defined source folders/files with your distribution folder

In Grunt, there's a plugin called Grunt-sync that can keep directories in sync. This is useful if you have custom template that is common and used in all your websites you are developing (it is good practice to modify/update your common custom template in one place instead of modifying/updating in each of websites source files). As of this writing there's no plugin for WebPack that can do the functionality same as Grunt-sync. However, we can "almost" achieve the functionality of Grunt-sync on WebPack by using two plugins. These are "Copy WebPack Plugin" and "Clean for WebPack" plugins.

Solution to no CSS source map file generated under production mode in Webpack 4

The issue is in Webpack 4 under "production" mode there is no source map file generated only for CSS (no problem in javascript source map file) but there is no issue in generation of source map for CSS under "development" mode.

Here are my previous configurations:

package.json

Optimizing images using imagemin Grunt plugin

I have tried to use Prepros and one feature that I like is its image optimization. This feature reduces the byte size of of the image and this means faster web page loading. But Grunt is the workflow management I am using. Good thing is Grunt has this Imagemin plugin which can also optimize images (jpeg, png and gif). Lets take a look on how to setup and use this plugin to our workflow.