前端框架可以直接使用，為何需要nodejs/gulp等工具?

01-02

前端新手，初步了解了bootstrap和semantic ui，對這些框架的理解是需要什麼就直接寫相應的class。看文檔時發現二者都有提及node和gulp等工具，但因為不理解使用這些工具的目的和用處，所以也一直沒花時間看。想在學習這些東西前請教一下學習的必要性及用處

謝邀。

你說的 Bootstrap 等都是 CSS 框架，確實只需要寫相應的 class。然而，Node、Gulp 並不是同一類型的東西，也就是說並不是 CSS 框架。

我先來講 Gulp：

假設有這麼一個 HTML：

& & && & &

當你寫 CSS 的時候，你可能會這樣寫：

.a { background: blue; } .a .b { background: red; } .a .b .c { background: black; }

你會發現，這樣老是要把父級元素寫出來，超煩！於是我們有了 Less、Sass 等 CSS 預處理器。

現在，用我比較喜歡的 Less，那麼上面那段代碼就變成：

.a { background: blue; .b { background: red; .c { background: black; } } }

（備註：知乎居然不支持 Less 語法高亮，湊合著看吧~）

然後，我們用 less 命令，那麼這段 Less 代碼就會被編譯成上面那樣的 CSS 了。這樣嵌套地寫，是不是爽很多？

但是問題來了，當 Less 文件超多，我們總不能老是自己手動去執行 less 命令吧？那麼 Gulp 是時候現身了。

（中間省略具體怎麼寫 Gulp 任務，請自行學習 Gulp）

於是我們只需要在命令行里執行 gulp 命令，那麼 Gulp 就會根據我們寫的 Gulp 任務來自動處理你的所有 Less 文件了。我們還可以使用 gulp watch 命令，使得每當我們修改 Less 文件時它就會自動幫你再編譯一次，這樣你就可以直接在瀏覽器里刷新看到新的效果了。

然後是 Node.js：

Node.js 你可以理解為一種用 Javascript 去寫後端程序的框架，正是因為它是使用 ECMAScript 語法的，也就是說它跟 Javascript 的語法是一樣的，所以它對於前端工程師來說是友好的，前端工程師不需要再去掌握另一種比如 PHP、Java 這樣的語法。

通過 Node.js，前端工程師可以自己在後端架設一層專門用來渲染頁面的 UI 層，不需要去依賴後端，後端只管提供介面和服務就好，這就是大前端。

暫時只講這麼多吧~

瀉藥。

本來想吐槽的，寫了不少，想想沒必要還是好好回答一下吧。

1，必要性不大，沒出這2個東西之前，前端開發大家都乾的好好的，所以你說非要用是扯淡的。

2，前端框架和這2個東西關係不大，nodejs是語言，gulp是nodejs開發的一個工具，這2個東西都是後端的東西。

好了，說說作用吧。

作用是肯定有的，沒出現gulp的時候有grunt，grunt沒出現的時候用ant，ant沒有的時候，可能是用bash shell或者java或者php或者等等許多其他語言開發類似的工具，make應該也算是一種。ant，grunt，gulp等都是工具。

這些工具最初的作用是神馬呢？為什麼前端開發需要呢。

當我們開發一個項目的時候，我們會遇到 @Jasin Yip 所說的那些問題，但是這只是其中一個方面，我們會編譯less成為css，會編譯coffee成為javascript，就像我們用make或者ant編譯其他語言的源碼一樣。

我們開發的時候會遇到各種類似問題，所以我們需要一系列的解決任務。

神馬意思呢？

我們需要編譯less，編譯coffee，處理css中的圖片路徑，壓縮項目中的圖片文件，合併項目中的js代碼，壓縮代碼，混淆代碼，提交代碼，刪除沒用的臨時文件，移動到某個目錄，再進行提交操作或者各種奇奇怪怪的事。

