读目录

  • 优良的前端开发流程
  • Gulp 为何物
  • webpack 又是自哪冒出来的
  • 结论

文章有接触长,总共 1800 字,阅读要 18
分钟。哈哈,没耐心的直白扎我交高潮部分。

可以之前端开发流程

在说构建工具之前得预说说咱们期望之前端开发流程是怎么样的?

  • 写作业逻辑代码(例如 es6,scss,pug 等)
  • 拍卖成浏览器认识的(js,css,html)
  • 浏览器自动刷新看到成效

前端开发就是当持续的 123..123..123….
巡回中展开的,上面的继少步(也便是 2 和 3)应该是 自动化
的,前端开发者应当只待关注第 1 步——写作业逻辑代码。

自动化的政工应到由构建工具来做,时下流行的前端构建工具来 gulp 和
webpack(有人说 webpack
不算是是构建工具,我觉着就未尝什么好争的。横看成岭侧成峰,我以为打眼前
webpack 所能召开的事务来拘禁,说它们是构建工具丝毫勿也过)。本文不见面对
gulp 和
webpack
的概念与内容做透剖析,而是愿意于总之角度研究他们之优势短缺与适用场景,从而说根本长期弥漫在前端圈二者之间扑朔迷离的关联。

嗬是构建工具
构建工具是同段机关根据源代码生成可下文件的程序,构建过程包括打包、编译、压缩、测试相当一切要对源代码进行的系处理。构建工具的目的是实现构建过程的自动化,使用它们好被咱避免机械重复的累(这怕是程序员最无能够忍受的了),从而解放我们的手。

解放了手干啊
哇槽,爱关系啊关系啊。

Gulp 为何物

事先来收听 Ta 的官网是怎说:

Gulp 致力于 自动化和优化 你的工作流,它是一个自动化你出工作备受
惨痛又耗时任务 的工具包。

怀念同一怀念我们普通的支付工作负痛又耗时任务产生什么吧?

  • 因而 es6,typescript 编写的剧本文件需要编译成浏览器认识的 javascript
  • 故而 scss,less 编写的体文件要编译成浏览器认识的 css
  • 检查代码是否吻合书写规范,跑单元测试和合测试
  • 开发条件要起 sourcemaps
    的讲话调试起来就便于多矣,修改了代码浏览器能自动刷新立即看到效果就是重新好了
  • 生环境布置代码用减小合并静态文件,添加文件指纹控制缓存
  • blabla…更多之而协调想吧

Gulp 声称要帮忙咱实现
自动化,那他是怎帮助我们实现自动化的啊?这虽不得不先领一嘴巴牛逼哄哄的
NodeJS

Node 背景多少知识

Node 使前端 Jser 有矣退出浏览器工作的能力,要按以前的言语我们写的 js
要么嵌到 html 页面里,然后据此浏览器打开 html
页面才能够运行js,要么就是是于浏览器开发者工具的 Console
面板里编写运行代码有。总之没了浏览器是宿主,咱们的 js 就 run
不起来。Node 这卖突发奇想,把开发者工具的 Console 给勒下来了,从此 js
可以退浏览器直接以 node 里运行。相当给 js
现在出矣少数只宿主环境,一个是浏览器,一个凡是 node
。当然矣,Node
可不是开发者工具里的 Console,那就是由独比方。它是冲Chrome V8
引擎实现的一个 JavaScript 运行条件,功能实在类似 Console
面板,但提供了汪洋实用的 API,感兴趣的同学可前往
Node官网 详细摸底,英文吃力的骚年
戳这里。Node 可以算是前端革命式的创新,随 node
一起发布之 node 包管理器 npm(node package manager)
也早已是海内外最要命之开源库生态系统。node/npm
这对做一样产生,前端生态迎来了那个爆发,一时间也缓解各种题材的 node
包层出不穷,遍地开花。gulp 就是急流勇进,一路过五关斩六用闯出来的一个小
node 包。

扯谈完毕,接下就是来探 gulp
是不是于装逼,他到底会不能够支援我们贯彻自动化。

用作一个 node 包,标准打开方式当然是:

npm i -g gulp

下一场呢,这里因为编译 less 为条例,首先安装编译 less 需要采取的 node 包:

npm i --save-dev gulp gulp-less

前方已经全局安装了 gulp 了,怎么还要本地安装了同样举
前面的 -g 是全局安装,是以实施你所编写的 gulp 任务,即 gulp
yourTask。而后面的 –save-dev 是地面安装,是为了我们编写任务时用 gulp
提供的 api,例如 gulp.src()gulp.task()gulp.dest()
等等。当然也是可以一直行使全局安装的 gulp 的 api
的,但是明显不引进,因为这么干到 gulp 版本控制的问题,而且以全局
gulp 的 api
的言辞就是见面发生环境因(你如条件就全局安装了gulp,万一没作也,程序不纵发错了)。

