sassgulprubygemsbabeljsgulp-sass

Howto configure gulp-sass compiler to use dart-sass in gulpfile.babel.js?

How to set the sass.compiler property to use Dart Sass instead of Node Sass, when you are using gulpfile.babel.js configuration file, instead of standard gulpfile.js?

The latest gulp-sass documentation states:
"You can choose whether to use Dart Sass or Node Sass by setting the sass. compiler property."

To use node-sass we need to declare this for a gulpfile.js:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

sass.compiler = require('node-sass');

Therefore to use dart-sass we need to declare this for a gulpfile.js:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

sass.compiler = require('dart-sass');

When I compared the difference between the produced compressed CSS files via both "Ruby Sass 3.7.3" and "gulp-sass 4.0.2" it turned out quite a difference between the file sizes.

This is due to some differences during compilation such as:

the Ruby one converts .1em to: 0.1em
while
the gulp one is keeping the 0.1em

and

the Ruby one converts codes such as \f008 to ļ€ˆ
while
the gulp one is keeping those codes as they are

plus some other bits and bobs.. overall I would like to use the ruby conversions via gulp. I hope that using gulp-sass with dart-sass compiler might be a better solution for my current particular needs.

Ruby Sass 3.7.3 can be found here: https://rubygems.org/gems/sass/versions/3.7.3

latest gulp-sass can be found here: https://github.com/dlmanning/gulp-sass

latest dart-sass can be found here: https://github.com/sass/dart-sass

Currently, I am using this in my gulpfile.babel.js:

import gulp from 'gulp';
import print from 'gulp-print';
import concat from 'gulp-concat';
import sass from 'gulp-sass';
import uglify from 'gulp-uglify';
import notify from 'gulp-notify';
import size from 'gulp-size';
import fileSize from 'gulp-filesize';
Solution

  • No worries, I have the answer!

    This in my new gulpfile.babel.js:

    import gulp from 'gulp';
import print from 'gulp-print';
import concat from 'gulp-concat';
import sass from 'gulp-sass';
import uglify from 'gulp-uglify';
import notify from 'gulp-notify';
import size from 'gulp-size';
import fileSize from 'gulp-filesize';
import dartCompiler from 'dart-sass';
sass.compiler = dartCompiler;

    Quite pleased with the results, it was a justified switch! Had to go through some recommended SASS related improvements thanks to dart-sass, but in the end, it was worth the extra effort:

    Ruby Sass 3.7.3 produced a CSS file size: 169.2 kB (169,215 bytes)
    gulp-sass 4.0.2 with node-sass 4.11.0 compiler: 170.4 kB (170,382 bytes)
    gulp-sass 4.0.2 with dart-sass 1.17.2 compiler: 168.9 kB (168,898 bytes)

    Please note: your needs may be different and you should consider accordingly