gulp是一個前端工作流管理工具，具體做什麼的？

我在百度上看了很多資料，沒找到合適的答案。

"前端工作流管理"指的是什麼？

具體能在開發中發揮什麼作用？

---

可以看下我這篇文章第一部分 Grunt 新手一日入門

---

弱弱的寫了一篇，弱弱的發了出來：

Gulp 自動化你的前端

---

不知道題主對C是否有了解，在Linux寫C是醬嬸的。

你可以自己用一條一條的gcc來編譯C文件，也可以寫makefile來通過make把這些手工操作自動化。

gulp在前端開發過程中就類似make。

比如我們以前開發寫很多個文件，尤其是近年來諸如coffeescript sass less jade模板以及mvc mvvm這種框架，讓前端開發方便了很多。

僅以js為例，我們可能需要先把coffeescript轉譯成js，然後做一次語法檢查，然後再壓縮合併，最後才部署到生產。

gulp就是用來把上述流程自動化的，並且現在像gulp和grunt這種工具一般都提供額外的實時刷新伺服器，就是說，在開發過程中監視你的文件改變，實時來幫你刷新瀏覽器。

前端開發越來越複雜，gulp就是把流程工具化來提高效率。

---

「工作流」是業務過程的自動化，前端工作流，就是把前端業務中的一些工作用計算機工具自動完成。

Gulp 則是一種前端工作流的工具，它可以解決前端中很多其實並不需要人力參與的工作，例如：

• 壓縮靜態資源
• 變更靜態資源
• 給靜態資源添加 md5
• 修改預處理樣式後自動編譯（SASS，Less）
• 合併雪碧圖
• 自動刷新瀏覽器
• ...

這類工作還可以列舉很多，在前端工作流出現之前，這些工作都由人力完成，而這些工作往往比寫業務本身更加費時，而交給了 Gulp 這類工具，則可以釋放這些人力。

Gulp 這類工具的原理很簡單，都是提供文件的輸入、輸出操作，本身功能很少。但之所以能幫忙開發者解決問題，是因為 Gulp 背後有大量已經寫好的插件，開發者只需引用這些插件，寫少量的代碼則可以解決問題。例如需要合併項目中所有 JavaScript 庫，可以這樣處理：

var concat = require("gulp-concat");

gulp.task("scripts", function() {
return gulp.src("./lib/*.js")
.pipe(concat("all.js"))
.pipe(gulp.dest("./dist/"));
});


這只是其中一個最常規的任務，如果你熟悉了 Gulp 插件的開發，還可以自行編寫插件。

最後推薦 QMUI 團隊 · GitHub 最近剛發布的框架 GitHub - QMUI/qmui_web: A front-end framework designed to improve the efficiency of UI development.

---

看一看這個系列的文章：針對移動端的前端工作流(1)

文章中談及的基礎庫就是一套基於gulp的前端工作流，讀讀源碼中的gulpfile.js，你可以知道以下功能是如何配置實現的。

1. Sass編譯
2. Css Js 圖片壓縮
3. Css Js 合併
4. Css Js 內聯
5. Html的include功能
6. Autoprefixer
7. 自動刷新
8. 去緩存
9. Handlebars模板文件的預編譯
10. 雪碧圖
11. ESLint
12. rem移動端適配方案

---

你看下做得好的網站，他們的腳本樣式文件都是壓縮合併過的，根據自己的需要還可以做md5之類的操作。以前沒有前端構建工具的時候，估計還得用像shell來做或者手動來做，但我沒經歷過那個階段所以也是猜測啦。grunt出來後，可以說就是為了減少前端手動做這種工作的流程化工具，個人覺得並不是工具上帶來了什麼新鮮的東西，而是托node的福，前端可以不用去學新的語言就可以去用去寫適合自己的前端構建流程，我grunt task一下，打包壓縮什麼一大堆的事情就幫我做好了，想想都覺得痛快！後來又有人嫌grunt過於冗餘繁雜，就有了gulp，現在還有像browserify，webpack，都是為了適應前端構建需求的不斷產出的東西。本人都用過這些工具，不過不能說很熟悉，只是自己也是從題主一樣的狀態過來的，所以說下自己想法哈。

---

謝邀，你可以把它理解為make，一個可以幫你運行繁雜任務的工具，比如你用了sass，coffeescript，這兩個東西都有自己的命令行工具，但是你開發的時候開兩個終端窗口，分別運行這兩個命令行工具是不是很麻煩？gulp就是把這些集合成一個命令的工具，運行個gulp xxx，自動同時監聽不同的目錄下的文件修改，並編譯。

---

可以參考我之前寫的一篇入門文章

gulp 使用指南

---

前端開發的 "Jenkins Pipeline"

---

前端模塊化，提高開發效率。

---

題主知道grunt么？ gulp是做類似工作的，不同的是gulp基於流，效率高很多。

---

推薦閱讀：