随之以档次之彻底目录下新建一个 gulpfile.js 文件,这是 gulp
的默认配置文件。

gulpfile.js 必须在项目根本目录?
理所当然也可居另目录,但这样的话就得在启动 gulp 任务时手动指定 gulp
配置文件 gulp yourTask –gulpfile yourGulpfilePath,可能还欲全局安装
gulp-cli,所以只有有独特需要,否则就位于项目根本目录就推行了,这样极其简便。

安排文件之名字务必是 gulpfile.js 吗?
勿分轻重缓急写,取成 gULPFile.js 的说话 gulp 也克认得,只要 toLowerCase
之后是 gulpfile 就执行了,如果获得其它名字那您虽同时得动 –gulpfile
选项去指定了。

现工程目录结构已经成了下面的旗帜:

金沙易记域名4166am 1

构建前 gulp 工程目录结构

连片下就是以 gulpfile.js 里编写 gulp task(gulp
把为每个痛苦又耗时任务编写的拍卖措施称为一个 task):

const gulp = require('gulp');
const less = require('gulp-less');

gulp.task('build:less', function(){
    return gulp.src('./src/*.less')
        .pipe(less())
        .pipe(gulp.dest('./dist'));
});

末尾便是开辟一个极,在终端里运行 gulp
build:less。好了,编译后底文书已为输出到了 dist 目录:

金沙易记域名4166am 2

构建后 gulp 工程目录结构

至此你既算是一个 gulp 砖家了,这差不多就是是 gulp
的全部内容。怎么样,是免是够简单,够丝滑。这也是 gulp
的突出特征——易于学习,易于使,五分钟成砖家。如果想要实践解决其他痛苦而耗时的职责,只待下载安装对应之
gulp 插件包,然后挨家挨户类推写一个 gulp.task 出来就实施了。

这些源代码具体是哪些被处理的
当即便不欲关爱,因为 gulp
插件包都也汝办好了,并且封装的非常可观,你偏偏待报 gulp 你要是啊,gulp
及其插件会赞助你于点好合。这就是吓于你把同卖电子文档传进打印机,告诉它自己一旦同份
A4 纸打印,呲呲呲~,打印机就吐出来一摆设 A4
纸,上面是你的文档内容。源代码就是您的电子文档,gulp
插件就是是打印机,生成的可用文件就是公手里的那张 A4
纸,你不要关心打印机内部是安工作之,因为她包裹的生好,或者你得管打印机拆了扳平诈究竟也行。

Gulp 是基于流的?
流(Stream)不是 gulp 创造的概念,而是于 unix 时代就算从头运用的 I/O
机制,一直到现在仍于大采取。Node 封装了一个
stream
模块专门为此来对流动进行操作。gulp 所因的流即是 Node 封装起的
stream。上面 gulp.task() 代码里面的
pipe
方法并无是 gulp 提供的 api,而是 node 的 api,准确的游说当是 node 的
stream 模块提供的 api。具体是怎落实的吧:gulp.src() 的返回值是 node
Stream 的一个实例,之后的 pipe 调用之实在是其一实例的 pipe 方法,而
pipe 方法的返回值依然是 node Stream 实例,以此实现前面的
.pipe().pipe().pipe() 这种串联写法。熟悉 jQuery
的校友应该好知这种技术。

webpack 又是自从哪冒出来的

gulp
似乎是一揽子的,对前端开发工作被各个一样起痛苦而耗时任务都能展现招拆招,各个击破。然而前端发展快的快过想像,对页面性能及用户体验更加追求极致,以至于
gulp 某些圈子尤其大型 SPA(单页应用)显得有些不够用了:

  • 单页应用的基本是模块化,ES6 之前 JavaScript
    语言本身一直是不曾模块系统的,导致 AMD,CMD,UMD
    各种轮子模块化方案还跃出。对这种模块化乱象,gulp
    显得心有余而力不足,gulp
    插件对这无异于片呢未尝什么想法。不过为得以解,模块化解决方案可以是何人还能够
    hold 住的,需要考虑的题材最为多矣;
  • 本着前方的 SPA 技术 gulp 处理起来显得有点力不从心,例如 Vue
    的单文件组件,gulp
    配合局部插件可以勉强处理,但是生差劲。其实说到底,还是模块化处理点的贫;
  • 优化页面加载速度之同漫漫主要法虽就是是压缩 http 请求。gulp
    只是对静态资源做流式处理,处理下并未开行之优化重组,也就是说
    gulp
    忽略了系层面的拍卖,这无异块还产生坏老之优化空间,尤其是移动端,那才真的是一寸光阴一寸金啊,哪怕是几百毫秒的优化所带来的入账(用户?流量?付费?)绝对超越你的设想。别及自己说
    gulp-concat,CSS
    Sprites,这俩玩意儿小打小闹还行,遇上巨型应用向拿不达标台面。现在之页面动辄上百单繁缛资源(图片,样式表,脚本),也不怕是众只
    http 请求,因此此优化需求还是相当迫切的。关于为何减少 http
    请求可以使得降低页面加载时间戳这里。
  • blabla… 你协调想吧,主要就是是大型单页应用方面发出短板;

