Grunt.js: Getting Started

2 weeks ago, I finally took the step to grunt.js, and I love it. I'm not that busy with front-end development for the moment so that might explain why I haven't had the opportunity to use grunt. But 2 weeks ago I received a small Front-end task and saw the opportunity. I was checking 24ways, and saw the awesome tutorial by Chris Coyier.

This tutorial helped me diving into grunt and made it a very easy process as well. I used following plug-ins:

grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');

with following watch setup:

watch: {
    options: {
        livereload: true,
    },
    scripts: {
       files: ['js/*.js'],
            tasks: ['concat', 'uglify'],
            options: {
            spawn: false,
        },
    },
    css: {
        files: ['css/*.css'],
        tasks: ['concat','cssmin'],
        options: {
            spawn: false,
        },
    }
} 

This way, grunt monitors my css & js files, and minifies & concatenates all the files when there is a change in one of the files. This makes it very easy to still work in your nicely divided files, without having to adapt the html to include all these files.

So yeah ... I like grunt.js as well :D