css js

1. 前端构建工具
Frontend Build Tools
2015年6月
二手车事业部—前端组

2. 目录
1 前端开发中的任务
2 Yeoman: Scaffolding
3 Grunt: The JavaScript Task Runner
4 Bower: Dependency Management
5 Demo

3. Backend Build Tools
你所了解的Build Tools有哪些？？

4. Frontend Build Tools

5. F2E 例行工作
F5
F5
F5
Ctrl+F5
……..
F2E
开发 例行工作
代码检查
测试
文件合并
文件压缩
发布
Files
+jQuery +Bootstrap…
+test
+concat *.css *.js
+min.js *.html *.img
+rever(md5)
库文件下载
创建目录 +workspace
+jsLint cssLint htmHint

6. Online Tools

7. GUI Tools

8. 工具的不足
1 Ctrl+C Ctrl+V 奔波于浏览器与编辑器之间
2 平台依赖 Mac Windows
3 功能单一，解决部分问题
4 不开源，得花点钱…
5 Repeat Yourself

9. Say No

10. WEB3.0 & 工业4.0
WEB 3.0 未来互联网应用的框架
智能制造2025"（工业4.0）

11. 前端工程化--前端集成解决方案
项目规范
前端框架
模板框架
自动化工具
辅助开发工具
前端集成解决方案

12. 准备工作
1. Javascript运行环境(runtime)
2. 基于Google V8引擎
分布式版本控制系统 1. Node Package Manager
2. node包管理和分发工具
3. 找到特定服务要使用的包进行下载
4. 安装以及管理已经安装的包

13. 1 定义了web开发流程的开源工具
2 不仅仅是一个工具，而是一个工作流程
3 集成了最佳的前端工具和开发模板
4 项目开始阶段，可以基于现有的模板框架进行项目初始化的快速构建。
THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPP
现在WEB APP的脚手架工具

14. 1. npm install -g yo
2. npm install -g generator-angular
3. yo angular
many many generators

15. GENERATORS---生成器
Search in 1757 generators...
WRITING YOUR OWN YEOMAN GENERATOR

16. The JavaScript Task Runner
JavaScript 任务运行器
1 一个以任务处理为基础的命令行工具
2 把工作整合为不同的任务，开发时自动执行
3 完成需要重复进行的手动设置和发布任务，从而加速开发流程
4 让团队使用一套统一的命令，从而保证每个人写的代码符合统一标准

17. npm install -g grunt-cli
npm install grunt --save-dev
npm init
1. npm install -g grunt-init
2.git clone git://github.com/gruntjs/grunt-init-gruntfile.git
3. grunt-init grunt-init-gruntfile
grunt --version
npm install grunt-contrib-concat –save-dev
grunt concat

18. | package.json
npm install grunt-contrib-concat –save-dev

19. | Gruntfile.js
Sample Gruntfile: http://gruntjs.com/sample-gruntfile
wrapperconfiguration
readJson
task
target
load
run task

20. | Plugins
Grunt Plugins: http://gruntjs.com/plugins
4,560

21. Bower
A package manager for the web
1 一个前端库管理工具
2 很好的解决在 Web 应用中引用第三方库时可能遇到的问题
3 所提供的功能类似于 Apache Maven 等工具

22. Bower
npm install -g bower
A package manager for the web
bower install <package>
bower init
Bower.json
bower init
bower help

23. Bower
A package manager for the web
bower search
26853 matched results. Showing page 1 of 896.
26,853

25. Making Maven Grunt
• http://addyosmani.com/blog/making-maven-grunt/
https://github.com/wro4j/wro4j
https://code.google.com/p/wro4j/wiki/MavenPlugin
• https://github.com/allegro/grunt-maven-plugin
• https://github.com/eirslett/frontend-maven-plugin
https://github.com/bringking/requirejs-maven-plugin
Making Maven Grunt
• https://github.com/trecloux/yeoman-maven-plugin
http://wro4j.github.io/wro4j/
https://github.com/wro4j/wro4j-examples

26. 前端工程师最希望在什么样的环境内办公？
双显示器,木质办公桌,机械键盘,合理膳
食，朝九晚五，清爽发型

27. 1 HTML标签语义化，标签结构化
2 CSS规则体系化，组件化
3 JS框架的选择，模块化，高内聚，低耦合
代码可维护性
关于代码质量控制，首先建立规范统一代码风格，在此之上可以有自动化的检查工具，同时离不开人为的Code Review。
《编写可读代码的艺术》 《编写可维护的JavaScript》
《高性能网站建设指南》 《高性能网站建设进阶指南》