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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,385评论 1 32
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 8,084评论 40 247
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,078评论 7 35
  • -- 1. Gulp VS webpack 比较 Gulp 是一个任务管理工具,让简单的任务更清晰,让复杂的任务易...
    慢清尘阅读 3,496评论 7 16
  • 前言 众所周知目前比较火的工具就是gulp和webpack,但webpack和gulp却有所不同,本人两者的底层研...
    cduyzh阅读 1,305评论 0 13