gulp和webpack

原文:gulp & webpack整合,鱼与熊掌我都要!
拓展:MVC,MVP 和 MVVM 的图示


gulp 是什么?

gulp是一个基于流的构建工具,相对其他构件工具来说,更简洁更高效。

 

gulp能做什么

  1. 开发环境下,想要能够按模块组织代码,监听实时变化
  2. css/js预编译,postcss等方案,浏览器前缀自动补全等
  3. 条件输出不同的网页,比如app页面和mobile页面
  4. 线上环境下,我想要合并、压缩 html/css/javascritp/图片,减少网络请求,同时降低网络负担
npm install -g gulp     //全局安装
npm install --save-dev gulp //安装到当前项目并在package.json中添加依赖

webpack 是什么? 


webpack 中文文档


其中,Webpack 的两个最核心原理分别是:
1、一切皆模块
2、按需加载

webpack是模块化管理的工具,使用webpack可实现模块按需加载,模块预处理,模块打包等功能。WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

四个核心概念

  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugins)


webpack和gulp的区别

gulp是基于流的构建工具:all in one的打包模式,输出一个js文件和一个css文件,优点是减少http请求,万金油方案
webpack是模块化管理工具,使用webpack可以对模块进行压缩、预处理、打包、按需加载等。

Gulp 的定位是 Task Runner, 就是用来跑一个一个任务的。
放在以前比如我想用sass写css, coffee写js, 我必须手动的用相应的compiler去编译各自的文件,然后各自minify。这时候designer给你了两张新图片,好嘞,接着用自己的小工具手动去压缩图片。
后来前端人不能忍了,搞出个自动化这个流程的 Grunt/Gulp, 比如你写完代码后要想发布production版本,用一句 gulp build 就可以

  1. rm 掉 dist文件夹中以前的旧文件

  2. 自动把sass编译成css, coffee编译成js

  3. 压缩各自的文件,压缩图片,生成图片sprite

  4. 拷贝minified/uglified 文件到 dist 文件夹

但是它没发解决的是 js module 的问题,是你写代码时候如何组织代码结构的问题.

之前大家可以用 require.js, sea.js 来 require dependency, 后来出了一个 webpack 说 我们能不能把所有的文件(css, image, js) 都用 js 来 生成依赖,最后生成一个bundle呢? 所以webpack 也叫做file bundler.

同时 webpack 为了解决可以 require 不同文件的需求引入了loader, 比如面对sass文件有

  1. sass-loader, 把sass 转换成 css

  2. css-loader, 让 webpack 能识别处理 css

  3. style-loader, 把识别后的 css 插入到 html style中
    类似的识别es6 有babel-loader

打个不恰当的比方,webpack就像微信一样,本来就是做聊天(module dependency)的,后来生生搞出一个微信小程序(processing files),大家面对简单的需求发现这个比原生app方便使用啊,于是开发原生的人越来越少一样。

所以一开始就模仿其他项目用 npm scripts + webpack 就好了,当你发现有哪些任务你没法用 webpack 或者npm scripts 解决起来麻烦, 这个时候再引入task runner 也不迟

如果你想要一步一步来配置你环境,那么gulp就很适合,如果你想一下子就配备大部分需要的环境,那么webpack就可以,只要写好package.json就可以。从执行的结果上来看,是没有什么区别。只要工具用的顺手,你喜欢哪个久用哪个。webpack是趋势。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值