Unlock your potential with a Pro Membership
Here is where you propel your career forward. Come join us today. Learn more.
Sourcemap and PostCSS
Lab: Part 3b – Doing More with Gulp
Video Runtime: 10:39
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.
Once upon a time, there was a developer... You! This is going to be a good story...
Total Lab Runtime: 01:10:42
- 1 Autoprefixerpro 05:51
- 2 Sourcemap and PostCSSpro 10:39
- 3 Media Query Packerpro 07:31
- 4 CSS Minify with Nanopro 14:28
- 5 Gulp Notifications & Error Handlingpro 09:26
- 6 Sass Lintingpro 11:28
- 7 Git & Additional Enhancementspro 11:19