公司的项目TH设计差不多了，开始开发前端。 选了milligram作为界面框架准备随便拖拖jquery plugins然后开始写页面。 但是突然想起，现在前端的技术日新月异，各种模块化自动化技术层出不穷。虽然是因为公司不景气没有招前端，作为后端被抓来随便写写，公司不在意前端，也不关注前端的性能。 但是觉得有一个标准化的流程会好点，之前开发的项目，icon都是用的阿里的iconfont，也没有交接图标项目，导致只能重新引入新文件，也没有开发文档，每次总结的建议都写上也不是很受重视。外包小公司是效率至上，也理解。 ## basement & term - Gulp / Grunt 优化前端工作流程工具：自动刷新页面、combo、压缩css、js、编译less等等 - seajs / require : 是一种在线"编译" 模块的方案，相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。 - browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写JS，不管是 AMD / CMD / ES6 风格的模块化，它都能认识，并且编译成浏览器认识的JS。 [Webpack/Browserify/Gulp/Grunt/Seajs/Requirejs](https://www.zhihu.com/question/37020798) 关于模块化开发这里有个必看的slide：[JavaScript 模块化七日谈](http://huangxuan.me/js-module-7day/#/) 还有一些essay： - [前端模块化开发方案小对比](https://www.w3ctech.com/topic/1410) - [公司前端开发架构改造](https://segmentfault.com/a/1190000004962586) - [如何打造一个令人愉悦的前端开发环境](https://gold.xitu.io/post/57c659918ac24700635c0164) #### 模块化表现 1. 减少命名冲突，消除全局变量 2. 一个模块一个文件，组织更清晰 3. 依赖自动加载，按需加载 #### 模块化规范标准 1. CommonJs (Node.js) 2. AMD (RequireJS) 3. CMD (SeaJS) 大概浏览了一些技术栈，模块化常用的实现工具是browserify、webpack。 ### gulp #### gulp installation 一步一步来，决定试用gulp。 需要node环境，所以brew install node //mac下，顺便npm会一起安装。 [推荐教程：再学一次gulp](https://www.talkingcoder.com/article/6367591948982623481) npm install -g gulp //-g是全局安装，方便CLI下使用 mkdir project_front cd project_front npm init // fill project properties npm install gulp --save-dev //把gulp作为项目依赖，只在开发时 #### gulp插件安装 npm install gulp-less --save-dev npm install gulp-connect --save-dev /rename/contat/uglify/jshint/minify-css/imagemin npm install --save-dev jshint gulp-jshint #### 图标库选择 现在看到比较多的是fontawsome，国外很多有用。但是还是更喜欢阿里的iconfont，超级好用，从ui设计到前端icon可以一次性到位，提供AI原件简直不能再赞。 页面引用是用的推荐的symbol方法，可以方便的更改颜色。 #### 开发 ##### 目录设置 以前就一直希望有的功能：浏览器实时刷新……终于体会到gulp的便利了。第一次配置gulpfile可能会觉得有点麻烦，但是在开发和后期维护上比手动配置优越很多。 应为希望生产环境除了gulp的server外还能直接在浏览器打开，所以目录需要设置对。 ``` ├── app │ └── index.html ├── dist │ ├── css │ │ └── style.min.css │ ├── images │ │ ├── slide.jpg │ └── js │ ├── main.js │ └── main.min.js ├── gulpfile.js ├── index.html ├── package.json └── src ├── css │ ├── milligram.css │ └── style.css ├── images │ ├── slide.jpg └── js ├── iconfont.js └── index.js ``` dist是生产目录，src和app是开发目录，教程中有提到html的压缩，暂时没关，所以app下的html就是直接通过task复制到项目根目录下的。 sass [How to use Gulp to generate CSS from Sass/scss](http://www.codingpedia.org/ama/how-to-use-gulp-to-generate-css-from-sass-scss/) ### 页面实现 #### Front framework 用了milligram，milligram是用sass开发的。感觉很棒。不需要的模块也可以很方便的去掉。 #### slider 用了 [simple responsive fullscreen slider | codepen.io](http://codepen.io/jibbon/pen/BoisC) 这里略有不足，因为不是realtime responsible。slider的width是由js读取的，所以对开发不友好。不过比较符合需求所以选用了这个。 #### [星空parallax](http://codepen.io/saransh/pen/BKJun) 设计的时候是直接拖入的AI素材，但是页面总觉得效果不会很好。所以找了parallax效果来模仿，@Saransh Sinha 是用haml，想象一下如果前端是haml/sass/coffescript的技术栈感觉很帅的感觉。 sass大法好。 #### 三角形切割标题 图片遮罩直接是用的以前写好的，利用pseudo element可以很好的解决。 加上transition ease-out和:hover:before就OK了。 设计一时爽，本来是想用 [Triangle shape with background image](http://stackoverflow.com/questions/10969941/triangle-shape-with-background-image)这个方法，其中还提供了svg的思路。 但是偶然间发现了[cssplant.com/clip-path-generator](http://www.cssplant.com/clip-path-generator)，完美神奇。 #### 文字与图像同时垂直居中 - 重要是图片要设置 vertical-align: middle 用了line-hight+文字的vertical-align一直失败。 #### Flexbox 其实一直没有弄懂这个。被推荐了一篇很好的教程 [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) #### parallex plugin [Tilt.js - A tiny parallax tilt effect for jQuery](http://www.jqueryrain.com/?gDhOF8vW) #### Table of Content 找不到文章侧边目录的插件，因为不知道对应英文具体叫什么。 codepen上找到一个叫 [stick menu](http://codepen.io/UpLinQ/pen/bEPNRX) - [I5ting ztree toc](https://ruby-china.org/topics/17028) | 根据h1到h6自动生成toc，并且可以自动编号 这里还发现一个很棒的[1. How to write jQuery plugin?](http://i5ting.github.io/i5ting_ztree_toc/build/jquery.plugin.html) 最终用的是 http://projects.jga.me/toc/ 这个，很不错。 刚好还需要sticky的功能，就参考codepen上的了。