angular • libsass • grunt

Moving Angular generator to use libsass

I really like Yeoman AngularJS Generator, but there are 2 things that kinda bother me on the generator: 1. The naming convention (which I’m not going into details in this post) 2. The compass sass compiler

Compass itself is not a bad tool, but if you are someone like me who don’t take advantage of it’s full features, and just want the basics, you can stick with libsass, which is a C/C++ sass compiler.

Why would I switch from Compass to libsass?

Speed.

Updating css files and waiting over 2 seconds to have Compass recompile is too long of a wait for me.

Here is the speed comparson between both of them on the same code base:

  • Compass: 1.4s
  • libsass: 120ms

That’s 11x faster.

That comparison was made on a fresh generated angular app, which included sass version of bootstrap. My computer is a late 2013 MacBook Pro Retina, with Intel Core i5 2.4GHz, 16hb RAM and SSD.

Move existing angular generated project from Compass to libsass

Based on the Yeoman Webapp generator (that gives you an option to use libsass), here is how to switch your existing code from using Compass to libsass.

install libsass

Simply run npm install --save-dev grunt-sass

update grunt file

Task configuration

Remove the compass configuration

// Compiles Sass to CSS and generates necessary files if requested
compass: {
  options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/styles',
    generatedImagesDir: '.tmp/images/generated',
    imagesDir: '<%= yeoman.app %>/images',
    javascriptsDir: '<%= yeoman.app %>/scripts',
    fontsDir: '<%= yeoman.app %>/styles/fonts',
    importPath: './bower_components',
    httpImagesPath: '/images',
    httpGeneratedImagesPath: '/images/generated',
    httpFontsPath: '/styles/fonts',
    relativeAssets: false,
    assetCacheBuster: false,
    raw: 'Sass::Script::Number.precision = 10\n'
  },
  dist: {
    options: {
      generatedImagesDir: '<%= yeoman.dist %>/images/generated'
    }
  },
  server: {
    options: {
      debugInfo: true
    }
  }
},

and add the libsass configuration instead:

// Compiles Sass to CSS and generates necessary files if requested
    sass: {
        options: {
            includePaths: [
                'bower_components'
            ]
        },
        dist: {
            files: [{
                expand: true,
                cwd: '<%= yeoman.app %>/styles',
                src: ['*.scss'],
                dest: '.tmp/styles',
                ext: '.css'
            }]
        },
        server: {
            files: [{
                expand: true,
                cwd: '<%= yeoman.app %>/styles',
                src: ['*.scss'],
                dest: '.tmp/styles',
                ext: '.css'
            }]
        }
    },


#### Watcher task Remove sass from the watcher task

compass: {
    files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
    tasks: ['compass:server', 'autoprefixer']
  },

and add

sass: {
    files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
    tasks: ['sass:server', 'autoprefixer']
  },

on the same place.


Update concurrent task

// Run some tasks in parallel to speed up the build process
concurrent: {
  server: [
    'compass:server'
  ],
  test: [
    'compass'
  ],
  dist: [
    'compass:dist',
    'imagemin',
    'svgmin'
  ]
},

to

// Run some tasks in parallel to speed up the build process
concurrent: {
  server: [
    'sass:server',
    'copy:styles'
  ],
  test: [
    'copy:styles'
  ],
  dist: [
    'sass',
    'copy:styles',
    'imagemin',
    'svgmin'
  ]
},

That should do the trick. If you are not using any unsupported libsass funcionality your project should be able to run serve and build without issues.