时势造英雄。webpack 一名巨响,大张旗鼓地开掘起了gulp 的墙角。

老,先瞧webpack官网怎么吹牛逼介绍好的:

Webpack 是当下极其紧俏之前端资源模块化 管住以及包装
工具。它可以用许多松弛之模块按照依赖以及规则打包成符合生环境布置之前端资源。还可将依照需要加载的模块进行代码分割,等到实际得之时节重新异步加载。

举凡免是圈了一面子懵逼,不明觉厉。其实翻译过来就是是
“在自家眼里,什么都是模块”。webpack “万物都模块” 的见识以及 SPA
配合起来简直是金童玉女,天作之合。这也是 webpack
短时间外名声大噪,直接撼动 gulp 地位的要原因。

webpack
的观比较前卫,它自身也牵动了重重新的定义和情节,诸如加载器(loader)、依赖图(Dependency
Graph)等等。和 gulp 两钟头成砖家的修难度比,webpack
或许你研究有限上仍会晕头转向。

对接下去大概看一下 webpack 的显要办事法。

webpack 和 gulp 一样为是一个小 node 包,打开方式自然是:

npm i -g webpack
npm i --save-dev webpack

以及 gulp 一样,全局安装是为推行 webpack 任务,本地安装是为着使
webpack 提供的 api。

安完 webpack 之后于路根本目录下新建一个 webpack.config.js,这是
webpack 的默认配置文件,同 gulp 的 gulpfile.js
的效果类似。webpack.config.js 同样是未分轻重缓急写的,取成
webPACk.CONfig.js 的语句 webpack
也克认得,但是取成其他名字或坐落别的目录就需要使用 –config
选项去指定安排文件了。

现今工程目录结构如下:

金沙易记域名4166am 3

构建前webpack工程目录结构

连通下就于 webpack.config.js 里配置需要的取舍项,注意了,webpack 与 gulp
的重大不同就是是使办法 出于编程式变成了配置式

const path = require('path');

module.exports = {
    entry: './src/index.js',        // 告诉 webpack 你要编译哪个文件
    output: {                       // 告诉 webpack 你要把编译后生成的文件放在哪
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    }
};

最后还是与 gulp 类似,就是在终点里运行
webpack(终端里一般会产出同等十分坨编译信息)。好了,现在 webpack
已经拿编译好之公文输出及了 dist 目录:

金沙易记域名4166am 4

构建后webpack工程目录结构

看来这是勿是既一头雾水了,在您还没理解有了啊的时节 webpack
已经把业务涉及为止了。这为是 webpack 和 gulp 作业法的要害不同:Gulp
是搭了只案子,让 gulp
插件在点唱戏,尽情表演,所有构建相关的现实性事务还到由 gulp 插件去开。而
Webpack 就牛逼了,webpack
先搭了个台,然后自己于上面唱嗨了,仔细一听,他以上头唱的凡《我们不等同》,当然矣外啊是给
webpack 插件在面唱戏的。

也就是说 webpack
把众多职能还封装上了自己身体里,使得自己强大而臃肿。现在若可以以
./src/index.js 文件里直接写 ES6 代码,因为 webpack 把编译 ES6
的劳作早已封装到温馨的落实里了,使得 webpack 看起原生支持 ES6
而未需依赖第三在插件,其实他里面也是因此了第三着插件的,所以若不要再行特别去下一个
babel 之类的插件去转译
ES6。这样封装的好处是使起来很便利,不好的地方即是使用者完全不明了有了哟,构建了了尚一致脸懵逼。

上面就是 webpack 使用的极极端极端简单易行示例,简直连 “hello world”
都算不齐。具体哪打包各种资源(typescript,样式表,图片,字体等等)可去
webpack官网 深入学,想看中文的同学要劲
戳这里。

webpack “一切均模块” 的风味完美解决了上面 gulp 暴露的几乎单短板,连
webpack 官网也说自己是坐看到现存的模块打包器都未极端符合大型 SPA
应用,于是决定打造一个合乎大型 SPA 应用之模块打包器,也就是说 webpack
其实就是啊巨型 SPA
而深之。

