Beginner at using Grunt need some advice for my Gruntfile.js

Question

I'm new to setting up my own grunt, and this is what I have come up with. I was just wondering if someone could look it over and give me some hints/advice.

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        coffee: {
            compile: {
                expand: true,
                flatten: true,
                cwd: 'src/coffee',
                src: ['*.coffee'],
                dest: 'src/js/',
                ext: '.js'
            }
        },
        concat: {
            css: {
                src: [
                    'src/css/*'
                ],
                dest: 'css/.css'
            },
            js: {
                src: [
                    'src/js/*'
                ],
                dest: 'js/package.js'
            }
        },
        cssmin: {
            css: {
                src: 'css/package.css',
                dest: 'css/package.min.css'
            }
        },
        uglify: {
            js: {
                files: {
                    'js/package.min.js': ['js/package.js']
                }
            }
        },
        watch: {
            aspx: {
                files: ['*.aspx', '*.master']
            },
            css: {
                files: ['src/css/*'],
                tasks: ['concat:css', 'cssmin']
            },
            coffee: {
                files: ['src/coffee/*'],
                tasks: ['coffee:compile']
            },
            js: {
                files: ['src/js/*'],
                tasks: ['concat:js', 'uglify']
            },
            livereload: {
                files: ['*.aspx', '*.master', 'css/*.css', 'js/*.js'],
                options: { nospawn: true, livereload: true }
            }
       }
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-coffee');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.registerTask('default', ['coffee:compile','concat:css', 'cssmin:css', 'concat:js', 'uglify:js', 'watch']);
};

It does work, and reloads and compiles perfectly. I was just wondering if there may be a more effiecent way to handle this. Being my first gruntfile I know it is very far from perfect.

score 0 · Answer 1 · answered Jul 09 '14 at 14:37

I would recommend load-grunt-tasks in order to cut down on the complexity of the main Gruntfile.js. It's incredibly simple to use. It allows you to split up the Gruntfile.js into a number of smaller JS files stored in a separate Grunt folder, for example:

/root
  /Grunt
    cssmin.js
    coffee.js
    watch.js
    ...

And then your main Gruntfile.js to load in your tasks is simply, again for example:

module.exports = function (grunt) {
  require('load-grunt-tasks')(grunt);
}

It's all held together with YAML file called aliases.yaml that sits in the Grunt folder that details the Grunt commands and their associated processes. So with this in the YAML file:

lint:
  - clear
  - jshint
  - jscs

You could run grunt lint and it would run those tasks.

I've found it a) a complete lifesaver, and b) helped me understand Grunt at a whole different level.

I've made an example repo for you to help explain what I'm talking about. I hope it's of some help.

Beginner at using Grunt need some advice for my Gruntfile.js

1 Answers1