Grunt介绍中文主页：http://www.gruntjs.net/是一套前端自动化构建工具，一个基于nodeJs的命令行工具，它是一个taskrunner，以其丰富而强大的插件通用功能：合并文件(js/css)压缩文件(js/css)语法检查(js)less/sass预编译处理others...安装nodejs，查看版本node-v创建一个简单的应用程序grunt_test|-build---------生成文件所在文件夹|-src------------源文件夹|-js----------------js源文件夹|-css------------css源文件夹|-index.html-----页面文件|-Gruntfile.js---grunt配置文件（注意首字母大写letter)|-package.json---项目包配置文件{"name":"grunt_test","version":"1.0.0"}全局安装grunt-clinpminstall-ggrunt-cli安装gruntnpminstallgrunt--save-dev运行命令构建项目grunt//提示Warning:Task"default"notfound配置文件：Gruntfile.js该配置文件本质上是一个node函数类型的模块配置编码，包括3个步骤：初始化插件配置加载插件任务注册构建任务基本编码:module.exports=function(grunt){//1.初始化插件配置grunt.initConfig({//主要编码处});//2.加载插件任务//grunt.loadNpmTasks('grunt-contrib-concat');//3.注册构建任务grunt.registerTask('default',[]);};Command:grunt//成功提示，但是没有效果（任务还没有被插件定义）gruntplugin引入插件在grunt官网列表页面http://www.gruntjs.net/plugins插件分类：grunt团队贡献的插件：大部分插件名称以contrib-开头第三方提供的插件：大部分不以contrib-开头常用插件：grunt-contrib-clean——清理文件（打包生成）grunt-contrib-concat——将多个文件代码合并到一个文件中grunt-contrib-uglify-压缩js文件grunt-contrib-jshint-javascript语法错误检查；grunt-contrib-cssmin-压缩/合并css文件grunt-contrib-htmlmin-压缩html文件grunt-contrib-imagemin——压缩图像文件（无损）grunt-contrib-copy——复制文件和文件夹grunt-contrib-requirejs——--合并并压缩requirejsgrunt-contrib-watch管理的所有js模块文件--实时监控文件更改并调用相应的任务重新执行合并js：使用concat插件命令：npminstallgrunt-contrib-concat--save-dev编码：src/js/test1.js(function(){functionadd(num1,num2){returnnum1+num2;}console.log(add(10,20));})();src/js/test2.js(function(){vararr=[2,3,4].map(function(item,index){returnitem+1;});console.log(arr);})();configuration:Gruntfile.js配置任务:concat:{options:{//可选的配置分隔符:';'//使用;connectandmerge},build:{//这个名字任意src:["src/js/*.js"],//合并哪些js文件dest:"build/js/built.js"//输出js文件}}加载插件：grunt.loadNpmTasks('grunt-contrib-concat');注册任务：grunt.registerTask('default',['concat']);command:grunt//build下会生成一个built.js压缩的js：使用uglify插件下载npminstallgrunt-contrib-uglify--save-dev配置：Gruntfile.js配置task:pkg:grunt.file.readJSON('package.json'),uglify:{options:{//不需要banner:'/*!<%=pkg.name%>-v<%=pkg.version%>-'+'<%=grunt.template.today("yyyy-mm-dd")%>*/'},build:{文件:{'build/js/built-<%=pk??g.name%>-<%=pk??g.version%>.min.js':['build/js/built.js']}}}加载任务：grunt.loadNpmTasks('grunt-contrib-uglify');注册任务：grunt.registerTask('default',['concat','uglify']);command:grunt//buildjs会生成一个压缩的js文件语法检查：使用jshint插件command:npminstallgrunt-contrib-jshint--save-devencoding:.jshintrc{"curly":true,"eqeqeq":true,"eqnull":true,"expr":true,"immed":true,"newcap":true,"noempty":true,"noarg":true,"regexp":true,"browser":true,"devel":true,"node":true,"boss":false,//不能使用未定义的变量"undef":true,//语句后必须有分号"asi":false,//预定义全局未检查的变量"predef":["define","BMap","angular","BMAP_STATUS_SUCCESS"]}修改src/js/test1.js(function(){functionadd(num1,num2){num1=num1+num3returnnum1+num2;}console.log(add(10,20));})();configuration:Gruntfile.js配置任务:jshint:{options:{jshintrc:'.jshintrc'//指定配置文件},build:['Gruntfile.js','src/js/*.js']//指定要检查的文件}加载任务：grunt.loadNpmTasks('grunt-contrib-jshint');注册任务：grunt.registerTask('default',['concat','uglify','jshint']);command:grunt//提示变量未定义且语句后面没有分号-->修改后重新编译使用cssmin插件安装：npminstallgrunt-contrib-cssmin--save-dev编码：test1.css#box1{宽度：100px；高度：100px；背景：红色；}test2.css#box2{宽度：200px；高度：200px；背景：蓝色;}index.html
