SASS to CSS Workflow using VS Code and Gulp

SASS to CSS Workflow using VS Code and Gulp

I had a client of mine ask me to redo a workflow for transpiling SASS into CSS with no payed third party tools. The solution they had was already free but was built with Ruby and since I'm not a Ruby Guy I decided it to give it a shot using NPM I mean how hard could it be?

The issue they had with the now previous solution was that the developers created the stylesheets using Foundation, ahem... nothing wrong with that, but where they dropped the ball was in the way they implemented it, they over engineered it in a way that all sites had a dependency on the same base/global stylesheets.

So instead of separating each website to its own they had this intertwined SASS import mess between projects, to make it worse the generated CSS was so big that IE choked due to the limit in selectors (65534 to be exact), So the poor soul then had to split the CSS and minimize it... those cold hearted devs didnt even bother finishing the rest of the workflow....

Anyways long story short, I wasn't payed to fix the SASS mess they did but to create the workflow which is what this blog post is about.

So what are we learning?

Lean to create a Gulp workflow in Visual Studio Code, that generates CSS from SASS (Transpiling) automatically

  • Transpile SASS to CSS - using gulp-sass
  • Split a big CSS file into 2 separate files in order to cater for the IE selector limit - using gulp-bless
  • Minimize the CSS - using gulp-clean

Setting up dependencies in Visual Studio Code

The solution turned out to be really simple, aside from some minor obstacles I had to figure out (Globbing)

To run this workflow you first need to import the required libraries. So in Visual Studio Code under your project root create a package.json file and just add the following dependencies then run a npm install.

package.json

{ //Your Other configurations //... "devDependencies": { "fancy-log": "^1.3.2", "gulp": "^3.9.1", "gulp-bless": "^4.0.0", "gulp-clean-css": "^3.9.2", "gulp-sass": "^3.1.0", "gulp-sass-glob": "^1.0.8", "node-sass": "^4.7.2" } }

So most the packages used are pretty obvious and don't need clarification. the only ones that are not that obvious are gulp-sass-glob and gulp-bless, which you may or may not need in your case.

gulp-sass-glob: If your SASS is pretty big and you have lots of imports this package can help, in my case the original solution made by the other Ruby Devs had this cool way of importing multiple SASS files using wildcards. I couldnt acomplish this with gulp-sass package by itself so the globbing came in handy

gulp-bless: Now you may not need this but this package was used to split the CSS into multiple files due to the IE selector limit, if your CSS turns out to have a more than 65534 selectors then you need this if you need your site to be IE compatible.

Creating the Gulp Task

Once the dependencies have installed, create a gulptask.js with the following code updating your paths to what suits you best, the meat of the code is in the sass_transpiler function. After this in place just Run Taskin Visual Studio Code

gulpfile.js

//Required libraries var gulp = require('gulp'); var log = require('fancy-log'); var sass = require('gulp-sass'); var sassGlob = require('gulp-sass-glob'); var bless = require('gulp-bless'); var cleanCSS = require('gulp-clean-css'); //Globals var siteOrigin = 'SomeWebsite'; var siteSassLocation = ['./Website/scss/app.scss']; var siteCssLocation = './Website/css/dist'; var siteCssSplitLocation = './Website/css/dist/split'; var siteCssMinLocation = './Website/css/dist/split/min'; //Specify some transpiling options var sassOptions = { sourceComments: true } //Set up my watch task gulp.task('site_sass_watch',['site_sass_transpiler'], function() { //after a sass file has been updated run the sass transpiler gulp.watch('*.scss', ['sass_transpiler']); }); //Run the worklflow gulp.task('site_sass_transpiler', function() { log.info("@@" + siteOrigin + ": SASS change detected!"); sass_transpiler(siteOrigin, siteSassLocation, siteCssLocation, siteCssSplitLocation, siteCssMinLocation); }); //Generate Sass (Reusable function) function sass_transpiler(origin, sassLocation, cssLocation, cssSplitLocation, cssMinLocation) { gulp.src(sassLocation) .pipe(sassGlob({ //Incase you need to ignore some paths ignorePaths: [ '**/example1.scss', 'example2/*.scss', 'example3/**' ] })) //Generate the sass and save .pipe(sass(sassOptions)) .pipe(gulp.dest(cssLocation)) .on('end', function(){ log.info("@@" + origin + ": Finished transpiling SASS into CSS"); }) //Split the .css generated into separate files (for ie limit restriction) .pipe(bless({ imports: false, suffix: function(index) { return index + 1; }})) .pipe(gulp.dest(cssSplitLocation)) .on('end', function(){ log.info("@@" + origin + ": Finished spliting CSS files"); }) //Minify the split .css .pipe(cleanCSS({compatibility: 'ie8'})) .pipe(gulp.dest(cssMinLocation)) .on('end', function(){ log.info("@@" + origin + ": Finished minimizing CSS files"); }); }

Once the task is running any updates made on any SASS files will trigger the workflow and generate the final CSS

I hope this helps.

Comments