阅读须要 18,阅读必要 1八

开卷目录

阅读目录

文章有点长,总共 1800 字,阅读必要 18
分钟。哈哈,没耐心的直接戳小编到高潮部分

作品有点长,总共 1800 字,阅读需求 18
分钟。哈哈,没耐心的第一手戳笔者到高潮部分

不错的前端开发流程

在说创设筑工程具在此以前得先说说吾期望的前端开发流程是怎么样的?

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

前端开发就是在时时刻刻的 1二3..1贰三..1贰3….
循环往复中开始展览的,下面的后两步(也正是 贰 和 三)应该是 自动化
的,前端开发者理应只需关怀第 1 步——写作业逻辑代码。

自动化的政工应该交由塑造筑工程具来做,时下流行的前端塑造筑工程具有 gulp 和
webpack(有人说 webpack
不算是构建筑工程具,作者以为那没怎么好争的。横看成岭侧成峰,小编以为从方今webpack 所能做的事务来看,说它是创设筑工程具丝毫不为过)。本文不会对
gulp
webpack
的定义和内容做深切剖析,而是希望从微观的角度切磋他们的优势缺乏和适用场景,从而说清短期弥漫在前者圈二者之间扑朔迷离的涉嫌。

怎么是营造筑工程具
创设筑工程具是1段机关依据源代码生成可选用文件的主次,创设进程包罗打包、编写翻译、压缩、测试等1切要求对源代码进行的相干处理。营造筑工程具的目标是贯彻营造进度的自动化,使用它能够让我们制止机械重复的分神(那怕是程序员最不可能经受的了),从而解放大家的双手。

解放了单臂干什么
哇槽,爱干什么干什么。

优质的前端开发流程

在说营造筑工程具在此以前得先说说笔者期望的前端开发流程是何许的?

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

前端开发就是在频频的 1贰3..1二3..12三….
循环中举行的,上边的后两步(也等于 二 和 三)应该是 自动化
的,前端开发者理应只需关心第 一 步——写作业逻辑代码。

自动化的业务应该交由营造筑工程具来做,时下流行的前端营造筑工程具有 gulp 和
webpack(有人说 webpack
不算是创设筑工程具,作者认为那没怎么好争的。横看成岭侧成峰,俺认为从此时此刻
webpack 所能做的政工来看,说它是创设筑工程具丝毫不为过)。本文不会对
gulp
webpack
的概念和情节做长远解析,而是希望从宏观的角度商量他们的优势贫乏和适用场景,从而说清长期弥漫在前端圈二者之间扑朔迷离的关系。

如何是创设筑工程具
创设筑工程具是1段机关依据源代码生成可采纳文件的先后,创设进程包涵打包、编写翻译、压缩、测试等一切须要对源代码进行的相关处理。营造工具的目标是兑现创设进程的自动化,使用它能够让我们制止机械重复的分神(那怕是程序员最无法忍受的了),从而解放我们的双臂。

解放了双臂干什么
哇槽,爱干什么干什么。

Gulp 为何物

先来听听 Ta 的官网是怎么说:

Gulp 致力于 自动化和优化 你的工作流,它是二个自动化你付出工作中
痛楚又耗费时间职务 的工具包。

想一想我们普通的花费工作中难过又耗费时间职分有啥样吗?

  • 用 es⑥,typescript 编写的本子文件须要编写翻译成浏览器认识的 javascript
  • 用 scss,less 编写的体裁文件须求编写翻译成浏览器认识的 css
  • 自我批评代码是否适合书写规范,跑单元测试和合并测试
  • 支付环境1旦有 sourcemaps
    的话调节和测试起来就便宜多了,修改完代码浏览器能自动刷新立时看到成效就越来越好了
  • 生儿育女条件安排代码需求减弱合并静态文件,添加文书指纹控制缓存
  • blabla…越多的您自身想呢

Gulp 声称要帮大家落成
自动化,那她是什么样帮忙大家达成自动化的啊?那就只可以先提壹嘴牛逼哄哄的
NodeJS

Node 背景小知识