webpack 怎么落实像 gulp 一样对大气起源文件进行流式处理
人家 webpack 本来就无打算开就行。webpack 不是为取代 gulp
为目的的,而是为让大型 SPA
提供再好之构建方案。对大气出自文件进行流式处理是 gulp 擅长的事,webpack
不思趁早,也从来不必要及早。即使抢,也特是再造一个软的 gulp 出来而已。

既然如此 webpack 模块化这么大,那以后模块化就全用 webpack 好了
webpa金沙易记域名4166amck
模块化是大,但是他胖啊,不是装有人都取得得动,主要是外为了供更多之功力封装进了无与伦比多东西,所以选择上或得因地制宜。如果光只是是包装
js(多页应用往往是这种求),完全可以运用 rollup,browserify
这种多少如得意的兑现,因为她们单独做同项事——打包js。而使用将图纸,样式,字体等所有静态资源总体包,webpack
毫无疑问是首选。这吗是干什么越来越多的流行库和框架初步起 webpack
转向以 rollup 进行打包,因为他们仅仅需要打包 js,webpack
好多强力量向用非交。连 rollup 官网也坦言如果你当构建一个仓房,rollup
绝对是首选,但要是是构建一个采取,那么请选 webpack。

结论

自我看多人说 gulp 和 webpack
不是均等好像东西,我弗这样觉得,虽然说两者的落脚点确实是匪均等的,gulp
走的凡流式处理途径,webpack
走之是模块处理途径,但是两岸所设达的对象也是一律的,那即便是有助于前端领域的自动化和工程化管理。webpack
发展到如今,已经非常强了,强大到当构建方面 gulp 能做的转业 webpack
基本上还可以胜任,gulp 举行不了之 webpack
也能行。同样的那些开发工作受到痛又耗时的职责,gulp 同 webpack
都能够解决,只是解决思路产生天壤之别。

下表是自从各个角度对 gulp 和 webpack 做的对比:

Gulp Webpack
定位 基于流的自动化构建工具 一个万能模块打包器
目标 自动化和优化开发工作流,为通用 website 开发而生 通用模块打包加载器,为移动端大型 SPA 应用而生
学习难度 易于学习,易于使用,api总共只有5个方法 有大量新的概念和api,不过好在有详尽的官方文档
适用场景 基于流的作业方式适合多页面应用开发 一切皆模块的特点适合单页面应用开发
作业方式 对输入(gulp.src)的 js,ts,scss,less 等源文件依次执行打包(bundle)、编译(compile)、压缩、重命名等处理后输出(gulp.dest)到指定目录中去,为了构建而打包 对入口文件(entry)递归解析生成依赖关系图,然后将所有依赖打包在一起,在打包之前会将所有依赖转译成可打包的 js 模块,为了打包而构建
使用方式 常规 js 开发,编写一系列构建任务(task)。 编辑各种 JSON 配置项
优点 适合多页面开发,易于学习,易于使用,接口优雅。 可以打包一切资源,适配各种模块系统
缺点 在单页面应用方面输出乏力,而且对流行的单页技术有些难以处理(比如 Vue 单文件组件,使用 gulp 处理就会很困难,而 webpack 一个 loader 就能轻松搞定) 不适合多页应用开发,灵活度高但同时配置很繁琐复杂。“打包一切” 这个优点对于 HTTP/1.1 尤其重要,因为所有资源打包在一起能明显减少浏览器访问页面时的资源请求数量,从而减少应用程序必须等待的时间。但这个优点可能会随着 HTTP/2 的流行而变得不那么突出,因为 HTTP/2 的多路复用可以有效解决客户端并行请求时的瓶颈问题。
结论 浏览器多页应用(MPA)首选方案 浏览器单页应用(SPA)首选方案

gulp 为何非吸取百下之丰富,把 webpack 的物并进来,反正都是开源之
腾讯那么牛逼,你说他怎么不把阿里巴巴合并进来。集成应该是从未可能,因为
gulp 和 webpack
的一贯不平等。所以,没有放开之世而俱以的缓解方案,只有切实问题具体分析选择符合之解决方案才能够是地化解问题。gulp
同 webpack 只是我们缓解问题之工具,不要被工具束缚了手脚不克前进。

聊天了如此多,到底何许人也会受撞倒好在沙滩上
可看下,这点儿单器其实各个发生优缺,都有用武之地。合理地兼容使用,取长补短,才能够达最好酷的威力,所以这俩基友并无是轧的,而是增补的,谁吗不会见叫击大于沙滩及。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图