webpack和gulp
在没有使用任何自动化工具之前,如果用sass写了css, 用coffee写了js, 那么我们必须手动用相应的compiler去编译各自的文件,然后各自minify(js,css文件压缩并合并)。这时如果又有两张新图片,那么又需要用自己的小工具手动去压缩图片。于是为了解决前端这种总需要做很多重复工作的弊端,提高工作效率,于是就有人弄出了自动化流程的grunt/gulp,这样当写完代码后想要发布一个production版本,用一句gulp build就可以
- rm 掉dist文件夹中以前的旧文件
- 自动把sass编译成css, coffee编译成js
- 压缩各自的文件,压缩图片,生成图片sprite
- 拷贝minified/uglified文件到dist文件夹(uglifyjs用来压缩js文件, minify压缩并合并js,css)
但是它没有解决的是js 模块化的问题,(js模块化发展历程:http://web.jobbole.com/83761/); 之前大家可以用require.js,sea.js来require依赖,后来就出现了webpack把所有文件(css, image, js)都看成是模块,都用js来生成依赖,最后生成一个bundle,所以webpack也叫做文件打包工具; 同时webpack为了解决可以require不同文件的需求引入了不同的loader, 比如面对sass文件有
- sass-loader,把sass转换成css
- css-loader让webpack能识别处理css
- style-loader把识别后的css插入到htmle的style中
类似的识别es6有babel-loader;
webpack实现了require everything, bundle everything;而且webpack还可以使用各种plugins,也可以实现文件的压缩合并等优化工作,再加上它本身优秀的解决模块依赖的能力,这样可以直接使用webpack来完成前端所有的自动化构建工作,perfect
webpack和gulp的更多相关文章
- 【原】webpack结合gulp打包
在我前面的文章中,总结了一下自己学习webpack和gulp的一些东西.然而,在我的实际项目中,单独使用它们两者不能满足项目的需求.我遇到了下面的一些问题. 问题1: 因为我的图片需要放单cdn上面去 ...
- webpack与gulp的区别及实例搭建
webpack是什么,提到这个概念,很多人可能立马说出来,模块化加载器兼打包工具,可以把各种资源都作为模块来使用和处理等等. 说到前端构建工具,不可避免的会提到gulp,到底webpack和gulp有 ...
- 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上
.table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...
- Webpack vs Gulp
Webpack vs Gulp 谁会被拍死在沙滩上 本文组织结构 理想的前端开发流程 Gulp 为何物 Webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟 ...
- Webpack vs Gulp(转载)
理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(例如 es6,scss,pug 等) 处理成浏览器认识的(js,css,html) 浏览器自动刷新看到效果 ...
- Webpack与Gulp、Grunt区别
Webpack与Gulp.Grunt没有什么可比性,它可以看作模块打包机,通过分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等 ...
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
- Webpack和Gulp对比
Webpack和Gulp对比 作者 彬_仔 关注 2016.10.19 22:42* 字数 8012 阅读 2471评论 18喜欢 68 在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并 ...
- 解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题
在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0& ...
- webpack和gulp的区别
Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧.Gulp / Grunt 是一种工具,能够优化前端工作流程.比如自动刷新页面.combo.压缩css.js.编译less等等.简单来说, ...
随机推荐
- jQuery 判断元素上是否绑定了事件
我研究了一下之后发现,jQuery都将事件缓存起来了,其实也是为了防止内存溢出以及页面unload的时候的速度,也包括多函数触发,方便管理等诸多好处,具体可以参考此文. jQuery会在window. ...
- swagger api文档添加jwt授权配置
最近写的swagger文档,要加jwt授权,所以几经google终于搞定了,简简单单几行配置如下: securityDefinitions: APIKey: type: apiKey name: Au ...
- freemarker学习笔记
在模板中定义的变量有三种类型: 引用 1:plain变量:可以在模板的任何地方访问,包括使用include指令插入的模板,使用assign指令创建和替换. 2:局部变量:在宏定义体中有效,使用loca ...
- 十六、Condition等待通知
一.简介 我们可以使用syncronized和wait,notify实现等待通知.而syncronized的高级实现Lock,也可以实现等待通知,需要构造Condition的实例对象. JDK文档:h ...
- 【SSH网上商城项目实战25】使用java email给用户发送邮件
转自: https://blog.csdn.net/eson_15/article/details/51475046 当用户购买完商品后,我们应该向用户发送一封邮件,告诉他订单已生成之类的信息, ...
- PHP 获取当前类名、方法名、URL地址
1.PHP获取当前类名.方法名 __CLASS__ 获取当前类名 __FUNCTION__ 当前函数名(confirm) __METHOD__ 当前方法名 (bankcard::confir ...
- HDU 2553(N皇后)(DFS)
http://acm.hdu.edu.cn/showproblem.php?pid=2553 i表示行,map[i]表示列,然后用DFS遍历回溯 可以参考这篇文章: http://blog.csdn. ...
- MySQL Metadata
http://www.devart.com/dotconnect/mysql/docs/MetaData.html In this overload first parameter is name o ...
- java停止一个线程
Thread类中有start(), stop()方法,不过stop方法已经被废弃掉. 平时其实也有用过,共享一个变量,相当于标志,不断检查标志,判断是否退出线程 如果有阻塞,需要使用Thread的in ...
- JSON运用——PHP中使用json数据格式定义字面量对象的方法
目前,在PHP中是不支持字面量命名法. 前端的小伙伴都知道,在JS中用字面量定义一个对象的方法可以如下: var o = { 'name' : 'Tom' , 'url' : 'www.baidu.c ...