php记录网站访问次数,闵行网站推广,网站的四大要素,专做负面的网站常有人拿gulp与webpack来比较#xff0c;知道这两个构建工具功能上有重叠的地方#xff0c;可单用#xff0c;也可一起用#xff0c;但本质的区别就没有那么清晰。 gulp gulp强调的是前端开发的工作流程#xff0c;我们可以通过配置一系列的task#xff0c;定义task处理的…常有人拿gulp与webpack来比较知道这两个构建工具功能上有重叠的地方可单用也可一起用但本质的区别就没有那么清晰。 gulp gulp强调的是前端开发的工作流程我们可以通过配置一系列的task定义task处理的事务例如文件压缩合并、雪碧图、启动server、版本控制等然后定义执行顺序来让gulp执行这些task从而构建项目的整个前端开发流程。 PS简单说就一个Task Runner webpack webpack是一个前端模块化方案更侧重模块打包我们可以把开发中的所有资源图片、js文件、css文件等都看成模块通过loader加载器和plugins插件对资源进行处理打包成符合生产环境部署的前端资源。 PSwebpack is a module bundle 相同功能 gulp与webpack可以实现一些相同功能如下列举部分 功能gulpwebpack文件合并与压缩css使用gulp-minify-css模块 gulp.task(sass,function(){ gulp.src(cssFiles) .pipe(sass().on(error,sass.logError)) .pipe(require(gulp-minify-css)()) .pipe(gulp.dest(distFolder)); });样式合并一般用到extract-text-webpack-plugin插件 压缩则使用webpack.optimize.UglifyJsPlugin。文件合并与压缩js使用gulp-uglify和gulp-concat两个模块js合并在模块化开始就已经做 压缩则使用webpack.optimize.UglifyJsPluginsass/less预编译使用gulp-sass/gulp-less 模块sass-loader/less-loader 进行预处理启动server使用gulp-webserver模块 var webserver require(gulp-webserver); gulp.task(webserver,function(){ gulp.src(./) .pipe(webserver({ host:localhost, port:8080, livereload:true, //自动刷新 directoryListing:{ enable: true, path:./ }, })); });使用webpack-dev-server模块 module.exports { ...... devServer: { contentBase: build/, port:8080, inline: true //实时刷新 } }版本控制使用gulp-rev和gulp-rev-collector两个模块将生成文件加上hash值 module.exports { ...... output: { ...... filename: [name].[hash:8].js }, plugins:[ ...... new ExtractTextPlugin(style.[hash].css) ] }两者区别 虽然都是前端自动化构建工具但看他们的定位就知道不是对等的。 gulp严格上讲模块化不是他强调的东西他旨在规范前端开发流程。 webpack更是明显强调模块化开发而那些文件压缩合并、预处理等功能不过是他附带的功能。 总结 gulp应该与grunt比较而webpack应该与browserify网上太多资料就这么说这么说是没有错不过单单这样一句话并不能让人清晰明了。 gulp与webpack上是互补的还是可替换的取决于你项目的需求。如果只是个vue或react的单页应用webpack也就够用如果webpack某些功能使用起来麻烦甚至没有雪碧图就没有那就可以结合gulp一起用。 本文为原创文章转载请保留原出处方便溯源如有错误地方谢谢指正。 本文地址 http://www.cnblogs.com/lovesong/p/6413546.html
