GruntJS前端自动化构建之旅-齐飞

前端自动化构建之旅——初探Grunt构建工具WhyGrunt?为什么是Grunt？传统的开发流程调试上线编码追求更好的用户体验1.运用新技术改善交互：2.优化代码提升性能：压缩合并预编译＋＝当传统流程遇见新技术调试上线编码手动SASS/LESS/CoffeeScript编译手动Handlebars模版预编译手动JSHint代码质量检测手动Jasmine/QUnit单元测试手动Uglify对JavaScript、CSS压缩混淆手动HTMLMin对HTML压缩手动imagemin批量压缩图片手动合并静态文件，减少页面请求手动修改文件引用路径压缩每一步，都要手动执行！合并编译难道创造好的用户体验真的就那么难？Grunt简介简单说，Grunt是一个自动任务运行器，会按照预先设定的顺序自动运行一系列的任务。这可以简化工作流程，减轻重复性工作带来的负担。Grunt的安装与运行前提：Grunt需要Nodejs环境，这里假设你已经安装好了Nodejs和NPM，因为下面的代码需要在命令行中运行，所以推荐安装一个好用的Shell工具。安装：1.npminstall-ggrunt-cli运行：1.cd~/workspace/project/WebApp2.gruntbuild//使用NPM安装grunt-cli//进入已配置Grunt模块的项目目录//运行Grunt,执行相应任务小贴士：Windows下推荐使用Gow,MinGWMSYS,Cygwin等工具替代cmd.exeGrunt项目的结构注意：Grunt的核心模块并非全局安装，而是在项目中单独存在，保持项目使用Grunt插件与Grunt核心模块版本一致，避免由于版本不同造成冲突。同时，Grunt是非侵入式的，对项目原有结构影响较小。WebApp/├─grunt/│├─Gruntfile.js│├─package.json│└─node_modules/│├─grunt/│├─grunt-contrib-sass/│└─...├─res/│├─theme/│├─common/│└─...├─index.html└─...//推荐将Grunt配置在前端WebApp的根目录//Grunt的任务配置文件//项目信息,模块依赖声明//存放相关模块//Grunt的核心模块//Grunt的第三方插件//项目中的其他文件─┐│├─Grunt的构成││─┘Gruntfile.js是Grunt的配置文件，不同于常见的XML格式，它采用的是JavaScript的代码进行配置。整个Gruntfile.js就是一个符合Node.js标准的JavaScript模块。Gruntfile主要有三个方法：1.grunt.initConfig2.grunt.loadNpmTasks3.grunt.registerTask//定义模块的参数配置//引用声明，完成任务所需的模块加载//定义具体的任务小贴士：和其他的NodeJS模块一样，Gruntfile.js遵循CommonJS模块化规范核心配置文件：Gruntfile.js核心配置文件：Gruntfile.jsGruntfile.js是模块化的JavaScript文件，非常灵活，可以自行扩展。基于任务配置第三方模块调用提供API实现扩展配置详解-grunt.initConfiggrunt.initConfig方法用于模块配置，它接受一个对象作为参数。对象中每一个成员项对应一个同名模块。这里我们用uglify模块的配置作为演示：grunt.initConfig({uglify:{options:{//配置uglify的参数mangle:{except:['jQuery']},//防止混淆变量名时对jQuery产生影响banner:'/*\nMinifiedbyUglify%=grunt.template.today(yyyy-MM-dd-HH:mm:ss)%*/\n',footer:'\n/*PoweredbyAILKUED*/'//在头部和尾部增加声明},minify:{//配置uglify的执行目标files:[{expand:true,cwd:'WebApp/res/',//待压缩目录src:['**/*.js','!**/*.min.js','!**/full.js'],//过滤带压缩文件dest:'WebApp/res/',//压缩后目录ext:'.min.js'//对压缩后的文件使用.min.js的后缀}]}}});grunt.loadNpmTasks('grunt-contrib-uglify');//对uglify插件进行加载声明uglify模块有一个目标：minify,它用于压缩指定路径的JS文件，其中配置了需要压缩的文件路径、文件类型和过滤条件。配置文件中的uglify属性指向一个对象，该对象又包含多个成员。除了一些系统设定的成员（比如options），其他自定义的成员称为目标（target）。一个模块可以有多个目标。配置详解-grunt.loadNpmTasksgrunt.loadNpmTasks('grunt-contrib-uglify');使用grunt.loadNpmTasks方法声明需要载入的模块文件。需要使用几个模块，这里就要写几条grunt.loadNpmTasks语句，将各个模块逐一加载。如果加载模块很多，这部分会非常冗长。这里有一个解决办法，就是安装load-grunt-tasks模块，然后在Gruntfile.js文件中，用下面的语句替代所有的grunt.loadNpmTasks语句。Grunt便可以自动分析package.json文件，自动加载所找到的grunt模块。require('load-grunt-tasks')(grunt);配置详解-grunt.registerTaskgrunt.registerTask('init',['uglify','sass','watch']);使用grunt.registerTask方法定义具体的任务。第一个参数为任务名，第二个参数是一个数组，表示该任务需要依次使用的模块。如上述代码中，init表示任务名，在该任务中，会依次执行uglify、sass和watch三个模块。需要执行该任务，在命令行输入以下命令：$gruntinit↵下面借助一个实例，进行讲解。当前项目中应用了SASS技术，并且在较少重构已有代码的前提下，希望可以进一步提升的页面加载速度。项目的目录结构：那么，我们可以总结出以下几个需求：Grunt实例讲解-项目描述1.转换theme/文件夹下的.scss文件为同名.css文件2.压缩common/文件夹中的.js文件到.min.js结尾的同名文件3.在需要的时候将已压缩的JavaScript文件合并到full.js中项目目录├─WebApp/│├─res/││├─common/│││└─**.js││├─theme/│││└─**.scss││└─...│├─index.html│└─...└─...//前端目录//存放具有通用性js文件的目录，需要压缩合并//存放样式的目录//HTML页面Grunt实例讲解-配置将包含所需插件node_modules文件夹和package.json复制到项目的根目录配置Gruntfile.js，内容如下所示：module.exports=function(grunt){grunt.initConfig({uglify:{options:{/*相关配置请参见之前的页面*/},minify:{/*相关配置请参见之前的页面*/},dynamic:{expand:true,ext:'.min.js',src:''}},sass:{compile:{files:[{expand:true,src:['*.scss'],cwd:'WebApp/res/theme/',dest:'WebApp/res/theme/',ext:'.css'}]},dynamic:{expand:true,ext:'.css',src:''}},concat:{options:{separator:';'},target:{src:['WebApp/res/**/*.min.js'],dest:'WebApp/res/full.js'}},watch:{js:{files:['WebApp/res/**/*.js','!**/*.min.js','!**/full.js'],tasks:['uglify:dynamic'],options:{spawn:false}},sass:{files:['WebApp/res/**/*.scss'],tasks:['sass:dynamic],options:{spawn:false}}}});//对插件进行加载声明grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-sass');grunt.loadNpmTasks('grunt-contrib-concat');grunt.loadNpmTasks('grunt-contrib-watch');//定义任务grunt.registerTask('init',['uglify:minify','sass:compile','watch']);grunt.registerTask('combo',['concat']);//我们利用GruntAPI进行了扩展//检测到文件变更时取出该文件路径grunt.event.on('watch',function(action,filepath){grunt.log.writeln('---Found:'+filepath+'haschanged,processing...');grunt.config('uglify.dynamic.src',filepath);grunt.config('sass.dynamic.src',filepath);});};Grunt实例讲解-运行init任务刚才，我们在Gruntfile.js中配置了两个Task：init和combo。在命令行输入gruntinit，执行init任务：Fei@FEI-PC~/Dropbox/Codes/workspace/EasyTools$gruntinitRunninguglify:processAll(uglify)taskFileWebApp/res/common/a.min.jscreated.FileWebApp/res/common/common.min.jscreated.FileWebApp/res/common/test.min.jscreated.Runningsass:compile(sass)taskFileWebApp/res/theme/ui.csscreated.RunningwatchtaskWaiting...---Found:WebApp\res\common\common.jschangedOKFileWebApp\res\common\common.jschanged.Runninguglify:needed(uglify)taskFileWebApp/res/common/common.min.jscreated.Runningwatchtask-Waiting...可以看到，任务启动首先将所有.js文件压缩，并将.scss文件编译。随后在后台监听，如有.js或者.scss文件内容变更，将会自动对该文件进行压缩或编译。Grunt实例讲解-运行combo任务在命令行输入gruntcombo，执行合并任务：运行combo任务后，Grunt自动将common文件夹下已压缩的.js文件合并到了full.js：$ls-lhWebApp/res/common/total10-rw-r--r--1Fe