模塊化前端編譯與構建工具

Ⅰ 前端開發常用哪些工具軟體

前端開發的編譯器在選擇上還是很多的。在學校里，老師主要講三個前端開發軟體：

1、WebStorm

幫助編寫HTML、CSS、Less、Sass和Stylus代碼，並且支持Node.js和主流框架，如React、Angular、Vue.js、Meteor等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。但是付費軟體。

2、IntelliJ idea

頁面很簡單，乍一看像是一個記事本，它也確實可以當記事本用。有很多特色插件可以使用，支持多種編程語言的語法高亮顯示，具有代碼折疊功能。

2、HBuilderX

HBuilderX是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了java、C、Web和Ruby。HBuilder本身主體是由Java編寫。是HBuilder下一代版本，具有輕便、適合vue框架的特點。

Ⅱ 前端構建工具是幹嘛的，為什麼要用構建工具

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）。

Ⅲ 前端構建工具Gulp.js 你知多少..(webpack/gulp/grunt)

@ TOC

閱讀本文章之前，相信你已經對前端構建工具(webpack、gulp、grunt)有一定的認知和了解了，那麼他們之間究竟有什麼區別呢？

gulp文檔上面有這么一句話 ，也就是說 gulp是一個自動化構建工具；
gulp的一些功能如下(包括但不限於):

其實Webpack和另外兩個並沒有太多的可比性

傻瓜式起步照搬官網文檔
1.安裝

2.在項目根目錄下創建一個名為 gulpfile.js 的文件：

3.運行 gulp：

默認的名為 default 的任務（task）將會被運行，在這里，這個任務並未做任何事情。
具體詳情可以查看 gulpjs.com文檔

新建一個項目gulp-test
環境:

1.新建文件以下文件如下

其中 gulpfile.js 是我們gulp的配置文件，啟動gulp默認會找個這個文件並執行；
2.接下來安裝依賴

一直按回車Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁瑣的enter步驟)
此時我們的目錄結構是這樣了

安裝依賴

這里頁面實時刷新只講這個 gulp-connect ，其他詳情可以參照 Browsersync 和文章 gulp-livereload

安裝完依賴後配置gulpfile.js如下:

大概講解一下gulpfile.js:

gulp.task 是gulp的api 定義一個使用 Orchestrator 實現的任務（task）
如上我們定義了 my-task-js ， my-task-css ， html ， clean ， default ， watch ， server 等任務，其中:

my-task-js 是將 符合所提供的匹配模式的js 進行檢測(gulp-jshint)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/js目錄下；

my-task-css 是將 符合所提供的匹配模式的sass進行編譯(gulp-sass)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/css目錄下；

html 是將 符合所提供的匹配模式的html進行監聽，如果有變化則connect.reload()

clean 是如果任務重新啟動時 刪除舊文件；

default gulp默認啟動的任務

watch gulp的api 監視文件，並且可以在文件發生改動時候做一些事情。它總會返回一個 EventEmitter 來發射（emit） change 事件。

server 依賴gulp-connect啟動一個伺服器

配置完gulpfile.js之後，我們給js和css及html加點東西:

首先js/helloworld.js

css/index.scss

index.html

運行gulp

瀏覽器效果:

接下來我們修改helloworld.js來看看是否能實時刷新
修改如下:

按保存之後，終端給我們報了一個錯:

查看js發現我們用了es6語法的聲明語句 但當前gulp無法處理es6語法，有問題解決問題，es6=>es5

解決方案:
安裝gulp-babel babel-core babel-preset-es2015

gulpfile.js修改如下:

運行

依然報上面的錯；找了一些原因發現，雖然安裝了相關依賴，卻沒有配置.babelrc文件，即babel還沒轉化es6

根目錄添加.babelrc文件

重新運行:

查看dist下的js文件

改變helloworld.js檢查頁面是否刷新

保存，頁面的天空藍換成你們喜歡的yellow顏色

