前端构建工具是什么？
构建工具是什么？它有什么作用？
关注者
285被浏览
90,93013 个回答
谢邀。
说到构建工具，我往往会在前面加「自动化」三个字，因为构建工具就是用来让我们不再做机械重复的事情，解放我们的双手的。
举个栗子：
我喜欢使用 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
```_____________________
好了，填完坑继续搬砖。