Grunt vs NPM

grunt-vs-npm

/**
 * After reading a few articles
 * (http://substack.net/task_automation_with_npm_run)
 * (http://blog.keithcirkel.co.uk/why-we-should-stop-using-grunt/)
 * and discussing with other developers on Twitter
 * (@benhowdle, @_mikefrancis,@zachmayberry)
 * I put together a replacement of my current Grunt workflow using npm via
 * package.json using npm cli plugins instead of grunt specific plugins.
 * 
 * I found that several grunt plugins were just wrappers for npm mopdules, 
 * so it turned out to be easier than expected.
 */
 
 /**
  * Gruntfile.js
  */
  
  module.exports = function(grunt) {
    require('time-grunt')(grunt);
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        sass: {
            dist: {
                options: {
                    sourcemap: 'auto',
                    style: 'expanded',
                    precision: 10
                },
                files: {
                    'style.css': 'assets/sass/style.scss',
                }
            }
        },
        watch: {
            scss: {
                files: 'assets/sass/**/*.scss',
                tasks: ['sass','notify:watchsass'],
                options: {
                    livereload: false
                }
            },
            markup: {
                files: '**/*.php'
            },
            js: {
                files: [
                    'assets/js/**/*.js',
                    '!assets/js/min/*.js'
                ],
                tasks: ['concat','uglify','notify:watchjs']
            },
            options: {
                spawn: false,
                livereload: true
            }
        },
        concat: {
            options: {
                separator: '\n/* nf */\n'
            },
            dist: {
                src: [
                    'assets/js/min/scripts.min.js',
                ],
                dest: 'assets/js/min/scripts.min.js'
            }
        },
        uglify: {
            options: {
                banner: '/*Build date/time <%= grunt.template.today("dd/mm/yyyy h:MM:ss") %>*/\n'
            },
            all: {
                files: { 'assets/js/min/scripts.min.js':'assets/js/min/scripts.min.js'}
            }
        },
        notify: {
            watchsass: {
                options: {
                    title: 'Compile Complete',
                    message: 'SASS compiled successfully'
                }
            },
            watchjs: {
                options: {
                    title: 'JS Minify Complete',
                    message: 'Scripts successfully concatenated and minified'
                }
            },
            images: {
                options: {
                    title: 'Image minimising complete',
                    message: 'All images within source directory succesfully minified'
                }
            }
        },
        autoprefixer: {
            single_file: {
                options: {
                     browsers: ['last 10 version']
                },
                src: 'style.css',
                dest: 'style.css'
            }
        },
        imagemin: {
            options: {
                optimizationLevel: 3
            },
            build: {
                files: [{
                    expand: true,
                    cwd: 'assets/imgs/',
                    src: ['**/*.{png,jpg,gif,ico}'],
                    dest: 'assets/imgs/'
                }]
            }
        },
        svg2png: {
            all: {
                files: [{ 
                    cwd: 'assets/imgs/', 
                    src: ['**/*.svg'], 
                    dest: 'assets/imgs/' 
                }]
            }
        },
        pixrem: {
            options: {
                rootvalue: '62.5%',
            },
            dist: {
                src: 'style.css',
                dest: 'style.css'
            }
        },
        browserify: {
            'assets/js/scripts.min.js': ['assets/js/scripts.js'] // dest/src
        }
    });

    grunt.registerTask('default', [], function () { 
        grunt.loadNpmTasks('grunt-contrib-watch');
        grunt.loadNpmTasks('grunt-contrib-sass');
        grunt.loadNpmTasks('grunt-autoprefixer');
        grunt.loadNpmTasks('grunt-pixrem');
        grunt.loadNpmTasks('grunt-notify');

        grunt.task.run('watch','autoprefixer','pixrem');
    });

    grunt.registerTask('minifyjs', [], function () {
        grunt.loadNpmTasks('grunt-contrib-concat');
        grunt.loadNpmTasks('grunt-contrib-uglify');
        grunt.loadNpmTasks('grunt-notify');

        grunt.task.run('concat','uglify');
    });

    grunt.registerTask('jsbuild', [], function () {
        grunt.loadNpmTasks('grunt-browserify');
        grunt.loadNpmTasks('grunt-notify');

        grunt.task.run('browserify');
    });

    grunt.registerTask('images', [], function () {
        grunt.loadNpmTasks('grunt-contrib-imagemin');
        grunt.loadNpmTasks('grunt-svg2png');
        grunt.loadNpmTasks('grunt-notify');
        
        grunt.task.run('imagemin','svg2png','notify:images');
    });
}
  
/**
 * package.json pure npm version that more or less deos the same thing
 * (currently missing grunt-time equivilant and pixrem)
 * 
 */
  
{
  "name": "Flexbones",
  "version": "0.1.0",
  "description": "Flexbones script running in a post Grunt world",
  "scripts": {
    "compile-sass": "node-sass assets/sass/style.scss style.css",
    "concat": "concat-cli --files assets/js/**/*.js --output scripts.min.js",
    "uglify-js": "uglifyjs scripts.min.js -o scripts.min.js",
    "build-js": "npm run concat && npm run uglify-js",
    "optimise-images": "imageoptim -d assets/imgs",
    "svg-to-png": "svg2png assets/imgs",
    "livereload": "livereload",
    "build-images": "npm run svg-to-png && npm run optimise-images",
    "watch-sass": "fsmonitor -d 'assets/sass' -s '+*.scss' npm run compile-sass",
    "watch-js": "fsmonitor -d 'assets/js' -s '+*.js' npm run build-js",
    "watch": "npm run livereload & npm run watch-sass && npm run watch-js"
  },
  "devDependencies": {
    "autoprefixer": "^4.0.0",
    "browserify": "^6.3.2",
    "concat": "^1.0.0",
    "concat-cli": "^1.0.0",
    "fsmonitor": "^0.2.4",
    "imageoptim-cli": "^1.11.4",
    "node-sass": "^1.2.3",
    "npm-watch": "0.0.0",
    "pixrem": "^0.1.4",
    "sass": "^0.5.0",
    "svg2png": "^1.1.0",
    "svg2png-cli": "^1.1.1",
    "uglify-js": "^2.4.15"
  }
}
  

Switched to node-sass because it is 1000x faster and I didn't realise it was working well now with maps.