Sass - Task Runner

Sass Watch Articles.

Supplementary Article for Windows User.

Local Group

Preface

Goal: Transform Sass into CSS using Task Runner.

Prepare Example Sass

I’m still using Sass project from the previous example. The oriclone theme, from demo hugo.

Table of Content

Preface: Table of Content
1: Gulp
2: Grunt
3: Webpack
What is Next ?

1: Gulp

Gulp is NodeJS package. You need gulp package, gulp-sass, and node-sass.

Reading

The official Site is

gulpjs.com

Install

You might do differently using –save-dev.

$ npm install -g gulp
$ npm install -g gulp-sass

npm: install gulp

and

npm: install gulp-sass

Note that we have already install node-sass, in previous article.

Config

I have made a gulpfile.js to handle only Sass compilation to CSS.

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassOptions = {
    includePaths: ['sass'],
    outputStyle: 'compressed'
  };

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

//compile
gulp.task('sass', function () {
  return gulp.src('sass/themes/oriclone/*.scss')
    .pipe(sass(sassOptions).on("error", sass.logError))
    .pipe(gulp.dest('static/assets/css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('sass/themes/oriclone/*.scss', gulp.series('sass'));
});

gulp: config gulpfile.js

Issue with Gulp

If you run gulp, gulp will complain about local gulp something.

$ gulp watch:sass
Local gulp not found in ...

This can be solved with npm link.

$ npm link node-sass gulp gulp-sass
/media/Works/sites/oriclone/node_modules/gulp-sass -> /home/epsi/.npm-global/lib/node_modules/gulp-sass
/media/Works/sites/oriclone/node_modules/gulp -> /home/epsi/.npm-global/lib/node_modules/gulp
/media/Works/sites/oriclone/node_modules/node-sass -> /home/epsi/.npm-global/lib/node_modules/node-sass

npm: link packages

Now the gulp will run just fine.

Command

Command argument in Gulp, is following your config.

$ gulp watch:sass

Consider change any of the sass file, then save to trigger the watch action in gulp.

gulp: watch in action

2: Grunt

Grunt is NodeJS package. You need grunt package, and optionally node-sass.

Reading

The official Site is

gruntjs.com

Install

You might do differently using –save-dev.

$ npm install -g grunt

npm: install grunt

Config

I have made a Gruntfile.js to handle only Sass compilation to CSS.

module.exports = function(grunt) {

  grunt.initConfig({
    sass: {                              // Task
      dist: {                            // Target
        options: {                       // Target options
          style: 'compressed',
          loadPath: ['sass'],
          sourcemap: 'none'
        },
        files: [{
          expand: true,
          cwd: 'sass/themes/oriclone',
          src: ['*.scss'],
          dest: 'static/assets/css',
          ext: '.css'
        }]
      }
    },
    watch: {
      css: {
        files: 'sass/themes/oriclone/*.scss',
        tasks: ['sass']
      }
    }
  });
 
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
 
  grunt.registerTask('default', ['watch', 'sass']);

};

grunt: config Gruntfile.js

Command

Command argument in Grunt, is following your config.

$ grunt watch

Consider change any of the sass file, then save to trigger the watch action in grunt.

grunt: watch in action

3: Webpack

Webpack is a bundler. Not just a task runner.

Reading

The official Site is

webpack.js.org/

Install

Using –save-dev, in project directory.

$ npm install -D node-sass webpack webpack-cli extract-text-webpack-plugin@next css-loader sass-loader style-loader url-loader file-loader

npm: install webpack: top

And after long lines and processing time, we will have:

npm: install webpack: bottom

Bundler vs Task Runner

We just cannot expect bundler to behave like task runner, because of different concept they have.

In my example, I move the image assets, into source directory. And bundler will generate image assets required in destination path. And will not generate unneeded image assets.

Config

I have made a webpack.config.js, to handle Sass compilation to CSS.

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    'bootstrap.css': './sass/themes/oriclone/bootstrap.scss',
    'fontawesome.css': './sass/themes/oriclone/fontawesome.scss',
    'main.css': './sass/themes/oriclone/main.scss'
  },
  output: {
	path: path.resolve(__dirname, 'static/assets')
  },
  module: {
    rules: [{
      test    : /\.(png|jpg|svg|gif)$/,
      use: [{
        loader: 'file-loader',
        options: { 
          name: 'images/[name].[ext]'
        } 
      }]
    },{
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          { loader: 'css-loader' },
          { loader: 'sass-loader',
            options: {
              includePaths: ["sass"]
            }
          },
        ]
      })
    }]
  },
  plugins: [
    new ExtractTextPlugin('css/[name]'),
  ]
};

webpack: config webpack.config.js

Command

Running webpack command in Webpack.

$ webpack --mode production

webpack: build in action

I must admit, I’m a n00b, where it comes to webpack. I do not know much about how to configure webpack in daily life.

What is Next ?

There are other method as well using Builder such as Brunch or Broccolli. And using bundler such as Parcel. But I think it is enough for now.

There is other article, that you might need to read. Consider continue reading [ Windows - Chocolatey - Sass ].

Thank you for reading.