Tuesday, February 16, 2016

Grunt: sass, scss, autoprefixer, cssmin, and watch Notes with Sample Files

Example Gruntfile.js

module.exports = function(grunt) {
    'use strict'

    var processdate = (new Date).toString();

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        //Watch objects
        //----------------------------------
        watch: {
            scripts: {
                files: ['scss/**/*.scss'],
                tasks: ['sass','autoprefixer','cssmin'],
                options: {
                    interval: 500,
                    spawn: false
                }
            }
        },

        sass: {
            options: {
                includePaths: require('node-bourbon').includePaths,
                outputStyle: 'nested',  // Values: 'nested', 'compressed'
                precision: 3,
                sourceMap: true, // Without this being true the resulting map file isn't linked at the bottom of the generated .css file
                sourceMapEmbed: false,
                sourceComments: false
            },
            dist: {
                files: {
                    'global.css': ['scss/master.scss']
                }
            }
        },

        //Plugins
        //----------------------------------
        autoprefixer: {
            options: {
                browsers: ['last 2 versions'],
                cascade: false,
                map: {
                    prev: false,
                    inline: false,
                    annotation: false,
                    sourcesContent: false
                }
            },
            multiple_files: {
                src: 'global.css',
                dest: 'global.css'
            }
        },

        cssmin: {
            add_banner: {
                options: {
                    banner: '/* Author: **Your Name\n * Created: 2016-02-16\n * Last Updated: '+processdate+'\n */'
                },
                files: {
                    'global.min.css': ['global.css']
                }
            }
        }

    });


    //Load NPM Tasks
    //----------------------------------
    grunt.loadNpmTasks ('grunt-contrib-watch');
    grunt.loadNpmTasks ('grunt-sass');
    grunt.loadNpmTasks ('grunt-autoprefixer');
    grunt.loadNpmTasks ('grunt-contrib-cssmin');


    grunt.registerTask('default', ['sass','autoprefixer','cssmin']);
    grunt.registerTask('c', ['sass']);  // c=compile
    grunt.registerTask('w', ['watch']);

};


Example package.json:

{
    "name": "grunt",
    "version": "0.1.1",
    "private": true,
    "devDependencies": {
        "grunt": "latest",
        "grunt-autoprefixer": "latest",
        "grunt-contrib-cssmin": "latest",
        "grunt-contrib-watch": "latest",
        "grunt-sass": "latest",
        "node-bourbon": "latest"
    }
}


Example master.scss:

// Manually list all files to be included in specific order, skip .scss extensions
@import "./fonts";
@import "./variables";
@import "./base";
@import "./layout";
@import "./partials";
@import "./global";


And then command line:

$ npm update
$ npm install
$ grunt
$ grunt w



That's it.

Better JS functions than previous attempts at similar functionality

Some code notes for later reference:


A better number formatting function:
            function toDecimal (number) {  // CREDITS: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
                return number.toLocaleString("en-US",{ style: 'decimal', minimumIntegerDigits: 1, maximumFractionDigits: 2, minimumFractionDigits: 2 });
            };



A better currency format function:
            function toDollar (number) {  // CREDITS: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
                return number.toLocaleString("en-US",{ style: 'currency', currency: 'USD' });
            };



I've always wanted a good one of these:
            function guid () {  // CREDITS: http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
                function s4() {
                    return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
                }
                return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
            };