前端构建工具是什么?

前端构建工具是什么

感谢原知乎答案，前端构建工具是什么？ - Jasin Yip的回答 - 知乎

前端构建工具通常可以在前面加【自动化】三个字，就是用来让我们不再做机械重复的事情，解放我们的双手的。

---

举个栗子：

比如想用 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为例，编写glupfile.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(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 并保存后，它就会自动执行编译->压缩丑化->重命名这一系列动作了。

自动化构建工具是前端工程化必不可少的。