SegmentFault 技术周刊 Vol.29 - 据说前端又出新工具了？惊不惊喜？

在前端刀耕火种的年代，布局用 table 标签，CSS 样式大量内联；校验 JS代码是否规范，须要复制代码到 jshint（相信不少 “前辈” 对此都不陌生）；压缩合并代码，也是经过压缩工具压缩完再复制到一个文件里；修改了代码要查看效果，必须手动刷新浏览器；代码写好了要发布到服务器，须要用 FTP 软件上传，等等等等。

其实严格来讲，那个时候尚未前端开发这个职位，那个时候叫切图仔或者页面仔，隶属于设计部或者其余什么部。CSS 不能预编译，也没有模块化，不能自动打包，而今天，这些都只要使用前端构建工具就能够实现了，咱们也有了专门的前端开发岗位。若是当时的前端开发者穿越到如今，他必定会很是惊讶，并觉得本身作了个假前端。

简单的来讲，前端工程化就是把一整套前端工做流程中能用工具搞定的部分用工具搞定。

起源

前端的工程化

前端这个职位的诞生也有短短的十年。而在十年以前，我不认识你，那会还叫网页制做，用着一个Adobe很是牛逼的软件叫Dreamweaver。这是一个神奇的软件，绚丽多彩的网页经过它，拖拖拽拽，就这么梦幻般的生成了。网页制做师们，像一群织梦的妇人，心灵手巧，耐苦耐劳，从不抱怨。

我为何这么强调前端工程化

WEB 前端开发这几年发展很是迅速，很是多的开发框架和构建工具涌现，可能你昨天还在用的工具、插件，到了今天就过期了。在 2 年前，我面试别人的时候，会问一些有没有接触NodeJS、 Grunt、gulp、ES六、Babel 这类技能的问题，超过半数的面试者会回答『没有』，或者说『只是刚刚接触，并非很深刻』。迫于招人急迫，我并不会直接说 NO，而后继续问一些 HTML、CSS、JS 前端三板斧的知识。 然而今年，若是应聘者不会这些技能，那真的很抱歉， 我不会接受一个没有走在前沿的开发者 。任何面试者都不会喜欢一个墨守成规的人。难道没人告诉你，外面的世界已经变了吗？

前端工程化知识要点回顾&思考

前端工程化相关问题是随着前端的发展愈来愈受到重视的问题，一套好的工程化解决方案能在提升开发效率(包括代码编写的温馨度及多人协做)的同时确保整个系统的伸缩性(各类不一样的部署环境)及健壮性(安全)，同时在性能上又能有一个很优异的表现(主要上各类缓存策略加载策略等)，并且这套方案又应该是对工程师无感知(或感知很小)趋于自动化的一套方案。总之，要达到这个目的前端工程化还有很长一段路要走。

F++：别忽略前端工程化的部署与测试

前端工程能够说是软件工程的一个细分领域，流程类似，但特色鲜明。先来讲说前端，固然我指的是Web前端，相比其余方向的技术有什么特色：

• 提及前端，至少涉及3种语言。（html，css，javascript）

• 前端代码在用户端运行时增量安装。（摘自张云龙的文章，资源和代码都是增量下载的）

• 最基本的情况下，前端代码不须要编译（即改即生效）。

• 浏览器即运行环境，很是易于调试和开发（不须要simulator）。

工欲善其事

我终于弄懂了各类前端build工具

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch……诸多的名词让你一时间感到手足无措，好像根本学不完。 其实关键就是，不要被它们唬住。要知道，全部这些工具，其最初的设计目的，都是要让你的工做变得更简单。 要想弄明白这些工具是什么、如何工做以及为什么要使用它们，你其实只须要抓住少数几个核心概念。

前端工程化工具初选

面对日益纷杂的前端工具，做为新人常感无从下手。通过一番检索和简单对比，再结合本身的喜爱，筛选了将要学习和使用的工具，以适应日益工程化、专业化的 Web 前端开发工做。

写给后端看的前端技术——webpack（上）

不懂“前端”说的virtual dom、ReactJS、Vue、Angularjs这一大堆东西，也不懂前端说的ES6的优雅，也不知道为啥我用Bootstrap、jQuery就得“剁手”。世界上总得有一篇文章是写给后端工程师看的，后端写给后端看的，不装逼，认认真真。我决定用webpack做为学习前端的第一步，一方面是因为“Build工具”几乎是学习前端的第一道门槛；另外一方面它已经“千秋万代一统江湖”了因此请无视——gulp、grunt之类的吧。

