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 工具的集合