在没有使用任何自动化工具之前，如果用sass写了css, 用coffee写了js, 那么我们必须手动用相应的compiler去编译各自的文件，然后各自minify(js,css文件压缩并合并)。这时如果又有两张新图片，那么又需要用自己的小工具手动去压缩图片。于是为了解决前端这种总需要做很多重复工作的弊端，提高工作效率，于是就有人弄出了自动化流程的grunt/gulp，这样当写完代码后想要发布一个production版本，用一句gulp build就可以

  1. rm 掉dist文件夹中以前的旧文件
  2. 自动把sass编译成css, coffee编译成js
  3. 压缩各自的文件，压缩图片，生成图片sprite
  4. 拷贝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文件有

  1. sass-loader，把sass转换成css
  2. css-loader让webpack能识别处理css
  3. style-loader把识别后的css插入到htmle的style中

类似的识别es6有babel-loader;

webpack实现了require everything, bundle everything;而且webpack还可以使用各种plugins，也可以实现文件的压缩合并等优化工作，再加上它本身优秀的解决模块依赖的能力，这样可以直接使用webpack来完成前端所有的自动化构建工作，perfect

webpack和gulp的更多相关文章

  1. 【原】webpack结合gulp打包

    在我前面的文章中,总结了一下自己学习webpack和gulp的一些东西.然而,在我的实际项目中,单独使用它们两者不能满足项目的需求.我遇到了下面的一些问题. 问题1: 因为我的图片需要放单cdn上面去 ...

  2. webpack与gulp的区别及实例搭建

    webpack是什么,提到这个概念,很多人可能立马说出来,模块化加载器兼打包工具,可以把各种资源都作为模块来使用和处理等等. 说到前端构建工具,不可避免的会提到gulp,到底webpack和gulp有 ...

  3. 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上

    .table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...

  4. Webpack vs Gulp

    Webpack vs Gulp 谁会被拍死在沙滩上   本文组织结构 理想的前端开发流程 Gulp 为何物 Webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟 ...

  5. Webpack vs Gulp(转载)

    理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的? 写业务逻辑代码(例如 es6,scss,pug 等) 处理成浏览器认识的(js,css,html) 浏览器自动刷新看到效果 ...

  6. Webpack与Gulp、Grunt区别

    Webpack与Gulp.Grunt没有什么可比性,它可以看作模块打包机,通过分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等 ...

  7. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  8. Webpack和Gulp对比

    Webpack和Gulp对比 作者 彬_仔 关注 2016.10.19 22:42* 字数 8012 阅读 2471评论 18喜欢 68 在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并 ...

  9. 解决webpack和gulp打包js时ES6转译ES5时Object.assign()方法没转译成功的问题

    在webpack或gulp打包的配置文件中package.json 引入"@babel/plugin-transform-object-assign": "^7.2.0& ...

  10. webpack和gulp的区别

    Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧.Gulp / Grunt 是一种工具,能够优化前端工作流程.比如自动刷新页面.combo.压缩css.js.编译less等等.简单来说, ...

随机推荐

  1. JDK1.7新特性(2):异常和可变长参数处理

    异常 jdk1.7对try--catch--finally的异常处理模式进行了增强,下面我们依次来看增强的方面. 1. 为了防止异常覆盖,给Throwable类增加了addSuppressed方法,可 ...

  2. js判断向量叉点 并求出交点坐标

     代码如下可以直接运行,判断向量相交并求出交点坐标 <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  3. 获取用户Ip地址通用方法

    1 public static function getIp() 2 { 3 if ($HTTP_SERVER_VARS["HTTP_X_FORWARDED_FOR"]) 4 { ...

  4. 【SSH网上商城项目实战15】线程、定时器同步首页数据（类似于博客定期更新排名）

    转自:https://blog.csdn.net/eson_15/article/details/51387378 上一节我们做完了首页UI界面,但是有个问题:如果我在后台添加了一个商品,那么我必须重 ...

  5. linux ubuntu 安装nginx

    参考原文 在Ubuntu下安装Nginx有以下方法,但是如果想要安装最新版本的就必须下载源码包编译安装. 一.基于APT源安装 sudo apt-get install nginx 安装好的文件位置: ...

  6. Jenkins2.138配置slave节点时，启动方法只有两个选项

    Jenkins2.138配置slave节点时,启动方法只有两个选项,并没有通过javaweb代理启动这个选项 解决办法 全局安全配置->代理->选择随机选取

  7. drupal7 用到的一些钩子简介

    1.hook_user_delete($account) 可用于自定义模块中,当用户被删除时,可以自定义一些自己需要的处理动作 2.hook_mail_alter(&$message) 可用于 ...

  8. drupal7 转化 public:// 为实际url

    file_create_url('public://xxx.png'); // 得到URL drupal_realpath('public://xxx.png'); // 得到系统路径(磁盘路径,如D ...

  9. layui-table渲染不出来

    通过方法渲染 页面代码: <table id="tableList" lay-filter="clublist"></table> js ...

  10. CAD增强属性块的还原（转）

    来自:http://blog.3snews.net/space.php?uid=13924959&do=blog&id=70174 作者:毛毛虫 Demo下载:CAD增强属性块的还原 ...