所以當你的項目比較複雜的時候，你是無論如何都要進行許多次的同樣或者類似的任務，最終才能產生最後所需要的東西，這個過程有許多的解決辦法，gulp就是其中之一。幫你一次配置，多次快速執行。

最後，nodejs和gulp的關係就是爹和兒子關係。

第一次看到 gulp/grunt 的文章時我也不清楚它們的作用。大量的教程都是零散的說某一個插件的使用方式。對於當時的我並不理解為什麼要用它們。所以我寫了一系列的gulp基礎教程來說明為什麼要用 gulp 去構建項目。

nimojs/gulp-book · GitHub

gulp 是基於 node 實現 Web 前端自動化開發的工具，利用它能夠極大的提高開發效率。
在 Web 前端開發工作中有很多「重複工作」，比如壓縮CSS/JS文件。而這些工作都是有規律的。找到這些規律，並編寫 gulp 配置代碼,讓 gulp 自動執行這些「重複工作」。

一名合格的前端開發工程師應該至少會使用一種構建工具。

你使用bootstrap 或者semantic ui的時候，是不是直接使用了他的.min.js 或者 .min.css，然後你會發現，你只使用了其中一小部分的功能，那麼其他的功能所佔的資源空間是不是浪費了呢，或者說，你發現這個功能不滿足你的需求，我想更改他的代碼，來滿足新的需求，那麼我們會去看他的代碼進行修改。可是如此大的代碼，具體該修改哪一行呢？我們會發現他提供了各個代碼的模塊，我們只需要修改該模塊即可。最後如何將這些修改後有用的模塊變成我們需要的.min.js /.min.css呢，gulp就出現了，他提供插件自動合併壓縮你的代碼，那麼gulp是怎麼做的呢，發現他使用環境需要nodejs,nodejs可以提供操作流，操作文件等IO功能，也提供了http socket等網路功能（就是傳統的後端語言）。所以，使用node,gulp是為了你的個性化需求，是為了你的代碼優化，是為了你的資源不浪費。

不論是使用框架還是使用工具，我們的目的不是非的沒事找事給自己增加複雜度和維護成本。

而是，我們要學著偷懶，啊不，學著擁抱變化，讓項目可維護，提高效率，節約成本。

關於前端樣式重要性和框架比較，之前有一個簡單的內部歸納分享，稍後不知道什麼時候整理下，可以考慮放出來...

先說說node和gulp帶來的便利：

上面這樣的目錄，在開發的時候是可以非同步一個一個文件載入的，性能問題不大，但是上線的時候，幾十上百個文件怎麼尋找依賴和合併成一個或者幾個腳本文件呢。

其中有十幾個腳本不知道散落在哪裡，名為什麼，但是和新的文件有書寫差異，可能需要特殊處理，需要手動在這些目錄中翻找並修改么。

改動後，怎麼確定不會影響到之前的邏輯，測試人肉覆蓋么，邏輯多了之後，要累死人的...

想在寫碼的時候，自動刷新瀏覽器並查看效果怎麼實現，或者沒有伺服器環境，想臨時有一個環境，然後直接在瀏覽器上看效果怎麼辦。

上面所有的問題都可以用node寫簡單的js腳本來解決，並且許多你想要的解決方案，已經有好心人封裝成了grunt/gulp/etc..腳本來幫助大家（當然，個別時候，你還是需要修改一下的）

你說你看過了項目，但是沒理解這些工具的用處，或許是你沒有實踐這些工具，以及看工具的執行效果。

當你運行配套的工具後，你會發現項目中的SASS/LESS在一個新的目錄中變成了單個文件，並壓縮配套了sourcemap，一堆JS腳本，合併變成了幾個文件，並自動引用進了demo頁面。

最後，比如下面這個工具的需求，如果不使用你所提到的工具來解決的話，大概要繞很大一個圈子的：

項目地址： soulteary/generator-lazy · GitHub

更多偷懶工具：bower/npm/yeoman/...

分清楚庫，框架，工具插件的作用。

