项目开发流程反思

这篇博文是总结我这么长时间在工作室开发项目的流程的反思,从开发构建到部署项目,希望能够通过总结发现更高效
的开发流程.

##前端使用 mock 与后端独立
这部分为了避免此博文篇幅过长,所以总结在我的另外一篇博文上–前端使用 mock 与后端独立.

##Git 使用
Git 的使用主要分为它的使用流程与分支管理,可以看看阮一峰老师的博文.

##设计规范
工作室在开发项目的时候发现, 设计师与程序员的沟通比较少,在本次开发许愿墙项目的时候凸显地尤为明显, 出现很多
取色与要求不统一,像素大小混乱,导致后期沟通成本增大,实在不应该.
在师兄的引导下,我觉得工作室在开发项目的时候可以借鉴一下设计规范.
所谓设计规范,即是设计师与前端工程师共同商讨调整,得到的一个符合模块化开发的开发指导文档.注意我上面说的是
借鉴(尽信书不如无书),对于工作室自身的情况,个人感觉工作室此时期的项目 UI 要求会相差比较大,不适合建立一个
详细的设计规范,但是可以建立一个简洁的文档,从而规范编码人员的 UI 代码的一致性.
其实设计规范对于工作室来说,启发更大的是对于设计师与前端开发人员的合作流程.

###合作流程
相信网上有很多关于前端开发与后台开发的合作沟通交流的方案或建议,但是极少谈及设计师与前端开发的合作流程.
一直以来开发项目都是设计师将设计稿完全设计出来,前端人员拿到设计稿之后思考布局或实现方案.从前几年来说这样的
开发流程也许并没有问题,但是随着组件化模块化的技术的完整与风靡,我觉得设计师与前端开发人员的合作流程也应该有
所改变而顺应潮流.
设计师在设计出最终的设计稿之前,肯定会有第一版,第二版等众多版本,虽然说会有很多因素导致设计稿的变动,这里其实
只需最终版的稍前几个版本就可以了,这时候与前端开发人员进行商讨,而商讨的关注点不在 UI 的美观,而是设计稿的模
块化体现,在前期就充分考虑好一些常用通用模块, 尽早处理一些特殊模块.
一句话即 应在设计稿体现模块,而不是到前端来看模块是否与视觉稿能否配得上.

##前端部署
经过许愿墙项目以及自己的思考,总结出来觉得应该将应用服务器与静态服务器分开, 这样可以为静态文件添加 HTTP
头部启动浏览器缓存,加快渲染速度.
问题来了: 如果使用七牛这样的 CDN, 怎么启动浏览器缓存,或者说怎么添加头部?

在七牛的空间管理页面中空间设置可以使用 cache-control 头部的 maxAge 值来控制客户端缓存.

###启用浏览器缓存前
在你启用浏览器缓存之前一定要知道,如果你的静态文件需要更新的情况下,如何强制浏览器放弃本地缓存而自动更新
获取最新的静态文件呢?
使用浏览器缓存是依赖在 HTTP response header 的, 依赖 Expires 与 Cache-Control 头部.
借鉴百度首页,我采取的方案是 HTML 页面不使用浏览器缓存,而其他如 CSS, JS 等静态资源使用本地缓存加 CDN 加速.
而对于及时更新已改动的静态资源我使用 MD5 命名为静态资源命名

gulpfile.js 部分代码
// MD5戳
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var runSequence = require('run-sequence');

//自动更换 HTML 中的引用文件名
gulp.task('publish-html', function () {
  return gulp.src(['./build/rev/**/*.json', sourcePath + '/index.html'])
    .pipe(revCollector({
      dirReplacements: {
        'build/': ''
      }
    }))
    .pipe(gulp.dest('./dist/'));
});

效果截图:

rev 文件夹中的 rev-manifest.json 文件:

{
  "app.css": "app-0ea6dc6c.css"
}

{
  "app.js": "app-3a5a3e63.js"
}

需要注意的是根据浏览器的行为不同, 浏览器的缓存可能会失效.
注: cache-control设置css强制缓存失效.

###好的部署要求

配置超长时间的本地缓存 —— 节省带宽，提高性能
采用内容摘要作为缓存更新依据 —— 精确的缓存控制
静态资源CDN部署 —— 优化网络请求
更资源发布路径实现非覆盖式发布 —— 平滑升级
以上几点是一个好的部署方案所要具备的.
(摘自知乎)
所谓非覆盖式部署,就是静态资源全量部署,页面资源灰度部署.

###构建工具
有一些强大的构建工具比如 fit3, 它大而全, 是一个很好的构建工具,但是我还是喜欢用 gulp 这样的工具, 比较灵活.
一句话–“前端没有银弹”.

推荐资料:

###开发与测试的一些小建议
建议作为一个前端开发人员, 也应该配备一个自己的测试域名和测试服务器.推荐腾讯云.

##附录

###单页面应用打包 CSS
在使用 Vue 的时候,使用 .vue 单文件形式开发的时候,建议使用下面这个插件:

1	var ExtractTextPlugin = require('extract-text-webpack-plugin');

将 .vue 文件中的 style 独立打包成一个 css 文件,这样可以有效减少打包的 JS 文件大小.

###雪碧图
对于雪碧图的合并我并不建议使用 gulp 这样的工具进行合并, 因为雪碧图的重点不在于它的合并,而在于合并后的像素
定位问题,而 gulp 只提供了合并,而没有提供图片的具体像素位置点.
因此我推荐使用 http://csssprites.com/ 这个工具网站,支持多文件合并,并提供合并后的图片的像素位置.