Grunt针对静态文件的压缩,版本控制打包的实例讲解

module.exports = function (grunt) {
 require('load-grunt-tasks')(grunt);

 var path = {
  src : 'test',
  dest : 'dist',
 }

 grunt.initConfig({
  path : path,
  clean : {//清空生产文件夹
   beforebuild : {
    files : [{
      src : ['<%= path.dest %>/']
     }
    ]
   }
  },
  filerev : {//对css和js文件重命名
   build : {
    files : [{
      src : ['<%= path.dest %>/**', 
      '!<%= path.dest %>/page/*.html',//html文件不加版本号
      '!<%= path.dest %>/**/*.{png,jpg,jpeg}']//图片 不需要加版本号
     }
    ]
   }
  },
  useminPrepare : {//声明concat、cssmin、uglify
   build : {
    files : [{     
      src : '<%= path.src %>/page/*.html'
     }
    ],
    
   }
  },
  usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : '<%= path.dest %>/page/*.html'
     }
    ]
   }
  },
  copy : {//复制文件
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : ['**/*.*'],//相对于cwd路径的匹配模式。意思就是 src/**/*.*，匹配src下面所有文件
      dest : '<%= path.dest %>/'//目标文件路径前缀。
     }
    ]
   }
  },
  cssmin :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : ['css/*.css'],//相对于cwd路径的匹配模式。意思就是 src/**/*.css，匹配src下面所有css文件
      dest : '<%= path.dest %>/'//目标文件路径前缀。
     }
    ]
   }
  },
  uglify :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : ['js/*.js'],//相对于cwd路径的匹配模式。意思就是 src/**/*.js，匹配src下面所有js文件
      dest : '<%= path.dest %>/'//目标文件路径前缀。
     }
    ]
   }
  },
 });
 grunt.registerTask('default', ['clean:beforebuild', 'copy', 'cssmin', 'uglify','filerev', 'usemin']);
};

var path = {
  src : 'test',
  dest : 'dist',
 }

copy : {//复制文件
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : ['**/*.*'],//相对于cwd路径的匹配模式。意思就是 src/**/*.*，匹配src下面所有文件
      dest : '<%= path.dest %>/'//目标文件路径前缀。
     }
    ]
   }
  },

cssmin :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : ['css/*.css'],//相对于cwd路径的匹配模式。意思就是 src/**/*.css，匹配src下面所有文件
      dest : '<%= path.dest %>/'//目标文件路径前缀。
     }
    ]
   }
  },

uglify :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : '<%= path.src %>/',//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : ['js/*.js'],//相对于cwd路径的匹配模式。意思就是 src/**/*.js，匹配src下面所有文件
      dest : '<%= path.dest %>/'//目标文件路径前缀。
     }
    ]
   }
  },

filerev : {//对css和js文件重命名
   build : {
    files : [{
      src : ['<%= path.dest %>/**', 
      '!<%= path.dest %>/page/*.html',//html文件不加版本号
      '!<%= path.dest %>/**/*.{png,jpg,jpeg}']//图片 不需要加版本号
     }
    ]
   }
  },

usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : '<%= path.dest %>/page/*.html'
     }
    ]
   }
  },

usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : '<%= path.dest %>/page/*.html'
     }
    ]
   },
   css :{
    files : [{
      src : '<%= path.dest %>/css/*.css'
     }
    ]
   }
  },

clean : {//清空生产文件夹
   beforebuild : {
    files : [{
      src : ['<%= path.dest %>/']
     }
    ]
   }
  },

grunt.registerTask('default', ['clean:beforebuild', 'copy', 'cssmin', 'uglify','filerev', 'usemin']);

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

grunt.loadNpmTasks('xxx');