前端構建工具是什麼？

構建工具是什麼？它有什麼作用？

---

謝邀。

說到構建工具，我往往會在前面加「自動化」三個字，因為構建工具就是用來讓我們不再做機械重複的事情，解放我們的雙手的。

舉個栗子：

我喜歡使用 CoffeeScript/ES6 去代替 Javascript，但瀏覽器對這些語言是不支持或者支持得不完整的，那麼我需要把它編譯成 Javascript(ES5)，讓它可以在瀏覽器里運行起來，那麼我要如何做呢？

a.coffee

console.log "Hello World"


執行編譯命令

coffee -c a.coffee


得到 a.js

(function(){
console.log("Hello World");
}).call(this);


執行壓縮醜化命令

uglify -s a.js -o a.min.js


得到 a.min.js

(function(){console.log("Hello World")}).call(this);


如果我們現在需要修改一下代碼，比如在 Hello World 後面加一個感嘆號，那麼上面那兩條命令就又要再執行一遍了。

同樣的，我們會用 Less 去寫 CSS，會用 Jade 去寫 HTML，會用 Browserify 去模塊化、為非覆蓋式部署的資源加 MD5 戳等等。所有的一切，如果用手動來做，簡直要瘋了！而自動化構建工具，就是為我們完成這一套重複而機械的工作的。

以 gulp 為例，編寫 gulpfile.js：

gulp = require("gulp")
coffee = require("gulp-coffee")
uglify = require("gulp-uglify")
rename = require("gulp-rename")

file = "./src/js/a.coffee"

gulp.task("coffee", function(){
gulp.src(file)
.pipe(coffee()) // 編譯
.pipe(uglify()) // 壓縮醜化
.pipe(rename({
extname: ".min.js"
})) // 重命名
.pipe(gulp.dest("./build/js"))
})

gulp.task("watch", function(){
gulp.watch(file, ["coffee"])
})

gulp.task("default", ["coffee"])


這樣，我只要執行一下 gulp watch，它就可以自動監視 a.coffee 的變化，每次修改 a.coffee 並保存後，它就會自動執行編譯-&>壓縮醜化-&>重命名這一系列動作了。

自動化構建工具是前端工程化必不可少的，希望這個簡單的栗子能幫助到你。

---

早上占坑晚上填，真的不給點贊么！

項目：Node項目模板/前端自動構建。

地址：MT-Libraries/MT-Project-seed · GitHub

簡介：

## Structure

```
├── backend
│ ├── app_run.json # 運行環境
│ └── enum_env.json # 運行環境枚舉
├── frontend
│ ├── bower.json # 包管理
│ ├── gulpfile.js # gulp配置文件
│ ├── public
│ │ ├── css # 開發與生產環境的css文件
│ │ ├── js # 開發與生產環境的js文件
│ │ └── vendors # 公共庫
│ │ └── normalize.css
│ ├── src
│ │ ├── css
│ │ │ ├── less
│ │ │ └── less-page # 待編譯的css頁面
│ │ ├── js
│ │ │ └── js-page # 待編譯的js頁面
│ │ ├── rev # 版本號信息
│ │ │ ├── css
│ │ │ └── js
│ │ └── tpl
│ │ └── dev # 開發環境模板
| | └── pro # 生產環境模板
│ └── webpack.config.js # js配置文件
└── package.json
```


_____________________

好了，填完坑繼續搬磚。

---

？看看是什麼，有什麼用，這個圖是我的配置文件，應該可以說明了

---

手機打字，錯別字各位自行腦補。

就是因為以前的前端太low了，沒學過C啊Java啊，所以不知道有 make、Ant 這種東西，甚至連命令行都不會用。

一直都是寫什麼運行什麼，不編譯不打包。

直到 Node.js 出現之後，終於有素質不錯的前端看不過去了，說不能再這麼裸著寫JS了，至少檢查下分號有沒有少加吧，於是用JS寫了一些字元串檢查的工具，用來檢查代碼。

順便把一直看不順眼的Java打包工具 Closure Compiler用JS來改寫。

但是由於前端 bash 水平薄弱，不會用 .sh，於是有人搞出 Grunt Gulp，方便前端用 JS 來配置。

對的，你發現了，現在的前端除了JS，什麼都不會，都不喜歡。

你說前端搞一大圈，最後還不是回到 npm script，這是為啥。

就是見識太少，看到JS社區出個什麼都覺得是好東西，卻不知道是炒其他語言的冷飯。

我只說偏激的觀點，你自己判斷對錯。

---

推薦閱讀：