Node 使前端 Jser 有了退出浏览器工作的能力,要搁之前的话咱们写的 js
要么嵌到 html 页面里,然后用浏览器打开 html
页面才能运转js,要么就是在浏览器开发者工具的 Console
面板里编写运维代码片段。不问可见没了浏览器那几个宿主,我们的 js 就 run
不起来。Node 那货突发奇想,把开发者工具的 Console 给抠下来了,从此 js
能够脱离浏览器直接在 node 里运营。也就是 js
未来有了五个宿主环境,二个是浏览器,一个是 node
。当然了,Node
可不是开发者工具里的 Console,那只是打个假若。它是基于Chrome V捌引擎实现的三个 JavaScript 运转条件,功用实在类似 Console
面板,但提供了大气实用的 API,感兴趣的同室可前往
Node官网 详细摸底,英文吃力的骚年
戳这里。Node 能够算是前端革命式的换代,随 node
1起发表的 node 包管理器 npm(node package manager)
也壹度是海内外最大的开源库生态系统。node/npm
那对构成1出,前端生态迎来了大产生,暂且间为缓解种种难题的 node
包不以为奇,处处开花。gulp 正是强悍,一路过五关斩6将闯出来的五个小
node 包。

扯谈落成,接下去就来探望 gulp
是否在装逼,他到底能或不能够帮大家落到实处自动化。

用作1个 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 your居尔pfilePath,可能还亟需全局安装
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'));
});

最终正是开拓2个极端,在极端里运转 gulp
build:less。好了,编写翻译后的公文已经被输出到了 dist 目录:

图片 2

营造后 gulp 工程目录结构

由来你早已算是一个 gulp 砖家了,那大约正是 gulp
的全体内容。怎么着,是否够简单,够丝滑。那也是 gulp
的隆起特征——易于学习,易于使用,伍分钟成砖家。假如想要执行化解别的伤心又耗费时间的任务,只需下载安装对应的
gulp 插件包,然后依次类推写二个 gulp.task 出来就行了。

那么些源代码具体是什么样被处理的
那平日不须求关心,因为 gulp
插件包已为你做好了,并且封装的不得了美艳,你只须要报告 gulp 你要怎么着,gulp
及其插件会帮你打点好一切。那就好比你把1份电子文书档案传进打字与印刷机,告诉它本人要1份
Fox 纸打字与印刷,呲呲呲~,打字与印刷机就吐出来一张 探岳纸,下面是您的文书档案内容。源代码正是你的电子文书档案,gulp
插件就是打字与印刷机,生成的可用文件就是您手里的那张 Accord纸,你不用关怀打字与印刷机内部是怎么工作的,因为它包裹的很好,或然你可以把打字与印刷机拆了一探终究也行。

Gulp 是基于流的?
流(Stream)不是 gulp 成立的定义,而是从 unix 时代就开头选拔的 I/O
机制,向来到现行反革命仍在广大运用。Node 封装了2个
stream
模块专门用来对流进行操作。gulp 所依据的流就是 Node 封装起来的
stream。下面 gulp.task() 代码里面包车型大巴
pipe
方法并不是 gulp 提供的 api,而是 node 的 api,准确的说应该是 node 的
stream 模块提供的 api。具体是怎么落到实处的吧:gulp.src() 的再次来到值是 node
Stream 的2个实例,之后的 pipe 调用的实际上是那一个实例的 pipe 方法,而
pipe 方法的再次回到值依旧是 node Stream 实例,以此达成后面包车型地铁
.pipe().pipe().pipe() 那种串联写法。熟习 jQuery
的校友应该很精晓那种技能。

Gulp 为何物

先来听听 Ta 的官网是怎么说:

Gulp 致力于 自动化和优化 你的工作流,它是1个自动化你付出工作中
优伤又耗费时间任务 的工具包。

想1想大家普通的耗费工作中忧伤又耗费时间职务有怎样吧?

  • 用 es陆,typescript 编写的脚本文件需求编写翻译成浏览器认识的 javascript
  • 用 scss,less 编写的体制文件要求编写翻译成浏览器认识的 css
  • 自作者批评代码是或不是相符书写规范,跑单元测试和合并测试
  • 开发环境一旦有 sourcemaps
    的话调节和测试起来就有益多了,修改完代码浏览器能自动刷新立刻看到效果就越来越好了
  • 生儿育女条件安顿代码须求减小合并静态文件,添加文件指纹控制缓存
  • blabla…越来越多的您自个儿想呢

Gulp 声称要帮咱们完成
自动化,那他是如何协助大家完毕自动化的吧?这就只可以先提一嘴牛逼哄哄的
NodeJS

Node 背景小知识

