『壹』 前端用哪些常見的開發工具
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前端所需的技能點，參加學習班是明智的。