前言
本次所做的构建针对于iVMS-5200 Professional 车载 1.0项目的前端工程。在现在化Web开发情况下,越来越注重用户体验,具体包括网站的访问速度,页面的自适应,页面操作的流畅度。如何做到更快,对前端开发人员尤为重要。依据Yahoo经典的性能优化建议,包括减少HTTP请求、使用CDN、使用gzip压缩、精简CSS和JS等等,前端不仅需要再开发过程中对代码进行优化,同时需要在发布阶段对整个工程进行优化构建。在之前,前端开发人员缺少足够的后端技术,无法去开发优化工具,到了Node.js出现之后,整个前端发生了很大的变化,前端构建也就渐渐拓展开来。
车载1.0项目的前端使用requireJs来进行开发,构建工具使用npm和gulp以及gulp插件。
构建流程
1. 安装Node.js
安装地址:https://nodejs.org/en/ ,查看node.js版本信息:node –v 版本号需要高于v0.10.32
2. 安装NPM
安装node.js的同时会安装npm,但是npm的更新会多于node.js。所以需要经常更新npm,通过输入: npm install npm –g 来更新。
npm有两种安装包的方式:本地和全局。选择什么样的安装类型取决于你怎样去使用这个包。如果你想要给你自己的模块加上依赖,类似于node.js中的require,然后你就应该本地安装,这也是npm 安装的默认行为。另外,如果你想用这个包作为一个命令行的工具,类似于grunt cli,那么你就应该全局安装。
3. 安装gulp
在项目路径下执行 npm init,生成package.json文件,全局安装gulp, npm install gulp –g,作为项目的开发依赖安装:npm install gulp –save-dev ,Gulp API 路径:http://www.gulpjs.com.cn/docs/api/
4. 主要的gulp插件
插件均可以到npm官网找到。
JS:
1) gulp-concat 文件合并
2) gulp-uglify 文件压缩
3) gulp-rename 文件命名
4) amd-optimize requireJs优化
5) gulp-jshint 代码规范检查
6) gulp-requirejs 也是用于requirejs
CSS:
1) gulp-clean-css css压缩
2) autoprefixer 自动给CSS属性加上兼容性前缀,基于can I use 网站规则
图片:
1) gulp-imagemin 图片压缩
HTML:
1) gulp-file-include html中引入文件,默认引入用@@include
2) gulp-template html模板
3) gulp-useref 对html中一些script或者stylesheets进行优化
4) gulp-htmlmin HTML的压缩工具
其他:
1) gulp-sourcemaps 提供构建前源代码(js和CSS)的调试 (source map描述可见)
source map是否启动可通过chrome调试工具里面的设置
2) del 删除文件
3) yargs 用于获取启动参数,针对不同参数,切换任务执行过程时需要
4) gulp-clean清理文件
5) gulp-copy 复制文件
6) gulp-replace 将文本文件中的内容替换
7) gulp-rev 加md5后缀
8) gulp-rev-collector 把html内的文件名修改为加版本号后的文件名
9) gulp-rev-replace 替换引用的加了md5后缀的文件名,修改过,用来加cdn前缀
10) gulp-watch 当监视到文件改变时执行任务
11) gulp-notify 当gulp失败时,发送消息到系统提示中心,控制台和操作系统都有(虽然api说是windows需要8及以上,但是win7也有)
12) gulp-react
13) gulp-angular-templatecache
14) run-sequence 按顺序执行gulp任务
15) gulp-plumber gulp错误处理
工程目录
流程
具体代码:
见附录注意项
1) Amd-optimize不支持package属性
2) 注意路径问题,代码内最好都是用相对路径,config.js内的路径需要与amd-optimize定义的路径不一样
3) Plugin文件夹里其实只需要把requireJs复制到dist中,因为其他组件已经被压缩合并到各个模块中了。
4) Amd-optimize中moduleName的路径是基于baseUrl的。而gulp流中的路径是基于gulpfile.js的当前路径的。
5) 设置data-main文件替换问题?最好不要写data-main,因为这样require.config就不知道放在哪了,如果data-main脚本代码的最前面,就需要每个模块都加而且必须要一致。所以最好是先引入require,然后引入config,然后引入主文件(index.js),index.js用require([deps],callback)来写,然后模块之间不要引入各模块的Index.js即可。
6) 路由需要由前端来做,否则定义在struts里不切实际(前端只做单页面路由history api)?这个怎么解决?
7) JSP文件需要增加request.getContextPath() 才可使用相对路径
8) Gulp-rev的merger不管用,无法合并。暂时不用
9) JSP?HTML? 保留JSP
10) 需要将所有css统一放到一个路径下
11) Source map 需要写外部map文件,否则会将source map加到源文件中的后面,增加文件长度结果
执行过程中的打印信息:
执行之后在dist目录中情况:
JS进行了压缩合并,CSS进行了压缩,以及包含了source map信息
总结
在经过优化之后,经过开发环境和生产环境下对页面的操作以及打开页面时间的测试,页面的响应时间大体上减少了40%,操作上也更加流畅。所以对于前端项目的优化构建过程十分必要。
附录