webpack与grunt/gulp的对比

grunt/gulp的核心是Task

• 我们可以配置一系列的task，并且定义task要处理的事务（例如es6，ts转化，图片压缩，scss转成css）
• 之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。
• 所以grunt/gulp也被称为前端自动化任务管理工具

来看一个gulp的task

• 下面的task就是将src文件下所有的js文件转换成es5 的语法
• 并最终输出到dist文件夹中

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('js', () =>
	gulp.src('src/*.js')
		.pipe(babel({
			presets:['es2015']
			}))
			.pipe(glup.dest('dist'))
);

什么时候用grunt/gulp

• 如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念只需要进行简单的合并压缩，就使用grunt/gulp即可
• 但如果整个项目使用了模块化管理，而且相互依赖非常强，就可以用webpack

所以grunt/gulp和webpack有什么不同

• grunt/gulp更加强调的是前端流程的自动化，模块化不是他的核心
• webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能