㈠ 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了），所以這會導致開發環境模板無法引用靜態資源。當然，有一種解決方案就是靜態資源不改變文件名稱，預先寫好路徑，開發環境和生產環境同名（即覆蓋式發布）。