gulp+webpack简单的基础配置

以下内容纯属个人浅显见解，仅供参考，生怕误导小童鞋，如果有大神看到以下文章感觉不适，请勇敢的吐出来！PS：摇尾求指教~~~

gulp和webpack的区别

可能每个人对gulp和webpack的使用都有不同的体验和理解，就我而言，两者我都单独使用过，这么说吧，webpack能实现的功能gulp都可以实现，gulp可以实现的功能webpack不一定能实现，比如雪碧图、编译less、检查语法等，目前npm网站上面有很多跟gulp搭配起来用的库，可以说种类繁多。那为什么我们不单独使用gulp呢，毕竟就表面看来gulp明显大于webpack，但真要较真的话这俩样其实不是同一个东西，从概念上来说，gulp是构建工具，也就是传说中的自动化构建代替你的双手完成你需要手工完成的工作，卍解你的双手然后就可以变身超级赛亚人，顺便一招庐山升龙霸拯救地球。【大雾】，而webpack则不同，他从一开始大概就是为了打包而生，专业术语是“主要用于模块化方案，预编译模块的方案”，所谓模块加载就是通过正则表达式去匹配不同后缀的文件名，然后给他们自定义不同的加载器，待会会有详细例子。所以我们可以用gulp来实现自动化构建，利用webpack来打包和模块化加载，相辅相成。
以上，我们能够理解为啥我们可以把俩者综合起来用，不过其实单独使用也不怎么影响，心比较大的朋友一般是实用主义者，一个也是用两个也是用，所以这里不做辩论哪个好，毕竟俩者一起用有朋友也觉得影响开发效率呢~毕竟我也已经习惯很多前端demo里面单独使用webpack进行打包和热加载构建静态服务器以及模块化加载这些已经够用了，但是人生在世就是需要倒腾！

gulp+webpack配置

首先我们当然是需要安装基础环境，啥npm等等乱七八糟的都给我装起来！小皮鞭子抽起来！

如：npm install -g gulp

安装库：package.json
里面只有多的没有少的，朋友们请酌情使用

·首先我们要把webpack加到gulpfile.js里面来

var gulpWebpack=require('gulp-webpack')

·然后我们设置一下开发环境下的打包

gulp.task('dev_webpack',function(){

gulp.src('./app/index.js')

.pipe(notify({ message: 'dev_webpack task start' }))

.pipe(gulpWebpack(config))

.pipe(gulp.dest('./build/'))

.pipe(connect.reload())

.pipe(notify({ message: 'dev_webpack task complete' }));

});

dev_webpack是任务名称，gulp.src('./app/index.js')是入口文件，notify({ message: 'dev_webpack task start' })使用到了gulp-notify的库，这个一个挺有意思的库，蛮好看的。gulpWebpack(config)里面的config是webpack在开发环境下的配置文件，我的是var config = require('./webpack.config');，以及不知道多少小白条和本肥一样一开始以为本地开发的时候做监听是不用打包的，这个我踩坑踩了好久，我这边的配置其实本地开发环境调试也是要打包的，因为我是在静态文件里面引用的js打包文件，如果没有这个 引用的js文件，就不知道入口在哪里了，如果有更好的方法希望能告知谢谢~webpack配置文件

·搭建本地静态服务器并实现热加载（实时监听）

gulp.task('connect', function () {

connect.server({

root: './',

port: 8890,

livereload: true,

middleware: function (connect, o) {

return [

(function () {

var url = require('url');

var proxy = require('proxy-middleware');

var options = url.parse('https://ruby-china.org/api/v3/*');

options.route = '/api/v3/*';

return proxy(options);

})(),

modRewrite([

'!\\.html|\\.js|\\.css|\\.swf|\\.jp(e?)g|\\.png|\\.gif|\\.eot|\\.woff|\\.ttf|\\.svg$ /index.html'

])

];

}

});

});

gulp.task('watch', function () {

gulp

.watch('app/less/*.less', ['clean','easy_less']);

gulp

.watch(['app/**/*.js', 'app/*.js', 'app/*.jsx', 'app/**/*.jsx', 'app/**/**/*.js'], ['clean','dev_webpack']);

});

上述利用了反向代理来设置了api接口的跨域访问。
完整的gulpfile.js

参考demo https://github.com/hql123/generator-panda/tree/master/app/templates