留神:这篇文章假设你具备较好的JS根底,能够独立实现小规模的我的项目

你甚至应该晓得,常见的各种JS函数库和插件

同时,你应该具备肯定的我的项目部署的常识,例如晓得真正部署在服务器上的文件,跟开发的时候编写的文件是不同的
再同时,你必须要具备nodeJS的一些最基本知识。例如应用npm命令装置软件等,晓得nodeJS如何加载模块

如果你用过sass或者less那就更好不过了。

最重要的,就是你须要晓得常见的命令行操作,例如cd、cd ..

假如你没听说过sass甚至不晓得node为何物,JQuery不熟,甚至没用JS写过我的项目。

没关系,请点击浏览器右上角的叉号,整个世界都会复原来日的美妙


我的项目构建是什么?

比如说吧,当我的项目部署上线时,你所有的JS文件,要不要进行压缩减小体积,以便于加载的时候速度更快?

嗯,这个的确须要。

图片要不要压缩解决,以取得更好的加载速度?

嗯嗯,这个的确须要。

你编写的JS代码应用了ES6语法,为了防止浏览器兼容,要不要转换成ES5?

嗯嗯嗯,这个的确须要。

你编写的scss源文件,要不要编译生成css?

嗯嗯嗯嗯,这个的确须要。

你的CSS是不是也要压缩?

嗯嗯嗯嗯嗯,这个的确须要。

开发过程中,你的页面跟后盾服务器不在一台电脑上,你是否须要在本地搭建一个代理服务器以便于解决长期的跨域问题?

嗯嗯嗯嗯嗯嗯,这个的确须要。

以上这些相似的问题,Gulp能够很轻松把它们放在一起实现。


Gulp是一个windows零碎下的软件么?

很显然它不是。它是一个NodeJS编写的软件,须要咱们先装置NodeJS的运行环境。

这是nodeJS windows版网盘地址:

https://pan.baidu.com/s/1taPXX2Y01tVcqFUd3eATQQ 明码:bwf9

版本号: v8.9.3

装置好NodeJS环境,接下来做什么?

装置Gulp

咱们须要应用node提供的一个叫做npm的命令

须要我关上命令行吗?

不然呢? 难不成你想用QQ给NodeJS发个音讯?

关上后是不是像这样?

接下来进入你我的项目的根目录,而后输出命令 npm install gulp

装置时为什么要进入我的项目根目录?难道每个须要gulp的我的项目都要装一遍吗?

没错,是这样的。因为每个我的项目应用gulp的性能不同,版本可能也不一样。这样每个我的项目的gulp互相独立。

留神 !在装置过程中,因为网速问题,常常导致装置失败。 多尝试几次就好

如果装置过程没有呈现任何 Error 提醒,那就没有问题了。

我的项目中多出了一个node_modules文件夹,这就是我下载的gulp软件?

是的,不要批改、挪动或删除这个文件夹


开始编写gulp工作文件

这个工作文件是干什么的??

简略的说,就是写一个工作列表,通知gulp具体要做什么。

比方我当初要压缩我的js文件,该怎么编写gulp工作文件?

当初,咱们假设我的项目的目录构造是这样的:

src 目录寄存咱们的源文件,dist 目录寄存咱们压缩后的文件

接下来咱们要在我的项目的根目录,创立一个 gulpfile.js 文件

gulpfile.js 文件内容如下:

如果你相熟 nodeJS 那么上面的代码了解起来将会非常容易:

如果你不相熟 nodeJS 那么上面的代码了解起来将会十分吃力:

好了,所有准备就绪,筹备启动gulp执行压缩工作

咱们回到命令行,依然在我的项目的根目录下,输出命令 gulp minifyJS

我执行了这个命令,然而碰见了谬误:

Error: Cannot find module 'gulp-uglify'

因为找不到'gulp-uglify'这个模块。所以接下来咱们装置它,输出命令npm install gulp-uglify

等等,不是曾经装置过gulp了吗? 为什么压缩文件的模块还要独自装置?

gulp自身不具备压缩文件的性能。它的次要工作,是定义并执行工作。

而工作的具体内容是咱们本人定的,就像gulpfile.js文件里写的那样。

为什么gulp不把压缩js的性能集成进来,这样看来gulp其实没什么用了?

恰恰相反, 你认真想,如果Gulp把性能集成进来,那么它能提供的性能无论如何是无限的

那样做还会让软件体积变大,不须要的性能也必须强制装置。并没有益处。

正是因为gulp能够借助任何其它软件来执行工作。实践上来说,gulp的性能是有限的。

如同有点情理。

好了,接下来咱们再次执行命令gulp minifyJS

执行了,但又碰见了谬误:

'gulp' 不是外部或外部命令,也不是可运行的程序或批处理文件。

这是因为咱们之前把gulp装置在了我的项目外面。NodeJS运行环境并不能辨认gulp命令

那怎么办呢?

再把gulp全局装置一次npm install gulp -g

好了,咱们来看看最初生成的成果

dist目录中的文件全部都是压缩过的。


目前,你曾经把握了Gulp的原理和最根本用法

Gulp能够借助其它模块产生无穷无尽的用法,篇幅无限,明天临时只能介绍到这里

如果大家有什么倡议,能够给我留言

我置信,万事"结尾"难,所以接下来你的自学之路,将会无比的顺畅。