grunt example

Gruntfile.js

module.exports = function (grunt) {
  
    // LiveReload的默认端口号，你也可以改成你想要的端口号
    var lrPort = 35729;
    // 使用connect-livereload模块，生成一个与LiveReload脚本
    // <script src="http://127.0.0.1:35729/livereload.js?snipver=1" type="text/javascript"></script>
    var lrSnippet = require('connect-livereload')({ port: lrPort });
    // 使用 middleware(中间件)，就必须关闭 LiveReload 的浏览器插件
    var lrMiddleware = function(connect, options) {
        return [
            // 把脚本，注入到静态文件中
            lrSnippet,
            // 静态文件服务器的路径
            connect.static(String(options.base)),
            // 启用目录浏览(相当于IIS中的目录浏览)
            connect.directory(String(options.base))
        ];
    };
  
  // 项目配置
  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),
    // 发布目录
    releaseDir: '../build',

    concat: {
      options: {
        separator: ';',
        stripBanners: true,
        banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
        '<%= grunt.template.today("yyyy-mm-dd") %> */'
      },
      dist: {
        src: ['src/js/*.js'],
        dest: 'build/js/<%= pkg.name %>.js'
      }
    },

    uglify: {
      build: {
        files: [{
          expand: true,
          cwd: '0.2/assets/js',
          src: '*.js',
          dest: 'build/assets/js',
          ext:'.js'
        }],
        options: {
          banner: '/*! Creat by <%= pkg.author %> @<%= grunt.template.today("yyyy-mm-dd") %> */\n'
        }
      }
    },

    cssmin: {
      compress: {
        files: [{
          expand: true,
          cwd: '0.2/assets/style/css',
          src: '*.css',
          dest: 'build/assets/style/css',
          ext:'.css'
        }],
        options: {
          banner: '/*! Creat by <%= pkg.author %> @<%= grunt.template.today("yyyy-mm-dd") %> */\n'
        }
      }
    },

    imagemin: {
      dynamic: {
       files: [{
           expand: true,
           cwd: '0.2/assets/img',
           src: ['**/*.{png,jpg,gif}'],
           dest: 'build/assets/img/'               
       }],
       options: {
        //解决图片压缩0KB的Bug
        cache: false
       }

      }
    },

    htmlhint: {
      build: {
          options: {
              'tag-pair': true,
              'tagname-lowercase': true,
              'attr-lowercase': true,
              'attr-value-double-quotes': true,
              'spec-char-escape': true,
              'id-unique': true,
              'head-script-disabled': true,
          },
          src: ['0.2/pages/*.html']
      }
    },

    copy: {
      pages: {
        expand: true,
        cwd: '0.2/pages/',
        src: '*.html',
        dest: 'build/pages',
        flatten: true,
        filter: 'isFile',
      },
      iconfonts: {
        expand: true,
        cwd: '0.2/assets/iconfont',
        src: '*',
        dest: 'build/assets/iconfont',
        flatten: true,
        filter: 'isFile',
      }
    },

    less: {
      options: {
        paths: ['0.2/assets/style']
      },
      files: {
          expand: true,
          cwd: '0.2/assets/style/less',
          src: '*.less',
          dest: '0.2/assets/style/css',
          ext: '.css'
      }
      
    },

    // for livereload
    connect: {
      options: {
        // 服务器端口号
        port: 8080,
        hostname: 'localhost',
        base: '.'
      },
      livereload: {
        options: {
            // 通过LiveReload脚本，让页面重新加载。
            middleware: lrMiddleware
        }
      }
    },
    // 监控文件变化, 然后 打包/刷新浏览器
    watch: {
      html: {
        files: ['0.2/pages/*.html'],
        tasks: ['newer:htmlhint']
      },
      less: {
        files: ['0.2/assets/style/less/*.less'],
        // newer只监测新增文件
        tasks: ['newer:less']
      },
      javascript: {
        files: ['*.js'],
        tasks: ['newer:jshint']
      },
      livereload: {
          // 我们不需要配置额外的任务，watch任务已经内建LiveReload浏览器刷新的代码片段。
          options: {
              livereload: lrPort
          },
          // '**' 表示包含所有的子目录
          // '*' 表示包含所有的文件
          files: ['0.2/pages/*','0.2/assets/**/*','!0.2/assets/style/css/*.css'],
      }
    },

    jshint: {
      // define the files to lint
      files: ['gruntfile.js', '0.2/**/*.js'],
      // configure JSHint (documented at http://www.jshint.com/docs/)
      options: {
          // more options here if you want to override JSHint defaults
        globals: {
          //大括号包裹
          curly: true,
          //对于简单类型，使用===和!==，而不是==和!=
          eqeqeq: true,
          //对于属性使用aaa.bbb而不是aaa['bbb']
          sub: true,
          //查找所有未定义变量
          undef: true,
          //查找类似与if(a = 0)这样的代码
          boss: true,
          jQuery: true,
          console: true,
          module: true
        }
      }
    }
  });

  // 加载提供任务的插件
  //JS合并工具
  grunt.loadNpmTasks('grunt-contrib-concat');
  //JS压缩工具
  grunt.loadNpmTasks('grunt-contrib-uglify');
  //JS语法检查工具
  grunt.loadNpmTasks('grunt-contrib-jshint');
  //less编译工具
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-watch');
  //监测当个文件修改
  grunt.loadNpmTasks('grunt-newer');
  //图片压缩工具
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  //CSS压缩工具
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  //html语法检查
  grunt.loadNpmTasks('grunt-htmlhint');
  //拷贝文件
  grunt.loadNpmTasks('grunt-contrib-copy');

  // build
  grunt.registerTask('build', ['less','uglify','cssmin','imagemin','copy']);
  //默认任务为Build
  grunt.registerTask('default', ['build']);
  // livereload, 监控文件修改, 然后刷新浏览器
  grunt.registerTask('live', ['connect', 'watch']);
  
  
};

有很大帮助，谢谢啦