HTML/CSS/JS 編集時にライブリロードさせるための基本的な Grunt スクリプトの例

gistfile1.js

"use strict";

var hostname      = "localhost";
var port          = 8000;

// File Path
var webroot       = ".";
var htmlFiles     = ["**/*.html", "**/*.md", "!_site/**/*.html"];
var jsFiles       = ["**/*.js", "!**/*.min.js"]
var jshintFiles   = jsFiles;
var cssFiles      = ["**/*.css", "!**/*.min.css"];
var lessFiles     = ["**/*.less"];
var allFiles      = [].concat(htmlFiles, jsFiles, cssFiles, lessFiles);

// http://www.jshint.com/docs/
var jshintOption  = {
  asi: true,
  es5: true,
  esnext: true,
  globalstrict: true,
  globals: {
    "require": false,
    "module": false
  }
}

var path = require("path");
//var livereloadSnippet = require("grunt-contrib-livereload/lib/utils").livereloadSnippet;
var livereloadSnippet = require("./node_modules/grunt-contrib/node_modules/grunt-contrib-livereload/lib/utils").livereloadSnippet;

module.exports = function(grunt) {
  grunt.initConfig({
    // JS Lint
    jshint: {
      options: jshintOption,
      Gruntfile: ["Gruntfile.js"],
      js: jshintFiles
    },
    
    // JavaScript 最小化
    uglify: {
      options: {
        preserveComments: false,
        //banner: "/*! <%= pkg.name %> <%= grunt.template.today('yyyy-mm-dd') %> */\n"
        banner: "/*! Uglified on <%= grunt.template.today('yyyy-mm-dd') %> */\n"
      },
      all: {
        files: [
          {
            expand: true,
            src: jsFiles,
            dest: ".",
            ext: ".min.js"
          }
        ]
      },
      changed: {
        files: [
          {
            expand: true,
            src: '<%= grunt.regarde.changed %>',
            dest: ".",
            ext: ".min.js"
          }
        ]
      }
    },
    
    // CSS 最小化
    cssmin: {
      all: {
        files: [
          {
            expand: true,
            src: cssFiles,
            dest: ".",
            ext: ".min.css"
          }
        ]
      },
      changed: {
        files: [
          {
            expand: true,
            src: '<%= grunt.regarde.changed %>',
            dest: ".",
            ext: ".min.css"
          }
        ]
      }
    },
    
    // LESS コンパイル
    less: {
      all: {
        options: {
          yuicompress: true
        },
        files: [
          {
            expand: true,
            src: lessFiles,
            dest: ".",
            ext: ".min.css"
          }
        ]
      },
      changed: {
        options: {
          yuicompress: true
        },
        files: [
          {
            expand: true,
            src: '<%= grunt.regarde.changed %>',
            dest: ".",
            ext: ".min.css"
          }
        ]
      }
    },
        
    // Web サーバを起動
    connect: {
      server: {
        options: {
          hostname: hostname,
          port: port,
          base: webroot,
          keepalive: true
        }
      },
      livereload: {
        options: {
          hostname: hostname,
          port: port,
          //base: webroot,
          
          middleware: function(connect, options) {
            return [
              livereloadSnippet,
              connect.static(path.resolve(webroot))
            ];
          }
        }
      }
    },
    
    // ファイルを監視してライブリロード
    regarde: {
      js: {
        files: jsFiles,
        tasks: ["uglify:changed", "livereload"]
      },
      css: {
        files: cssFiles,
        tasks: ["cssmin:changed", "livereload"]
      },
      less: {
        files: lessFiles,
        tasks: ["less:changed", "livereload"]
      },
      html: {
        files: htmlFiles,
        tasks: ["livereload"]
      }
    }
  
  });

  // https://github.com/gruntjs/grunt-contrib
  grunt.loadNpmTasks("grunt-contrib");
  grunt.loadNpmTasks("grunt-regarde");

  // Default task(s).
  grunt.registerTask("generate", ["uglify:all", "cssmin:all", "less:all"]);  
  grunt.registerTask("live", ["livereload-start", "connect:livereload", "regarde"]);
  grunt.registerTask("default", ["livereload-start", "connect:livereload", "regarde"]);
};