公司的项目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上的了。