修改index.scss 查看是否會刷新頁面

最後修改index.html 查看是否會刷新頁面

今天主要學習了gulp的簡單項目搭建及實時更新配置；其實gulp類似於grunt的弱化版，但更簡單好用，只是插件會少一些，目前主流的項目搭建工具主要是webpack，但依然有不少項目還用著gulp或者grunt

擴展:

下面還有一些樓主的學習筆記:

有興趣的可以多多交流@ 樓主博客

Ⅳ 前端構建工具是什麼

前端構建工具是開發軟體一種比較專業性的說法慶旦，比如像微軟的vs之類的，但是基擾這種工具都不是簡單的，想要學好的話還是不容易搏差旦的。

Ⅳ 現在比較好用的前端開發工具有哪些啊

1. node.jsnpm， 這個是前端工具的一個平台，沒有舉拿他們就沒有以下的工具，建立開發環境，下載開發工具，運行開發工具的利器

2. bower, 庫依賴管理器，類似於npm，但針對瀏覽器JavaScript的依賴管理，減少尋找庫，下載庫和升級庫的煩惱

3.grunt，流程自動化管理工具，將你非編程的開發步驟減到最小，grunt watchliveReload或者grunt connect,可以使得免除你F5無盡地獄，發布和開發各種無壓力。以下大部分開發工具，都有grunt的相對應的插件，也就是說他們都能利用grunt進行自動化運行

5. 本人用less比較多，因為基本無縫兼容歷史遺留系統中的css，（而Sass語法比較特殊，還沒有專門用過，應該開發新系統的css比較好），一套css預編譯語言，可以把less語法轉成css語法，lessc是less語言編譯器，配合grunt less，編寫大型css文檔毫無壓力。

6.Phantomjs，沒有界面的瀏覽器，用js腳本控制其操作網頁。測試，抓圖，網頁流程自動化利器。配合casperjs的語法簡化功能真強庫後，控制Phantomjs就更加容易了

7. grunt PhotoBox, 利用phantomjs抓圖功能和ImageMagick圖片比較功能，在利用live-reload即時刷新功能，可以讓你開發css的時候，快速對n多個頁面進行觀察，看其前後變化。不過缺點也比較明顯，就是速度慢。但比起手動對比來看，還是非常快的。值得css開發時擁有

8. phantomCSS，這個和grunt photobox類似，都用於css開發的，差別是photobox是全局觀察差別，而這個是單元組件觀察差別，它方便你就抓頁面中某一塊元素然後進行前後比較，更加註重細節上的差異，這個比較合適組件開發時候使用。

9. jshint，幫助你快速定位JavaScript的語法錯誤和潛在的跨瀏覽器兼容性問題。在部署你JS前，用jshint檢查一下是沒錯的 。

10.UglifyJS，壓縮JavaScript代碼，使你的JS代碼可以更加快速的載入。有grunt的插件

11. browserify允許你在瀏覽器裡面使用CMD標准模塊，但本人認為它的另外一個優勢是合並代碼，開發時候可以把代碼模塊化，分缺者成很多很多小文件，然後有調理的放到相對應文件夾下，然後最後合成單一文件。本人曾經利用browserify開發代碼，大大簡化了的開發難度和增強了代碼的質量。browserify有grunt插件，這樣又減少的開發步驟。

12. Karma， google開發的一個單元測試運行器，這個自己本身不是一個單元測試框架，而是配合測試單元框架的一個工具。由於前端瀏覽器眾多，就算你有live-reload這樣自動化工具，但是還是要手動打開各種瀏覽器，手動把你的單元測試在各伏答薯個瀏覽器都運行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器，然後把單元測試在各個瀏覽器中自動運行一遍，讓這個步驟也能自動化了。

13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin實際上背後使用的是clean-css工具，這個工具就是用來壓縮精簡css的，讓css文件大小更小。

Ⅵ 前端開發是做什麼的工作職責有哪些

