㈠ web前端开发工具排名是什么
编辑器: sublime, webstorm, atom, vim等
调试工具: 浏览器自带的devtools，移动端页面远程调试等
构建工具: gulp, grunt, webpack
包管理工具: bower
远程服务器工具: filezilla/shell
工具主要作用就是帮工程师减少工作量，自动化处理，如压缩css, 合并js/css, 上传cdn, 图片优化, 管理jquery等三方库
前端入门操作都是非常简单
1、学习css，这个css没有包含css3，通常我们看到对于web前端工程师要求是要会使用css+div或css+html对界面进行布局，因此 css是辅助html来展示以及布局的，称之为css样式。上面说的css+div中的div就是html主要用在布局上的，div是核心要掌握的东 西。
而且css是一定需要配合div进行使用，所以学css要熟悉掌握position、height、float、width，并对于界面的最大最小、能 使用百分百、margin、overflow、padding等。这些关系到布局样式的一定要能够熟练掌握，实在不明白可以到杭州有码互联咨询 下，有码讲师都是有超过三年以上的项目经历。
2、html是web前端开发工具中最为基础和最简单的，在html中要掌握的有form table、span、p、div、ul li 、font这各类标签。 尤其是table和div，table虽然也能布局使用，但是不方便，通常是用table和数据打交道的。而div是用来布局。
3、学习web前端开发的话要是能够会些java、php等后台语言更是加分了。因为web前端的界面数据都是在后台那过来的，要是会后 台语言的话，就更节约时间，不仅知道如何于后台交互数据是最好的，也知道怎么写前端的代码会更加规范。就不会出现写法和后 端的数据不匹配，要重现编写的尴尬现象了。
4、掌握js，也许前面提到的大家都觉得还可以。但一说到js就晕了吧？事实上js的入门非常的简单，只要能够会根据某个name、 或id拿到网页的样式、值和dom。以及会给某些name或id的元素标签赋值、追html、追加数据，在按照逻辑推断。至于效果无疑就 是弹框、跳转、隐藏等。再把这些结合到其他的，代码其实就一点也不不会难了。学会了基础的js之后，其他的方面结合学习资料 多看多用基本上是没问题的。
5、学习jquery.jquery是把js封装了一套的一个js插件。最终就是希望代码简化、操作更方便。jquery入门也不难，它需要学的和 js一样，不同的是换成了jq的代码。其他结合别的学习资料就可以了。
6、最后是学习css3+html5了，这个目前是最流行的了，如果是搞后端的话，在工作里面也不怎么会用到，一般是在网站中出现问 题了，那就需要用到css3+html5去修改一下。
㈡ 前端为什么需要构建工具
目前前端构建工具已经非常丰富，大致分一下类：
一类是任务管理工具（task runner）。通过声明和组合构建任务来进行整个网站的构建， 有自己的一套任务声明语法和任务实现接口。例如Grunt和Gulp，这两个都是插件式的架构。有大量的插件可用，缺点就在于做什么都只能用插件，没有就自己写一个。
一类是打包工具（package tool）。通过为每一类文件配置需要的处理方式，来实现整个站点的构建。如 Webpack 和 FIS ，这两个都是整个站点的整体构建解决方案。
一类是构建工具（build tool）。比如 Make 。
㈢ 为什么需要前端构建
JavaScript和CSS的依赖问题
我们经常出现的另一个问题，就是JavaScript和CSS的依赖问题，说的通俗点就是JavaScript和CSS的在页面中的顺序问题！
我们经常发现CSS没起作用，JavaScript的某个变量和方法找不到，有很多情况都是因为引入JavaScript或者CSS的顺序不对，虽
然我们可以使用一些RequireJS之类的模块管理，但是依然在很多情况下需要引入不同的文件，尤其是CSS没有一个好的模块化管理的组件。
那么我们就需要有一个统一的地方来管理JavaScript和CSS的顺序问题，而构建工具可以大大减少此类问题。
性能优化
我们都知道浏览器请求的文件越多越耗时，请求的文件越大越耗时，尤其是在我们现在很多使用前端MVC, MVVM框架的时候，我们为了前端代码更清晰，结构更合理，我们就由很多JS文件，无疑又拖慢了网页的速度。为了解决这个问题，因此我们需要做两件事
文件合并
浏览器需要下载多个JS文件，而浏览器是有并发限制，也就是同时并发只能下载几个文件，假如浏览器并发数是5，你有20个JS文件，而每5个需要2S, 那么你光下载JS文件都需要8S，那么网页的性能可想而知，所以我们需要合并多个文件以减少文件的数量。
文件压缩
我们知道文件越大，下载越慢，而针对JavaScript和CSS,
里面的空格，换行这些都是为了让我们读代码时更容易阅读，但是对机器来说，这些对它没有影响，所以为了减少文件大小，一般的情况我们都会用工具去掉空格和
换行，有时候我们还会用比较短的变量名(记住这个要让工具最后压缩时做，而源代码一定要保证命名可读性) 来减少文件大小。
而所有的前端构建工具都具有文件合并和压缩的功能。
效率提升
Vendor前缀
在CSS3使用越来越多的时候，我们都知道一些CSS的特性，不同的浏览器CSS有不同的前缀，如果我们手工添加将会很繁琐，而如果使用构建工具，很多构建工具可以自动给我添加CSS的Vendor前缀
单元测试
JavaScript的单元测试在使用MVC或者MVVM的框架后，变得越来越容易，而单元测试是质量保证的一个很重要的手段，所以在提交之前，使用构建工具自动跑一遍我们的单元测试是非常重要的
代码分析
我们写的JavaScript很多时候会有一些潜在的bug, 比如忘了添加分号，某个变量没有等等，使用一些JavaScript的代码分析工具，可以很好的帮我们检查一些常见的问题。
HTML引用JavaScript或者CSS文件
比如我们需要使用Bower之类来引用前端JavaScript和CSS的第三方库，那么如果版本升级，添加移除等都用手工来修改HTML的话，第
一比较耗时，第二比较容易疏漏，尤其是在我们需要切换Debug和proction版本时将会有很多额外的工作，那么使用前端构建工具可以很好的解决
这些问题。
㈣ 前端构建工具是干嘛的，为什么要用构建工具
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）。
㈤ 对于前端自动化构建工具有了解吗
gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。
㈥ Web前端常用的工具有哪些
1、jQuery
jQuery由于其无限的教程，没有跨平台/浏览器问题，优秀的用户界面，大量的插件以及它的轻量，快速和快速学习等特点而脱颖而出。超过70%的受访者选择jQuery作为他们的前端库，它是一个快速，轻量级和简洁的JavaScript库，主要用于HTML文档遍历、事件处理、动画和用于快速Web开发的Ajax交互。从本质上讲，jQuery最适合需要快速开发的应用程序。
2、Bootstrap
超过65%的开发者选择Bootstrap作为他们最喜欢的框架来使用，它是一个用HTML、CSS和JS开发的开源工具包。Bootstrap的广泛流行主要是因为它的简单使用、优秀的社区以及大量的文章和教程、第三方插件和扩展、主题构建器等。
3、Angular
如果你打算构建一个动态且强大的单页应用程序，Angular就是你需要的框架。Angular是高度模块化的，因此非常适合与团队分开大型工作，并且使测试和调试变得轻松。功能优先的方法使Angular更加专注于功能，使开发人员的工作更轻松。此外，它还有来自Google社区的出色工具和支持。
4、NPM
NPM是Node的包管理器。借助NPM，开发人员可以安装各种模块进行Web开发，共享和借用软件包，并管理私有开发。它由网站、命令行界面(CLI)和注册表三个不同的组件组成。
5、Webpack
Webpack是现代JavaScript应用程序的模块打包程序，它将前端开发所需的所有资源(如JavaScript、字体和图像)集中到一个地方。如果你正在开发复杂的前端，这特别有用。你可以去通过部署具有的WebPack Web应用程序，以获取有关的WebPack起来和运行。
以上就是青藤小编关于Web前端常用的工具的相关分享，希望对大家有所帮助，想要了解更多相关内容，欢迎大家及时在本平台进行查看哦!
㈦ 常见的前端构建，打包工具有哪些
事实上前端构建过程一般都是建立在前后分离基础上的，你要想让自己的构建过程清晰、简单和方便，请首先将自己的项目前后实现分离。当然这个有难度，所以你的这个场景并不是非常适合gruntjs通常的构建模式。 对应问题讲完，再给你一些建议。
㈧ 前端构建工具是什么
前端构建工具是开发软件一种比较专业性的说法，比如像微软的vs之类的，但是这种工具都不是简单的，想要学好的话还是不容易的。
㈨ 前端构建工具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了），所以这会导致开发环境模板无法引用静态资源。当然，有一种解决方案就是静态资源不改变文件名称，预先写好路径，开发环境和生产环境同名（即覆盖式发布）。