在没有使用任何自动化工具之前，如果用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. [转]SSRS: Checking for Divide By Zero Using Custom Code

    本文转自:http://salvoz.com/blog/2011/11/25/ssrs-checking-for-divide-by-zero-using-custom-code/ I encount ...

  2. Cannot find type definition file for '.svn'

    描述: Ionic项目在执行ionic build --prod过程中,出现如下错误: 看来是.svn文件影响了编译. 解决办法:升级TortoiseSVN版本(https://tortoisesvn ...

  3. MySQL---8、索引

    1.索引中关于搜索的算法  2.索引的使用原则  3.索引的优缺点  4.索引的种类  5.显示索引 show index from 表名;  6.创建唯一索引 alter table 表名 add ...

  4. android RecyclerView简单的使用

    转自:https://blog.csdn.net/lmj623565791/article/details/45059587 概述 RecyclerView出现已经有一段时间了,相信大家肯定不陌生了, ...

  5. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. plSql读取Oracle数据库中文乱码

    新建环境变量,设置变量名:NLS_LANG,变量值:SIMPLIFIED CHINESE_CHINA.ZHS16GBK,确定即可

  7. BaseActivity

    package com.glandroid.smssender; import android.content.DialogInterface; import android.content.pm.P ...

  8. 相比之前其他几个入门的， 推荐： 简单vue2 入门教程

    注意:Vue.js 不支持 IE8 及其以下 IE 版本.       具体可以看下  http://www.runoob.com/vue2/vue-tutorial.html 以下是学习过程 Vue ...

  9. Maximum Subarray 连续子数组最大和

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  10. Vue 框架-01- 入门篇 图文教程

    Vue 框架-01- 入门篇 图文教程 Vue 官网:https://cn.vuejs.org/ 关于 Vue 的基础大家可以在官网的[起步]去学习,本系列文章主要针对实例项目应用 一.Vue 的安装 ...