‘壹’ 前端用哪些常见的开发工具
Web前端是一个新兴职业，市场需求大，薪资待遇高，吸引了很多人加入学习。无论是初学小白亦或是自身前端开发人员，好用的软件工具可以帮助他们更好的工作。今天优就业给大家分享一下Web前端开发用什么软件。
1、Sublime Text
Sublime Text是一个代码编辑器也是HTML和散文先进的文本编辑器。漂亮的用户界面和非凡的功能，例如迷你地图，多选择，Python的插件，代码段，等等。完全可自定义键绑定，菜单和工具栏。Sublime Text的主要功能包括：拼写检查，书签，完整的Python API，Goto功能，即时项目切换，多选择，多窗口等等。
2、Dreamweaver
Adobe Dreamweaver使用所见即所得的接口，亦有HTML(标准通用标记语言下的一个应用)编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。 访问代码提示，即可快速了解 HTML、CSS 和其他Web 标准。使用视觉辅助功能减少错误并提高网站开发速度。
3、Visual Studio Code
Visual Studio Code中文版是微软推出的带 GUI 的代码编辑器，软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。软件主要改进了文档视图，完善了对 Markdown的支持，新增PHP语法高亮。
4、HBuilder
HBuilder是专为前端打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。
5、WebStorm
WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
想知道“Web前端开发用什么软件”，通过网上搜索你可以发现很多，而能否很好的借助这些软件完成项目，关键还要看你的技术。
‘贰’ 对于前端自动化构建工具有了解吗
构建工具就是用来让我们不再做机械重复的事情，解放我们的双手的。构建工具有许多，再不同的领域都会设计到，比如现在的前端自动化构建工具等等
‘叁’ 前端构建工具webpack有什么缺陷
1.文档缺失，尤其中文文档
长期以来webpack官方文档和example匮乏，提供的一些例子都是很简单那种，经常发现完全按照例子来配置但就是跑不起来，中文文档就更不用说了，少的可怜。这个问题也直接导致下面的第2点。
2.配置难&难调试
稍微复杂一点的项目，如果使用webpack编译，不经过一段痛苦不堪的配置调试过程是没法正常跑起来的。这还没完，在自己机器上跑起来之后可能到了另一个同事哪儿又报错了等等。总之正如下面有人回答那样，配置文件一旦跑起来，是根本不敢去改的，生怕又出错。
webpack的错误提示也非常难看懂，基本不可能从错误很直观的找到原因，长期以来碰到问题只能靠猜，你没看错，就是靠猜！！
3.编译慢
经验不足的同学很容易碰到这个问题，当然可以通过一些手段做优化，比如配置mole的resolve、root等，使用happypack加速、dll提前编译等等。但是笔者曾经尝试过happypack，对编译速度有提升但效果不明显，dll的话我有按照官方文档的做法去做，但是最终编译出来又报了一些莫名其妙的错（也有可能是代码写的有问题），总之心累，后来直接改成externals方式，全局script引入第三方库。
4.对server-render不友好
webpack本质上还是静态打包，意思就是打包完成之后其实文件的加载顺序已经固定，只是被加载的时间不定而已。所以使用webpack原则上不存在按需加载之类的说法，code split其实是人工分隔，但是真实的按需加载场景岂是人工能枚举完的 （下划线这句话不太好解释，也不想过多解释，熟悉前端工程的人应该都明白啥意思）。
在这里我要说的对server-render不友好其实是指html的处理，webpack其实是通过在js里用require标记资源然后加载任意资源（css、图片、fonts等等），但其实html文件才是页面真实的入口，最终编译出的js还是需要引入到html里，为了防止css懒加载导致页面抖动，编译完的css还需要从js里边提取出来放到html外链。
目前一般都是通过html-webpack-plugin来做这个事情，先搜集某个html所引用的静态资源最终自动插入到html。这种方式对于前端渲染的应用没有问题，但是对于server-render的那就不行了，因为server-render下html是作为模板由后端语言吐出，而开发模式下（例如webpack-dev-server）webpack是不会输出任何文件的（开发环境webpack是将文件放到内存然后在路由层自动serve了），所以这会导致开发环境模板无法引用静态资源。当然，有一种解决方案就是静态资源不改变文件名称，预先写好路径，开发环境和生产环境同名（即覆盖式发布）。
‘肆’ 前端构建工具是干嘛的，为什么要用构建工具
1. 【调试服务器】首先如果你是一个准备做WEB开发实践的，不管前端、后台，首先需要了解一两种服务器apache，tomcat，nginx啥的，至少能够配置一个基本的本地服务和修改索引路径，前端页面使用http/https协议访问，而不是本地文件协议（file协议下很多jsAPI都是受限的）。
2. 【调试自动更新】服务器搭建好了，那么现在开始调试网页，然后你修改一点代码，去浏览器里面F5刷新页面看看效果，再修改一点代码，再去浏览器里面F5刷新页面看看效果...如此循环往复， maybe让工具帮助你检测本地文件修改然后实时刷新网页更靠谱。
3. 【换种方式写代码】然后就是写代码了，less/sass是不错的css组织工具，ES6也能让你的javascript代码显得更严谨和逻辑清晰，要是能够在访问页面的时候实时获取css/babel(es6编译器)编译结果神马的应该显得很cool。
4. 【模块化】当然在完成逻辑相对复杂的交互功能时候，可能需要你组织非常复杂的代码功能，这个时候了解一下模块化的开发思想显得很有必要require.js事实上更早，也更广泛一点，sea.js在国内也不错。
5. 【模板引擎】然后就是对于js生成HTML(或者其他什么的)的一种包装方式, 即：js模板引擎(handlebars,jade)， 你可以尝试在开发时候使用这样的模板工具生成自己想要的HTML文档什么的，也是一种不错的体验，这个就像你用less写css代码一样，或者说用php，jsp这样的服务端语言工具生成实时HTML页面。
6. 【代理调试】有的时候你开发的东西并不只是前端代码，牵扯到跟服务端应用之间的数据交互，难免需要使用ajax，ajax这货基于安全考虑是不允许跨域的，因此可能需要通过代理的方式实现数据调试这样的工具也有不少，nginx服务器是其中的佼佼者。
7. 【资源合并优化】OK， 如果到完成开发阶段，你需要提交自己开发的代码到线上服务器了，在提交之前，你需要考虑将开发的资源进行最优化(合并，压缩神马的)， js方面有uglify，css有cssmin神马的，图片压缩还可能根据不同的类型进行不同程度和配置的压缩，这些事情交给别个工具处理显得很有必要，要是能够一键处理那简直了， 网络的fis，业内最流行的grunt.js、gulp.js神马的，事实上它们在配置化编译LESS/Coffee这类工作在自己的流程中也很在行。
8. 【Combo】使用异步模块化开发带来的弊端就是对于大量零碎依赖文件需要分别开辟多个http链接去获取，这可不是一个好现象，要知道单个浏览器单域名并发获取资源的数量是很有限的， 因此例如KISSY就支持了简单配置一个combo参数来组织一个获取nginx的 http-concat格式资源的路径，当然这样的动态合并模式也适用于普通的资源请求合并。
9.【资源缓存和更新】 CDN 能够确保你已经发布到服务器上的资源以最快的响应时间到达浏览器，但是带来的问题是，你的代码更新，CDN则傻乎乎的不理你，除非你在使用的地方告诉它需要更新了( 时间戳、MD5文件名啥的 )。
事实上，我觉着凡是重复进行的工作总有可以程序和代码可以替你完成的部分，前端开发中这种事情尤其多，工具啥样的自己去定义才最合适自己，而nodejs的出现使得前端自己可以方便的开发这类东西（上面的less、coffee、uglify、gruntjs、fis、gulp这些个单词可以说：都依赖nodejs）。
‘伍’ 前端构建工具是什么
前端构建工具是开发软件一种比较专业性的说法，比如像微软的vs之类的，但是这种工具都不是简单的，想要学好的话还是不容易的。
‘陆’ 前端自动化构建工具gulp有什么用
gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。
‘柒’ web前端开发常用工具有哪些
Web前端是为了协调前端设计与后端开发之间工作的岗位，是最接近产品和设计的工程师，起到衔接产品和技术的作用，前端为用户可以看到的部分负责，所以也是最接近用户的工程师。
Web前端开发基础技能：HTML、CSS、JavaScript
前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
Web前端开发必知标准：http标准、W3C标准、ECMAScript标准
浏览器要从服务端获取网页，网页也可能将信息再提交给服务器，这其中都有http的连接。W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。JS是在ES的基础上，为Web浏览器做了一部分封装（增加了DOM操作、BOM操作等）。
Web前端开发加薪技能：jQuery、Ajax、React
jQuery一定是大部分Web前端开发者不可或缺的工具，对jQuery的学习不能停留在只使用它的API和插件上，还要会自己去写jQuery插件、会读jQuery源码、了解jQuery的设计思路。
Ajax是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，Ajax可以在无需重新加载整个网页的情况下，更新部分网页的技术。
React主要用于构建UI，你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
除了要掌握技术层面的知识，Web前端工程师还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等等。想快速掌握Web前端所需的技能点，参加学习班是明智的。