grunt post

concat.js

module.exports = {
  options: {
    separator: ';'
  },
  dist: {
    src: ['src/**/*.js'],
    dest: 'dist/<%= pkg.name %>.js'
  }
}

example_task.js

module.exports = function(grunt) {
  grunt.registerTask('helloWorld', 'Say hello!', function() {
    grunt.log.writeln("Hello world!");
  });
};

load_config.js

function loadConfig(path) {
  var glob = require('glob');
  var object = {};
  var key;
 
  glob.sync('*', {cwd: path}).forEach(function(option) {
    key = option.replace(/\.js$/,'');
    object[key] = require(path + option);
  });
 
  return object;
}

load_config_usage.js

var config = {
  pkg: grunt.file.readJSON('package.json'),
  env: process.env
};
 
grunt.util._.extend(config, loadConfig('./tasks/options/'));
 
grunt.initConfig(config);

load_grunt_tasks.js

require('load-grunt-tasks')(grunt);

load_npm_tasks.js

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

load_tasks.js

grunt.loadTasks('tasks');

traditional_gruntfile.js

module.exports = function(grunt) {
 
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
    qunit: {
      files: ['test/**/*.html']
    },
    jshint: {
      files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        // options here to override JSHint defaults
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint', 'qunit']
    }
  });
 
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
 
  grunt.registerTask('test', ['jshint', 'qunit']);
 
  grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
 
};

Awesome!

The only thing I had a problem with was require glob and needing to add :

"glob": "~3.2.1"  

to my devDependencies

Thanks a lot for this tutorial.

For reference: npm install -D glob on your project should do it. Thanks guys.

Would somebody mind elaborating a bit on the grunt.loadTasks('tasks'); line please..?

I found this section in the official docs, but it doesn't give any explanation of how the files inside said 'tasks' folder should be structured. Simply moving my custom tasks into a tasks/example.js file doesn't seem to work. :/

Shameful edit: Uh, so I just noticed the example I couldn't find is already covered in the example_task.js file. Apologies.. :)

Only one question. I have something like this:

module.exports = {
options: function(path){
//do something with path
}
}

I want path to be a property of the config object, and use it here. Is it possible? I mean:

var config = {
pkg: grunt.file.readJSON('package.json'),
env: process.env,
path: "/dir1/dir2"
};

Is that possible?

A question from me too:

example_task.js - my task calls other tasks:

  module.exports = function(grunt) {
    grunt.registerTask('styleguide', function() {
      'string-replace:styleguide',
      'clean:styleguide_data',
      'copy:styleguide',
      'kss', // note: kss:styleguide fails here, otherwise I would use this convention for consistency
      'clean:styleguide_data_public'
    });
  };

If i enable the --verbose flag I can see that my styleguide task is registered, as are my other tasks listed in the options folder.

  ...

  Registering "grunt-string-replace" local Npm module tasks.
  Reading /Users/Dan/Websites/xxx/trunk/htdocs/sites/all/themes/xxx/node_modules/grunt-string-replace/package.json...OK
  Parsing /Users/Dan/Websites/xxx/trunk/htdocs/sites/all/themes/xxx/node_modules/grunt-string-replace/package.json...OK
  Loading "string-replace.js" tasks...OK
  + string-replace

  Registering "tasks" tasks.
  Loading "styleguide_task.js" tasks...OK
  + styleguide
  Reading package.json...OK
  Parsing package.json...OK
  Initializing config...OK
  Loading "Gruntfile.js" tasks...OK
  >> No tasks were registered or unregistered.

However no styleguide is generated.

Is it possible to run the tasks in the way I have been doing? Or can you suggest another way?

Thanks.

Ah, my bad, the syntax I wanted (and had, until I copied your code without thinking) was:

  module.exports = function(grunt) {
      grunt.registerTask('styleguide', [
        'string-replace:styleguide',
        'clean:styleguide_data',
        'copy:styleguide',
        'kss', // note: kss:styleguide fails here, otherwise I would use this convention for consistency
        'clean:styleguide_data_public'
      ]);
    };

Cheers.

I have one other question:

Some of my grunts are fairly detailed to set up. So I plan to have them on Github so I can pull them down without having to remember how to set them up.

Is it possible to adapt the script to have a separate options folder for each task, or to append the grunt name to the task filename?

  styleguide_task.js
  |- clean_styleguide.js
  |- copy_styleguide.js

Then I could just merge the existing tasks and options folder when importing my preconfigured ones.

Note that I might want to have several grunts using the same tasks (copy being used one way for one grunt and another way for a different grunt).

Thanks.

I think this tutorial could be improved by including a repository that shows the directory layout.

I'm familiar with Grunt, but following the step-by-step instructions, I somehow missed wrapping my Gruntfile.js in a module.exports. Maybe complete files would help.

Other than that, this was very helpful! Thank you for putting this together.