前端构建工具的咋样电子版

开卷目录

章有硌长,总共 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
选项去指定了。

今昔工程目录结构已经改为了下边的规范:

电子版 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 目录:

电子版 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
选项去指定安排文件了。

兹工程目录结构如下:

电子版 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 目录:

电子版 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 只是我们解决问题的工具,不要让工具束缚了手脚不可知向上。

闲谈了这样多,到底孰会叫击大在沙滩上
好扣押出来,这简单独器其实各样发优缺,都有用武之地。合理地兼容下,取长补短,才可以表明最丰盛之威力,所以这俩基友并无是轧的,而是增补的,什么人吧无会面为打大于沙滩上。

相关文章