Example Gruntfile.js for Five Good Reasons to Use Grunt for Front End CQ Development

Gruntfile.js

'use strict';

module.exports = function (grunt) {

  // Show elapsed time after tasks run
  require('time-grunt')(grunt);

  // Load all Grunt tasks
  require('load-grunt-tasks')(grunt);

  grunt.initConfig({
    // Configurable paths
    pathTo: {
      jcrRoot: 'project-name-core/project-name-core-ui/src/main/content/jcr_root/',
      projectDesigns: 'etc/designs/project-name/'
    },
    // use grunt-dev-update to check for out of date dependencies
    devUpdate: {
      check: {
        options: {
          reportUpdated: false,
          updateType: 'report'
        }
      }
    },
    // clean the generated icons directory that’s used with grunticon
    clean: {
      icons: ['<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>static/icons/dist/']
    },
    // compile project’s CSS
    less: {
      build: {
        files:{
          '<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>clientlibs/css/dist/application.css':
          '<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>clientlibs/css/source/application.less'
        }
      }
    },
    // add vendor prefixes to CSS
    autoprefixer: {
      options: {
        browsers: [
          'last 2 versions',
          'safari 6',
          'ie 8',
          'ie 9',
          'opera 12.1',
          'ios 6',
          'android 4'
        ]
      },
      build: {
        files:{
          '<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>clientlibs/css/dist/application.css':
          '<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>clientlibs/css/dist/application.css'
        }
      },
    },
    // minify CSS
    cssmin: {
      build: {
        files:{
          '<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>clientlibs/css/dist/application.min.css':
          '<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>clientlibs/css/dist/application.css'
        }
      }
    },
    // minify SVGs
    svgmin: {
      options: {
        plugins: [
          {
            removeViewBox: false
          }, {
            removeUselessStrokeAndFill: false
          }
        ]
      },
      build: {
        files: [{
          expand: true,
          cwd: '<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>static/icons/source/raw/',
          src: ['*.svg'],
          dest: '<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>static/icons/source/compressed/'
        }]
      }
    },
    // optimize images
    imagemin: {
      build: {
        files: [{
          expand: true,
          cwd: '<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>static/img/source',
          src: ['**/*.{png,jpg,gif}'],
          dest: '<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>static/img/dist'
        }]
      }
    },
    grunticon: {
      build: {
        files: [{
          expand: true,
          cwd: '<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>static/icons/source/compressed/',
          src: ['*.svg'],
          dest: '<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>static/icons/dist/'
        }]
      }
    },
    // concatenate our JS
    concat: {
      options: {
        separator: ';'
      },
      build: {
        src: ['<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>clientlibs/js/source/**/*.js'],
        dest: '<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>clientlibs/js/dist/application.js'
      }
    },
    // uglify our JS to reduce file size
    uglify: {
      build: {
        files: {
          '<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>clientlibs/js/dist/application.min.js': ['<%= concat.build.dest %>']
        }
      }
    },
    // lint our JS
    jshint: {
      options: {
        jshintrc: '.jshintrc',
        reporter: require('jshint-stylish')
      },
      all: ['<%= pathTo.jcrRoot %><%= pathTo.projectDesigns %>clientlibs/js/source/**/*.js']
    },
    watch: {
      author: {
        files: ['<%= pathTo.jcrRoot %>**/*.{css,xml,html,js,jsp,txt}'],
        tasks: ['slang:author'],
        options: {
          spawn: false
        }
      },
      publish: {
        files: ['<%= pathTo.jcrRoot %>**/*.{css,xml,html,js,jsp,txt}'],
        tasks: ['slang:publish'],
        options: {
          spawn: false
        },
      },
      less: {
        files: ['<%= pathTo.jcrRoot %>**/*.less'],
        tasks: ['less','autoprefixer']
      },
      js: {
        files: ['<%= jshint.all %>'],
        tasks: ['jshint']
      }
    },
    concurrent: {
      options: {
        logConcurrentOutput: true
      },
      author: [
        'watch:less',
        'watch:js',
        'watch:author'
      ],
      publish: [
        'watch:less',
        'watch:js',
        'watch:publish'
      ]
    },
    slang: {
      author: {
        options: {
          port: '4502'
        }
      },
      publish: {
        options: {
          port: '4503'
        }
      }
    }
  });

  grunt.event.on('watch', function(action, filepath, target) {
    grunt.config.set(['slang', 'author', 'src'], filepath);
    grunt.config.set(['slang', 'publish', 'src'], filepath);
  });

  grunt.registerTask('check', ['devUpdate','newer:jshint']);
  grunt.registerTask('css', ['less', 'autoprefixer', 'cssmin']);
  grunt.registerTask('icons', ['clean:icons', 'svgmin', 'grunticon', 'images']);
  grunt.registerTask('images', ['newer:imagemin']);
  grunt.registerTask('js', ['newer:jshint', 'concat', 'uglify']);
  grunt.registerTask('assets', ['css', 'icons', 'images', 'js']);
  grunt.registerTask('author', ['concurrent:author']);
  grunt.registerTask('publish', ['concurrent:publish']);
  grunt.registerTask('default', ['concurrent:author']);
};

Troubleshoot your tasks by including the --verbose (or -v) flag, which will output additional information about them.