前端构建工具是什么
感谢原知乎答案,前端构建工具是什么? - 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 并保存后,它就会自动执行编译->压缩丑化->重命名这一系列动作了。
自动化构建工具是前端工程化必不可少的。