php工程狮感知的前端工做流程

这个时代不懂点前端知识，真的没有办法生存。就算不会写，也得了解它的原理吧！最近作了一些总结，以前都是迷迷糊糊，搞不清楚前端以前的相关定位。好好梳理了一下。错误之处请各位指正。

本文主要说的是 JavaScript 工做流程。

前端工程化

从零开始，教你如何开始前端自动化

什么是前端自动化构建就不说了，应为我不是写书的。在前端开发实践中，大公司都会有本身的基础前端架构，能容包括了开发环境、代码管理，代码质量，性能检测，命令行工具，开发规范，开发流程，前端架构及性能优化。相对而言，小公司或则是创业型的公司，前端架构这块作得就相对没有这么好，甚至于很不规范，而规范的目的在于提高工做效率。

[ 前端实习日记 ] 构建静态页面基础架构

之前咱们敲静态页面都是写好html，css, js，而后再去刷新浏览器，艾尼马又不行，有从新写过再刷新，一个页面下来按chrl+r的次数可以让你的键盘多活好几天，要不会刷新快捷按钮那不得手残了都。

后来，grunt,gulp等工具应运而生，固然它们不止这个功能，但却很好地减轻了咱们的负担。这篇文章介绍一些如何使用这些工具使构建页面变得简单高效。这只是我的的目前在用的不成熟的方案，更专业的还请参考百度FIS。

精益 React 学习指南 （Lean React）- 2.1 前端工程化概述

在前端开发的初始阶段，开发者一般只用关 html, css, javascript。可是现代化的前端开发已经不只仅是业务代码自己，真正的前端开发环境涉及不少方面的需求，如：

• 开发需求

• 共享需求

• 性能需求

• 部署需求

这些东西咱们都统一的叫作前端工程化，为了简化前端工程化的配置，出现了不少优秀的工具

精益 React 学习指南 （Lean React）- 2.4 webpack + gulp 构建完整前端工做流

React 在大多数状况被当作当 SPA （单页面应用）的框架，实际上在真实业务开发过程当中，非单页面应用的业务框架居多。因此咱们在构建前端工程的时候，以多个页面的方式维护。下面定义前端工程的目标：

• 基础技术

• 应用模式

• 样式结构

gulp

初探前端自动化神器 （Gulp）

Gulp 是一个构建系统，开发者可使用它在网站开发过程当中自动执行常见任务。Gulp 是基于 Node.js 构建的，所以 Gulp 源文件和你用来定义任务的 Gulp 文件都被写进了JavaScript（或者CoffeeScript）里。前端开发工程师还能够用本身熟悉的语言来编写任务去 lint JavaScript 和 CSS、解析模板以及在文件变更时编译LESS 文件（固然这些只是一小部分例子）。

gulp前端自动化工具的快速入门案例

最近项目和工做中要开始使用自动化工具了，回想一下之前接触这个的时候就是什么nodejs，grunt之类的了，此次干脆就用一个新的，那么就是gulp

gulp构建前端自动化

grunt是前端工程化的先驱
gulp更天然基于流的方式链接任务
Webpack最年轻，擅长用于依赖管理，配置稍较复杂
推荐使用Gulp，Gulp基于nodejs中stream，效率更好语法更天然,不须要编写复杂的配置文件

webpack

[新姿式]前端革命，革了再革：WebPack

五年间，NodeJS成为了服务端以及脚本工具的一代翘楚，NPM的成功让你们意识到一个集中式的依赖／包管理体系的重要性，Bower应运而生，还有试图将CMD和NPM包带到前端领域，统一先后端包格式的Browserify等等，大量的前端工具爆发式地出现，WebPack是其中的(又)一款模块打包工具。

[译] Webpack 前端构建集成方案

构建工具逐渐成为前端工程必备的工具，Grunt、Gulp、Fis、Webpack等等，译者有幸使用过Fis、Gulp。
前者是百度的集成化方案，提供了一整套前端构建方案，优势是基本帮你搞定了，可是灵活性相对比较低，社区也没那么大；后者提供了很是灵活的配置，简单的语法能够配置出强大的功能，流控制也减小了编译时的时间，能够和各类插件配合使用。
译者由于要使用AMD模块机制，开始接触了webpack，发现官网上讲的晦涩难懂，没法实践，而国内虽有博客也讲解一些入门的教程，可是要么篇幅太短，要么只讲各类配置贴各类代码，而后谷歌发现了国外大牛写的这篇博客，发现讲的很是通俗易懂，配合实践和代码，让译者感慨万千，瞬间打开了一扇大门。