Node 使前端 Jser 有了退出浏览器工作的力量,要搁以前的话大家写的 js
要么嵌到 html 页面里,然后用浏览器打开 html
页面才能运作js,要么就是在浏览器开发者工具的 Console
面板里编写运营代码片段。总而言之没了浏览器那么些宿主,大家的 js 就 run
不起来。Node 那货突发奇想,把开发者工具的 Console 给抠下来了,从此 js
能够退出浏览器直接在 node 里运营。一定于 js
以后有了多少个宿主环境,2个是浏览器,二个是 node
。当然了,Node
可不是开发者工具里的 Console,那只是打个假诺。它是依据Chrome V8引擎完结的3个 JavaScript 运营条件,效用实在看似 Console
面板,但提供了大批量实用的 API,感兴趣的同班可前往
Node官网 详细询问,英文吃力的骚年
戳这里。Node 能够算是前端革命式的换代,随 node
1起发表的 node 包管理器 npm(node package manager)
也曾经是全球最大的开源库生态系统。node/npm
那对构成一出,前端生态迎来了大发生,暂且间为解决各类题材的 node
包司空眼惯,各处开花。gulp 正是急流勇进,一路过伍关斩6将闯出来的3个小
node 包。

扯谈实现,接下去就来探望 gulp
是还是不是在装逼,他毕竟能或不可能帮大家落到实处自动化。

作为3个 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,万1没装呢,程序不就出错了)。

进而在项目标根目录下新建3个 gulpfile.js 文件,那是 gulp
的暗许配置文件。

gulpfile.js 必须放在项目根目录?
本来也可放在别的目录,但那样的话就得在起步 gulp 职责时手动钦命 gulp
配置文件 gulp yourTask –gulpfile your居尔pfilePath,只怕还亟需全局安装
gulp-cli,所以唯有有异乎平时供给,不然就置身项目根目录就行了,那样最简便易行。

布局文件的名字务必是 gulpfile.js 吗?
不区分轻重缓急写,取成 gULPFile.js 的话 gulp 也能认识,只要 toLowerCase
之后是 gulpfile 就行了,假若取其余名字那您就又得利用 –gulpfile
选项去钦点了。

现行反革命工程目录结构早已成了下边的旗帜:

图片 3

营造前 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 目录:

图片 4

构建后 gulp 工程目录结构

于今你早已算是1个 gulp 砖家了,那大约就是 gulp
的全体内容。怎么着,是不是够简单,够丝滑。那也是 gulp
的隆起特征——易于学习,易于使用,5分钟成砖家。假如想要执行化解别的痛心又耗费时间的职务,只需下载安装对应的
gulp 插件包,然后依次类推写1个 gulp.task 出来就行了。

这一个源代码具体是如何被处理的
那经常不供给关注,因为 gulp
插件包已为你做好了,并且封装的特别不错,你只需求报告 gulp 你要如何,gulp
及其插件会帮你打点好一切。那就好比你把壹份电子文书档案传进打字与印刷机,告诉它本人要一份
Sylphy 纸打字与印刷,呲呲呲~,打字与印刷机就吐出来一张 CIMA纸,上边是您的文书档案内容。源代码就是你的电子文档,gulp
插件正是打字与印刷机,生成的可用文件正是您手里的这张 LIVINA纸,你不用关注打字与印刷机内部是何等工作的,因为它包裹的很好,只怕您能够把打字与印刷机拆了壹探究竟也行。