前端開發是做PC端開發任務;而Android開發、iOS開發和各種小程序主要針對的是移動端開發工作的。

1、使用Vue/React開發，配合產品完成 Web/Electron項目迭代；

2、收集、分析項目需求並給出技術解決方案，完成高質量的編碼開發、調試和版本維護工作；

3、深入分析和解決前端遇到的各種技術、性能、跨終端兼容等問題，持續優化前端用戶體驗與框架；

4、協助前端開發工程體系建設與落地。

任職資格：

1、35周歲以下（含），211院校本科及以上學歷，計算機相關專業優先，具備3年以上前端開發經驗者優先；

2、掌握至少一種主流框架並深入了解其原理，熟悉前端研發生態圈，包括模塊化、前端編譯和構建工具；

3、熟悉主流瀏覽器的特點，對桌面跨平台有深入了解更佳；

4、有完整參與一個產品的設計、開發到上線過程，對前後端協作模式、產品和項目流程、網路和安全有深入理解，有大型項目前端架構部署和實踐經驗優先；

5、關注前沿技術，具備較強學習能力，在各大技術社區活躍者、有自己開源項目者優先；

6、具備良好服務意識、責任心以及團隊溝通與協作能力。

Ⅶ Web前端開發常用工具的全部推薦

1、AptanaStudio

AptanaStudio是一個集成式的Web應用程序開發環境，它不僅鋒臘可以作為獨立的程序運行寬基笑，而且還可以作為Eclipse插件使用。所以，如果您已經安裝了Eclipse的話，就可以將Aptana作為插件直接安裝到您的Eclipse環境中。早起作為一個插件可以集成與Eclipse中來開發前端，現在已經獨立出來，也是我最早接觸js所使用的一款開發工具，如果熟悉了Eclipse快捷鍵的小夥伴可以快速上手。

2、Vim

Vim作為一個類似於Vi的文本編輯器，功能強大的同時還可以做到高度可定製。當然了，雖然Vim類似Vi，但是它在Vi的基礎上改進和增加了很多特性，VIM是純粹的自由軟體。即使Vim的學習成本高，但只要我們掌握很多的快捷鍵和一些小技巧，它就能大大提高Web前端開發的工作效率。

3、PrettierPlayground

Prettier是一種代碼格式化程序，支持JavaScript，包括ES2017、JSX、Angular、Vue、Flow和TypeScript等。它會用符合標准並遵循最佳實踐的樣式替換掉你原來的樣式。這個方便的工具在我們的IDE中非常流行，但是它也有自己的在線版本，你可以在裡面優化你的代碼。

4、EnjoyCSS

EnjoyCSS是一款非常簡單的工具，尤其對於不擅長使用CSS的前端開發者來講。它為用戶提供了簡單的UI，讓用戶可以設計元素，並提供對應的CSS輸出。

5、Postman

在前端開發的過程中，Postman可以說是必備的開發工具之一。它能在後端檢查端點，而且非常好用。它的出色表現讓我把它放到了這慎含里。它包含的端點包括GET、POST、DELETE、OPTIONS和PUT之類。可以稱之為絕對不能錯過的一款工具。

6、Bit.dev

軟體開發的一項基本原則是代碼可重用性。這可以減少你的開發工作，因為你無需從頭開始構建每個組件。這正是Bit.dev所做的。它使你可以共享可重用的代碼組件和代碼片段，從而減少開銷並加快開發流程。它還允許在團隊之間共享組件，這使你的團隊可以與其他團隊更好地協作。

7、StackBlitz

StackBlitz是所有用戶最喜歡的在線IDE工具。主要原因是它將我們最喜歡和最常用的IDE——也就是VisualStudioCode，引入了Web端。StackBlitz允許你一鍵設置Angular、React、Ionic、TypeScript、RxJS、Svelte和其他JavaScript框架。一鍵設置這個功能意味著開發者可以在極短的時間內開始編碼。有了StackBlitz，你只需不到幾分鍾的時間就可以試用新的NPM軟體包，而無需從頭開始在本地創建項目。