你只需要引用或者調用，就可以直接用，並不會對你做太多約束。那麼這種大部分都稱之為庫。

需要按照他的標準構建文件結構或者文件夾結構或者代碼書寫方式那麼這東西可以稱之為框架。

解決開發過程中重複或者需要自動化智能化完成事情，那麼這就是常說的工具。

基於庫，框架，工具，提供的補充優化的模塊就叫做插件。

你說的bootstrap和semantic ui 這屬於框架，他要求你的html代碼按照框架提供的結構調樣式。

node是一門語言，gulp是用node開發的。

gulp是一個工具，通過正確的配置，能夠自動化處理你在做項目以後需要完成的一系列的重複工作。比如，壓縮代碼，合併代碼，檢查語法是否正確，優化圖片等等你可以需要手動重複處理的事情。

這些東西存在的目的都是為了讓你更輕鬆的專註於寫代碼，而不是干苦力維護代碼。

一切工具的出現，究其根本原因，就一個字

。

懶

主要還是為了開發過程工程化吧，把很多手工操作、人腦運算自動化了。

delphi qt是ide官方自帶

htmljscss沒有這是各種所謂新技術紛雜的原因

本質是缺個一鍵出目標代碼的ide 每個人都覺得自己的最好重複造輪子而已

這倆玩意能做的，簡單的任務動動手，也能寫出來。

合併，壓縮，自動執行任務。

配置比較繁瑣，往往事倍功半。

前端框架是一個框架，但不是一個工作流，不能自動完成你的前端工作。前端包括js、css壓縮混淆、js模塊打包、編譯、圖片壓縮、md5版本戳、icon－font轉換等，僅僅一個前端UI框架不會有這些工作。關於工作流框架，就是能自動完成上述功能的框架，有FIS3、webpack、gulp等，FIS3可以定製各種工作流需求，不過有點黑盒，gulp有一個封裝成套的框架gulpman可以用一下： GitHub - xunuoi/gulpman: Component Oriented Front-End Build and Develop Solution, based on gulp. Integration with ES6、Reeactjs、Babel、Browserify and Karma, coverate for unit test. A Complete Wrokflow 僅通過一個配置文件就能完成絕大多數的配置，比較傻瓜，整合了react、es6、 karma測試等。另外webpack是一個所有都可以require的概念，包括圖片等。

補充一下，NodeJS不是一個語言，也不是一個框架，只是一個單純的JavaScript運行時，或者說實現。

等價物相當於GCC、PyPy這類東西。

NodeJS並不是Web伺服器，只是提供了相應的庫能讓你快速寫出Web伺服器。

你用到的前端褲一般都會有個.min版本嗎，同樣我們寫一個項目時分下版本. 開發時不做壓縮，但部署正式環境時能壓縮的壓縮，合併的合併。gulp用來做這些剛好

node.js是一個js編寫的基於chrome的js引擎的伺服器端平台。gulp是一個編譯、打包、壓縮js、css等文件的工具。

看了這麼多我明白了，也就是說簡單的項目不需要，只有大型項目比較複雜的事後為了減輕工作量而去弄得，恩，我還是自己寫寫寫吧

監聽頁面改動，可以實現自動刷新。就沖這個功能，你也該研究研究它

其實很簡單，框架即框架，grunt和gulp只是基於nodejs的自動化工具

前端自動化構建，比如多個js文件的合併，js檢查，js，css壓縮。如果不研究源碼的話，直接拿release版用就是了

最近一個網站項目，開發人員準備直接把前端的代碼拷貝到生產環境來部署，而且使用Ant來執行拷貝，這樣就可以前後端一起部署了。這是傳統後端開發人員的思維。這樣做固然可行，但是當前端代碼越來越龐大時，就不好管理了。如同Java的Ant，C++的Make，前端開發也有其構建工具，這裡就介紹一個超簡單的構建工具Gulp.js。

前端構建工具Gulp.js - SDK.CN - 中國領先的開發者服務平台