【简单理解】gulp和webpack的区别
Gulp和Webpack的基本区别：
gulp可以进行js，html，css，img的压缩打包，是自动化构建工具，可以将多个js文件或是css压缩成一个文件，并且可以压缩为一行，以此来减少文件体积，加快请求速度和减少请求次数；并且gulp有task定义处理事务，从而构建整体流程，它是基于流的自动化构建工具。
Webpack是前端构建工具，实现了模块化开发和文件处理。他的思想就是“万物皆为模块”，它能够将各个模块进行按需加载，不会导致加载了无用或冗余的代码。所以他还有个名字叫前端模块化打包工具。
就我而言，我在实际当中会将两种都选择混合使用。虽然两个都可以进行代码的压缩合并减少代码体积，但gulp.config.js中gulp的代码更加简单易懂，需要压缩合并谁就用哪个方法，而webpack样式合并需要在node环境下下载插件才能使用。另一点，gulp 是基于流的打包工具，需要谁，引用谁，并且他的压缩简单明了，后期维护起来方便，webpack则可以将具体的模块进行划分，需要哪个模块就加载哪个模块，实现按需加载，并且排除掉冗余代码，减少代码体积。
总结起来就是，gulp是基于流的自动化构建工具，但不包括模块化的功能，如果要用到的话，就需要引入外部文件，比如require.js等；而webpack是自动化模块打包工具，本身就具有模块化，并且也具有压缩合并的功能。二者侧重点不同，我认为相互结合使用会提高代码质量和代码的优化。
------------------------------------------------------------------------------
用一段时间之后，感觉这两者都很好用，gulp的watch自动监听，和gulp-connect.reload()自动刷新渲染页面用着很方便，也不用自己手动将ES6的代码转换成ES5， 然后webpack在项目开发中的里面的业务逻辑更容易理清。之前自己写了个飞机大战小游戏，用webpack将各个对象的JS分离，一眼就能看清楚里面的逻辑
const gulp = require("gulp"),
miniCss = require("gulp-minify-css"),
uglify = require("gulp-uglify"),
babel = require("gulp-babel"),
connect = require("gulp-connect"),
sass = require("gulp-sass");
//制定任务
gulp.task("html", function(){
gulp.src("app/index.html").pipe(gulp.dest("dist")).pipe(connect.reload());
gulp.src("app/html/**/*.html").pipe(gulp.dest("dist/html")).pipe(connect.reload());
})
//gulp.task("css", function(){
// gulp.src("app/scss/**/*.scss")
// .pipe(sass())
// .pipe(miniCss())
// .pipe(gulp.dest("dist/css"))
// .pipe(connect.reload());
//})
gulp.task("css", function(){
gulp.src(["app/scss/**/*.scss","!app/scss/component/**/*.scss"])
.pipe(sass())
.pipe(miniCss())
.pipe(gulp.dest("dist/css"))
.pipe(connect.reload());
})
gulp.task("css", function(){
gulp.src("app/scss/**/*.scss")
.pipe(sass())
.pipe(miniCss())
.pipe(gulp.dest("dist/css"))
.pipe(connect.reload());
})
gulp.task("js", function(){
gulp.src("app/js/**/*.js")
.pipe(babel(*****))
.pipe(uglify())
.pipe(gulp.dest("dist/js"))
.pipe(connect.reload());
})
gulp.task("module", function(){
gulp.src("app/module/**/*.js")
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest("dist/module"))
.pipe(connect.reload());
})
gulp.task("libs", function(){
gulp.src("app/libs/**/*")
.pipe(gulp.dest("dist/libs"))
.pipe(connect.reload());
})
gulp.task("img", function(){
gulp.src("app/images/**/*")
.pipe(gulp.dest("dist/images"))
.pipe(connect.reload()); //执行了任务就自动刷新
})
gulp.task("server", function(){
connect.server({
livereload: true,
port:2333,
root:"dist"
})
})
gulp.task("watch", function(){
gulp.watch("app/index.html",["html"]);
gulp.watch("app/html/**/*.html",["html"]);
gulp.watch("app/scss/**/*.scss", ["css"]);
gulp.watch("app/js/**/*.js", ["js"]);
gulp.watch("app/module/**/*.js", ["module"]);
gulp.watch("app/images/**/*", ["img"]);
})
自动监听，只要目录文件改变，就会执行相应任务
gulp.task("default", ["html", "css", "js", "module", "img", "libs", "server", "watch"]);
这个是默认任务，这个要先执行了之后才能执行后面的任务列表
但是default任务可以没有，也就是说要这么写才行