Gulp和Webpack的区别

Gulp和Webpack的区别

gulp ：是一个项目的构建流程，构建工具。
webpack ：JS的打包工具，插件的出现，也可以做一些项目的构建。更偏向JS打包

gulp

基于nodejs stream的
常用的命令：
 gulp.task("html", function(){
    gulp.src("src/html/*.html")
    .pipe(gulp.dest("dist"));
});
gulp.task("watch",function(){
    gulp.watch("src/html/*.html",["html"]);
});

.src  输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。

.watch  监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

.dest   能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

.pipe  传入方法的是一个function，这个function作用无非是接受上一个流（stream）的结果，并返回一个处理后流的结果(返回值应该是一个stream对象)。

.task  定义一个使用 Orchestrator 实现的任务（task）

gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。

webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。 Webpack是前端构建工具，实现了模块化开发和文件处理。他的思想就是“万物皆为模块”，它能够将各个模块进行按需加载，不会导致加载了无用或冗余的代码。所以他还有个名字叫前端模块化打包工具。

虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

gulp与webpack上是互补的，还是可替换的，取决于你项目的需求。如果只是个vue或react的单页应用，webpack也就够用；如果webpack某些功能使用起来麻烦甚至没有（雪碧图就没有），那就可以结合gulp一起用。

• 项目如何拆分文件夹

使用打包工具 必须要有src文件夹（css html js）
js css内又有common base 所有使用，部分使用
util 工具的集合