webpack学习（一）—— 入门

本文主要内容译自webpack入门，以一些小的demo对webpack作了简单介绍，每一个步骤都很简单明了，适合对webpack彻底不了解的新手阅读，以对webpack有个基本的了解。

webpack学习（二）—— 进阶

本文将介绍如何使用webpack对具备较为规范的结构的项目进行构建。主要包括如下几个方面：

• 进一步了解webpack.config.js

• 进一步了解webpack-dev-server

• 使webpack支持es6语法

webpack学习（三）—— webpack-dev-server

本文主要介绍如下两方面的内容：

• webpack-dev-server自动刷新

• 热加载（Hot Module Replacement）

webpack学习（四）— code splitting

首先说，code splitting指什么。咱们打包时一般会生成一个大的bundle.js(或者index,看你如何命名)文件，这样全部的模块都会打包到这个bundle.js文件中，最终生成的文件每每比较大。code splitting就是指将文件分割为块(chunk)，webpack使咱们能够定义一些分割点(split point)，根据这些分割点对文件进行分块，并实现按需加载。

webpack 进阶

详解webpack-dev-server的使用

webpack-dev-server是一个小型的Node.js Express服务器，它使用webpack-dev-middleware来服务于webpack的包，除此自外，它还有一个经过Sock.js来链接到服务器的微型运行时。

webpack-dev-server使用方法，看完还不会的来找我~

webpack-dev-server主要是启动了一个使用express的Http服务器。它的做用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通信协议，原始文件做出改动后，webpack-dev-server会实时的编译，可是最后的编译的文件并无输出到目标文件夹。

重写webpack多页应用配置脚手架

历经了多个web项目的实战检验，咱们对webapck在构建中逐步暴露出来的性能问题概括主要有以下几个方面：

• 代码全量构建速度过慢，即便是很小的改动，也要等待长时间才能查看到更新与编译后的结果（引入HMR热更新后有明显改进）；

• 随着项目业务的复杂度增长，工程模块的体积也会急剧增大，构建后的模块一般要以M为单位计算；

• 多个项目之间共用基础资源存在重复打包，基础库代码复用率不高；

• node的单进程实如今耗cpu计算型loader中表现不佳；

针对以上的问题，咱们来看看怎样利用webpack现有的一些机制和第三方扩展插件来逐个击破。

基于webpack+gulp搭建纯静态页面型前端工程模板

基于webpack搭建纯静态页面型前端工程解决方案模板。

5分钟打造简易高效的webpack配置

5分钟从零搭建一个简易高效的webpack开发环境。首先咱们明确一下需求：

• 打包调试

• 提取公共代码

• 压缩

• 热替换

webpack分包及异步加载套路

前行

工具武装的前端开发工程师

《基于React的前端工程实战》大纲，也是笔者心中的前端学习路线图

本书最大的优点在于造成了完整的知识体系结构，让你合理概括本身学到的知识，将知识放在它该在的地方。另外笔者想强调的是，不管React仍是Vue或者Angular2都是很是优秀的前端框架，使用哪一个框架仍是属于术的范畴。本书虽然立足于React，可是其中蕴含的设计模式与工程架构能够通用于任何框架。笔者也着力于不但愿受到某个具体框架的太多的束缚，毕竟在这个突飞猛进的前端世界，说不许哪天就落于人后了。

写给想作前端的你

给你们的建议

• 道阻且长，冰冻三尺非一日之寒；

• 普遍地学习，有条件和能力的同窗尽早地接触客户端开发，更多地了解服务端开发；

• 前端大有可为，新技术的发明者大多不是老东西，老东西经验足可是历史包袱重；

• 只在浏览器中思考必死无疑；

• 像一位同窗提到的，打好基础，offer就有。学校里倒腾几年真的很难搞出什么大新闻，面试官也不会刻意为难你；

• 测试测试测试，前端测试值得学习掌握，好比e2e，这是一个机会：我能告诉你不少公司的前端测试都瞎JB点吗？

• 学习一些函数式编程的思想，例如：lodash、Redux、RxJS；

• 拿到offer只是开始不要嘚瑟。