Grunt前端打包工具实例

曾经的项目中接到过使用Grunt前端打包工具实现对js、css压缩混淆，对新增或者修改的js、css加版本号，并在引入了js、css的jsp中修改版本号的任务。时间比较久远，现在的Vue项目都是使用nodejs进行打包。毕竟当时废了一番功夫，记录一下。

首先列出使用的包有哪些：

{
  "devDependencies": {
    "grunt": "^0.4.1",
    "grunt-contrib-clean": "^1.0.0",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-cssmin": "^1.0.2",
    "grunt-contrib-nodeunit": "^1.0.0",
    "grunt-contrib-uglify": "^2.0.0",
    "grunt-debug": "0.0.3",
    "grunt-diff": "^0.1.5",
    "grunt-filerev": "^2.3.1",
    "grunt-text-replace": "^0.4.0",
    "grunt-usemin": "^3.1.1"
  },
  "dependencies": {
    "grunt-changes": "^0.1.2",
    "grunt-clean": "^0.4.0"
  }
}

然后看一下使用这些包的顺序和步骤：

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-filerev');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-usemin');
grunt.loadNpmTasks('grunt-text-replace');
grunt.loadNpmTasks('grunt-changes');
grunt.loadNpmTasks('grunt-diff');
// 默认被执行的任务