开卷目录

著作有点长,总共 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官网 详细询问,英文吃力的骚年
戳这里jQuery,。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
选项去指定了。

前日工程目录结构已经成了下边的规范:

jQuery 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 目录:

jQuery 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
    可口可乐s,这俩玩意儿小打小闹还行,遇上巨型应用根本拿不上台面。现在的页面动辄上百个繁缛资源(图片,样式表,脚本),也就是成百上千个
    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
选项去指定安排文件了。

近来工程目录结构如下:

jQuery 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 目录:

jQuery 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 好了
webpack
模块化是强,可是他胖啊,不是所有人都抱得动,主虽然她为了提供更多的效能封装进了太多东西,所以选取上或者需要因地制宜。假诺只是只是包装
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 的东西集成进来,反正都是开源的
腾讯那么牛逼,你说他怎么不把Alibaba合并进来。集成应该是没可能,因为
gulp 和 webpack
的定势不等同。所以,没有放之天下而皆准的化解方案,只有切实问题具体分析接纳切合的缓解方案才能正确地缓解问题。gulp
和 webpack 只是大家缓解问题的工具,不要被工具束缚了动作不可以向上。

扯了那般多,到底什么人会被拍死在沙滩上
可以看出来,这多少个工具其实各有优缺,都有用武之地。合理地配合使用,取长补短,才能发布最大的威力,所以那俩基友并不是排斥的,而是增补的,何人也不会被拍死在沙滩上。

相关文章

网站地图xml地图