Sourcemap and PostCSS

Now that your styles are in Sass modules, when you are building, tweaking, and debugging your styles in the browser, it shows the stylesheet and not the respective Sass partial file. It becomes cumbersome to find where your styles are when you want to make a change. Sourcemap solves that problem for you. In the browser, it will show you the Sass partial file associated with the element instead of style.css. It will save you a lot of time and frustration as you are building. You are going to love this module.

To install it locally into your theme, type the following:

npm install --save-dev gulp-sourcemaps

In addition, PostCSS really takes your gulp tasks to the next level. There are a ton of plugins that you can use to reduce your development time significantly. There is a gulp node module available for you here. To install it locally into your theme, type the following:

npm install --save-dev gulp-postcss

Let’s add both of these to our gulp file. You’ll also move the Autoprefixer into PostCSS.