以上就是關於Web前端開發常用工具的全部推薦，大家要是想提供自己的工作效率，現在就趕緊用起來吧！

Ⅷ web前端開發常用工具有哪些

Web前端開發是目前非常有「錢」途的行業，不僅從業人員眾多，相應的開發工具也不斷涌現。有人想知道前端常用的工具有哪些？有人好奇杭州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、字體和圖像）集中到一個地方。如果你正在開發復雜的前端，這特別有用。你可以去通過部署具有的WebPackWeb應用程序，以獲取有關的WebPack起來和運行。

除了以上工具，還有Sass、React等，根據企業所用工具的不同，你需要掌握的工具也不一樣。但熟練應用這些工具的前提是你具備扎實的理論基礎，至於杭州Web前端學習班會教哪些工具的使用，我們需要關注其課程設置，還需要注重學習機構的教學模式，畢竟掌握工具的用法比只掌握工具更重要。

Web前端開發是目前非常有「錢」途的行業，不僅從業人員眾多，相應的開發工具也不斷涌現。有人想知道前端常用的工具有哪些？有人好奇杭州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、字體和圖像）集中到一個地方。如果你正在開發復雜的前端，這特別有用。你可以去通過部署具有的WebPackWeb應用程序，以獲取有關的WebPack起來和運行。

除了以上工具，還有Sass、React等，根據企業所用工具的不同，你需要掌握的工具也不一樣。但熟練應用這些工具的前提是你具備扎實的理論基礎，至於杭州Web前端學習班會教哪些工具的使用，我們需要關注其課程設置，還需要注重學習機構的教學模式，畢竟掌握工具的用法比只掌握工具更重要。

Ⅸ 前端為什麼需要構建工具

目前前端構建工具已經非常豐富，大致分一下畝嘩類：
一類是任務管理工具（task runner）。通過聲明和組合構建任務來進行整個網站的構建， 有自己的一套任務聲明語法和任務實現介面。例如Grunt和迅扮行Gulp，這兩個缺顫都是插件式的架構。有大量的插件可用，缺點就在於做什麼都只能用插件，沒有就自己寫一個。
一類是打包工具（package tool）。通過為每一類文件配置需要的處理方式，來實現整個站點的構建。如 Webpack 和 FIS ，這兩個都是整個站點的整體構建解決方案。
一類是構建工具（build tool）。比如 Make 。

Ⅹ Web前端開發需要哪些工具

前端開發中需要掌握最基礎的技能就是HTML、CSS，JavaScript。春差前端的開發中，在頁面的布局時， HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現相應的效果和交互，在進行開發前，需要對這些概念弄清楚，才能進行合理的開發。

在網頁建設的過程中，為了避免代碼的繁瑣雜亂，更高效快速地完成任務，就會使用到一些有代碼高亮提示和彎森慧語法提示等便捷功能的前端開發工具。

1，Dreamweaver：中文名「夢想編織者」。是集網頁製作和管理網站於一身的所見即所得網頁代碼編輯器。它可以使用所見即所得的介面，亦有HTML編輯的功能，藉助經過簡化的智能編碼引擎，輕松地創建、編碼和管理動態網站。訪問代碼提示，即可快速了解 HTML、CSS 和其他Web 標准。 使用視覺輔助功能減少錯誤並提高網站開發速度。

2，Sublime：Sublime Text 是一個代碼編輯器，也是HTML和散文先進的文本編輯器。Sublime Text 的主要功能包括：拼寫檢查，書簽，完整的 Python API ， Goto 功能，即時項目切換，多選擇，多窗口等等。

3，HBuilder：是DCloud,推出的一款支持HTML5的Web開發IDE。 HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。

有了工具，接下來還得靠我們人來操作。你必須熟悉三種語言，把埋答這些概念弄明白，才能開發出好的作品。