npm install -g grunt-cli
npm init -y
npm install grunt --save-dev
grunt 安装完毕
Gruntfile干这几件事情
1、包装函数 module.exports = function(grunt) {}
2、项目/任务配置 initConfig（）
3、加载插件 loadNpmTasks（）
4、注册任务 registerTask（）
项目/任务配置中干这几件事情
1、将配置文件读出，并且转换为json对象 pkg: grunt.file.readJSON('package.json')
2、配置一些命名性属性比如：uglify
1、在src中找到目标文件进行压缩
2、找到要导出的目录，没有就新建，将压缩文件放进去
3、在上面加几个描述语言
综上：我们使用grunt时，主要工作就是配置或者注册任务，实际上就是在做一个事件注册，由我们来触发
文件头部加一段注释性语言配置banner信息options: {banner:'/*! 注释信息 */'}
npminstallgrunt-contrib-uglify--save-dev//安装压缩插件grunt.loadNpmTasks('grunt-contrib-uglify');//引入压缩插件
npm install grunt-contrib-concat--save-dev//安装合并插件grunt.loadNpmTasks('grunt-contrib-concat');//引入压缩插件
npm install grunt-contrib-cssmin --save-devnpm install grunt-contrib-htmlmin --save-dev
npminstallgrunt-contrib-watch--save-dev//监听grunt.loadNpmTasks('grunt-contrib-watch');
module.exports =function(grunt){ grunt.initConfig({pkg: grunt.file.readJSON('package.json'),uglify:{options: {banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'},bar:{//files:[// {// src:'js/js1.js',// dest:'dist/js1.min.js'// },// {// src:'js/js2.js',// dest:'dist/js2.min.js'// }//]files:[{expand:true,cwd:'js/',src: ['*.js'],dest:'dist/js'}] } },concat:{css:{src:'css/*.css',dest:'dist/css/all.css'},js:{src:'js/*.js',dest:'dist/jsmin/all.js'} },htmlmin:{bar:{options: {removeComments:true,removeCommentsFromCDATA:true,collapseWhitespace:true,collapseBooleanAttributes:true,removeAttributeQuotes:true,removeRedundantAttributes:true,useShortDoctype:true,removeEmptyAttributes:true,removeOptionalTags:true},files:[{expand:true,src: ['*.html'],dest:'dist/html'}] } },watch:{files:['js/*.js'],tasks:['uglify','concat'] } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', ['uglify','concat','htmlmin','watch']);};