gulp与webpack的区别

gulp

gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

PS：简单说就一个Task Runner

具体的代码：

gulp.task('testLess', function () {    return gulp.src(['less/style.less'])        .pipe(less())        .pipe(gulp.dest('./css'));}); gulp.task('minicss', ['testLess'], function () { //执行完testLess任务后再执行minicss任务    gulp.src(['css/*.css'])        .pipe(minifyCss())        .pipe(gulp.dest('./dist/css'));});

gulp.task('watch1', function () {    gulp.watch('less/**/*.less', ['testLess']);}); gulp.task('watch2', function () {    gulp.watch('js/**/*.js', function (event) {        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');    });});

webpack

webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

PS：webpack is a module bundle

功能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更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。