居尔p 是基于流的?
流(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(单页应用)显得有个别不够用了:

  • 单页应用的主导是模块化,ES陆 在此以前 JavaScript
    语言本身直白是不曾模块系统的,导致 AMD,CMD,UMD
    各样轮子模块化方案都蹦出来。对那种模块化乱象,gulp
    显得力不从心,gulp
    插件对那壹块也尚无什么样想法。但是也能够领略,模块消除决方案可不是何人都能
    hold 住的,须要思量的难题太多了;
  • 对前方的 SPA 技术 gulp 处理起来显得有点不知道该咋做,例如 Vue
    的单文件组件,gulp
    同盟局地插件能够勉强处理,可是很稀松。其实谈到底,依旧模块化处理地点的供不应求;
  • 优化页面加载速度的一条主要法则便是缩小 http 请求。gulp
    只是对静态能源做流式处理,处理现在并未有做有效的优化整合,也便是说
    gulp
    忽略了系统层面包车型大巴处理,那1块还有相当大的优化空间,特别是移动端,那才真便是一刻千金啊,哪怕是几百微秒的优化所带来的低收入(用户?流量?付费?)相对不止你的想象。别跟自个儿说
    gulp-concat,CSS
    Pepsi-Colas,那俩玩意儿小打小闹尚可,遇上巨型应用根本拿不上台面。今后的页面动辄上百个繁缛能源(图片,样式表,脚本),也正是许四个http 请求,因而这些优化需要还是格外殷切的。关于为啥收缩 http
    请求能够使得降低页面加载时间戳这里
  • blabla… 你协调想啊,重要正是重型单页应用方面有短板;

局势造大侠。webpack 一声吼,大张旗鼓地挖起了gulp 的墙角。

惯例,先看看webpack官网怎么吹牛逼介绍自个儿的:

Webpack 是当下最热点的前端财富模块化 管理和包装
工具。它能够将许多麻痹的模块遵照注重和规则打包成符合生产条件安插的前端能源。仍是能够将按需加载的模块举行代码分割,等到实际须要的时候再异步加载。

是或不是看完1脸懵逼,不明觉厉。其实翻译过来正是“在本身眼里,什么都以模块”。webpack “万物皆模块” 的理念和 SPA
合营起来大致是男才女貌,美满良缘。那也是 webpack
长期内名声大噪,直接撼动 gulp 地位的基本点缘由。

webpack
的观点相比较时髦,它本人也拉动了诸多新的定义和内容,诸如加载器(loader)、重视图(Dependency
Graph)等等。和 gulp 两钟头成砖家的上学难度相比较,webpack
大概你钻探两日一如既往会晕头转向。

接下去差不多看一下 webpack 的最首要办事章程。

webpack 和 gulp 1样也是3个小 node 包,打开药格局自然是:

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

和 gulp 一样,全局安装是为着实行 webpack 任务,当地安装是为着采取webpack 提供的 api。

设置完 webpack 之后在品种根目录下新建2个 webpack.config.js,那是
webpack 的默许配置文件,同 gulp 的 gulpfile.js
的效劳类似。webpack.config.js 同样是不区分轻重缓急写的,取成
webPACk.CONfig.js 的话 webpack
也能认识,不过取成其余名字或坐落别的目录就需求利用 –config
选项去钦定布置文件了。

方今工程目录结构如下:

图片 5

构建前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 目录:

图片 6

构建后webpack工程目录结构

观察那是否早已贰只雾水了,在你还没领悟发生了怎么着的时候 webpack
已经把业务干完了。这也是 webpack 和 gulp 作业格局的根本差别:Gulp
是搭了个案子,让 gulp
插件在下边唱戏,尽情表演,全部营造相关的具体工作都交由 gulp 插件去做。而
Webpack 就牛逼了,webpack
先搭了个案子,然后本人在上头唱嗨了,仔细壹听,他在地点唱的是《我们不等同》,当然了她也是让
webpack 插件在上头唱戏的。

也正是说 webpack
把不可胜道功效都封装进了友好身体内部,使得本人强大理时臃肿。今后您能够在
./src/index.js 文件里一贯写 ES陆 代码,因为 webpack 把编写翻译 ES六的办事一度封装到本人的落到实处里了,使得 webpack 看起来原生帮忙 ES六而不供给借助第壹方插件,其实她里头也是用了第2方插件的,所以您绝不再越发去下一个babel 之类的插件去转译
ES陆。这样封装的益处是使用起来很方便,糟糕的地点就是使用者完全不知情产生了何等,塑造完了还1脸懵逼。

下面仅是 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。

webpack 又是从哪冒出来的

gulp
就好像是1揽子的,对前端开发工作中每1项悲哀又耗费时间任务都能见招拆招,各样击破。可是前端发展速度之快超越想象,对页面品质和用户体验越来越追求极致,以至于
gulp 某个领域越来越大型 SPA(单页应用)显得有点不够用了:

  • 单页应用的基本是模块化,ES6 以前 JavaScript
    语言自身一贯是从没有过模块系统的,导致 速龙,CMD,UMD
    各样轮子模块化方案都蹦出来。对那种模块化乱象,gulp
    显得力不从心,gulp
    插件对那1块也从没什么想法。可是也足以了解,模块消除决方案可不是何人都能
    hold 住的,供给思考的题材太多了;
  • 对前方的 SPA 技术 gulp 处理起来显得略微力不从心,例如 Vue
    的单文件组件,gulp
    合营局地插件能够勉强处理,可是很差劲。其实提起底,依旧模块化处理方面的供不应求;
  • 优化页面加载速度的一条重点法则便是减掉 http 请求。gulp
    只是对静态能源做流式处理,处理今后并未有做有效的优化整合,相当于说
    gulp
    忽略了系统层面包车型大巴拍卖,那壹块还有相当大的优化空间,尤其是移动端,那才真就是一刻千金啊,哪怕是几百微秒的优化所带来的收益(用户?流量?付费?)相对高于你的设想。别跟小编说
    gulp-concat,CSS
    Pepsi-Colas,那俩玩意儿小打小闹还可以,遇上巨型应用根本拿不上台面。以后的页面动辄上百个繁缛财富(图片,样式表,脚本),也正是无数个
    http 请求,由此那个优化需要依然很是急切的。关于为啥减弱 http
    请求能够使得降低页面加载时间戳这里
  • blabla… 你协调想吧,主要正是重型单页应用方面有短板;

时势造英豪。webpack 一声吼,雷厉风行地挖起了gulp 的墙角。

常规,先看看webpack官网怎么吹牛逼介绍本人的:

Webpack 是当下最看好的前端财富模块化 管住和包装
工具。它能够将洋洋松散的模块根据依赖和规则打包成符合生产条件布署的前端能源。仍是能够将按需加载的模块进行代码分割,等到实际需求的时候再异步加载。

是还是不是看完1脸懵逼,不明觉厉。其实翻译过来就是“在自身眼里,什么都是模块”。webpack “万物皆模块” 的意见和 SPA
合营起来简直是一双两好,金玉良缘。这也是 webpack
长时间内名声大噪,直接撼动 gulp 地位的首要缘由。

webpack
的看法比较时髦,它自身也拉动了重重新的定义和内容,诸如加载器(loader)、依赖图(Dependency
Graph)等等。和 gulp 两钟头成砖家的学习难度比较,webpack
也许你切磋二日1如既往会晕头转向。

接下去差不多看一下 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
选项去内定安插文件了。

今昔工程目录结构如下:

图片 7

创设前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(终端里1般会合世一大坨编写翻译音信)。好了,今后 webpack
已经把编写翻译好的文件输出到了 dist 目录:

图片 8

创设后webpack工程目录结构

看来那是还是不是早就叁头雾水了,在您还没精通爆发了怎么样的时候 webpack
已经把作业干完了。那也是 webpack 和 gulp 作业形式的严重性区别:Gulp
是搭了个案子,让 gulp
插件在上头唱戏,尽情表演,全部创设相关的切实事情都交由 gulp 插件去做。而
Webpack 就牛逼了,webpack
先搭了个案子,然后本人在地点唱嗨了,仔细一听,他在上边唱的是《我们不平等》,当然了他也是让
webpack 插件在上头唱戏的。

也等于说 webpack
把过多效果都封装进了协调肉体里面,使得自个儿强抚州时臃肿。未来您能够在
./src/index.js 文件里直接写 ES陆 代码,因为 webpack 把编译 ES6的办事早已封装到温馨的贯彻里了,使得 webpack 看起来原生匡助 ES陆而不需求借助第三方插件,其实她在那之中也是用了第一方插件的,所以您绝不再越发去下一个babel 之类的插件去转译
ES陆。这样封装的功利是使用起来很方便,倒霉的地点就是使用者完全不清楚发生了怎么,营造完了还一脸懵逼。

上边仅是 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
那种小而美的落到实处,因为她俩只做1件事——打包js。而一旦必要将图片,样式,字体等有着静态能源总体装进,webpack
毫无疑问是首要选择。那也是为何更多的流行库和框架初叶从 webpack
转向使用 rollup 实行李包裹装,因为他们只须求打包 js,webpack
好多精锐成效根本用不到。连 rollup 官网也坦言倘若你在创设三个库,rollup
绝对是首要采纳,但只若是创设多个用到,那么请选 webpack。

结论

小编看许四个人说 gulp 和 webpack
不是一类东西,笔者不那样觉得,尽管说两者的视角确实是不1样的,gulp
走的是流式处理途径,webpack
走的是模块处理途径,可是两者所要完结的对象却是1样的,那便是促进前端领域的自动化和工程化管理。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 的事物集成进来,反正都以开源的
腾讯那么牛逼,你说他怎么不把阿里Baba(Alibaba)并入进来。集成应该是没也许,因为
gulp 和 webpack
的定势不壹致。所以,未有放之天下而皆准的缓解方案,只有切实难题具体分析采纳符合的消除方案才能科学地消除难题。gulp
和 webpack 只是大家缓解难题的工具,不要被工具束缚了动作不能够开拓进取。

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

结论

本人看许三人说 gulp 和 webpack
不是1类东西,小编不这么觉得,即使说两者的出发点确实是不等同的,gulp
走的是流式处理途径,webpack
走的是模块处理途径,可是两岸所要实现的指标却是1样的,那就是拉动前端领域的自动化和工程化管理。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 只是我们化解难题的工具,不要被工具束缚了手脚不可能进步。

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

相关文章