前端自动化构建工具gulp的使用总结

前端自动化构建工具gulp的使用总结

博主最近偶的空闲，在此对gulp的使用作一个总结，让小伙伴知道如何合理的使用gulp以及gulp的使用技巧。

谈到gulp，有人可能就会想到另一个构建工具grunt，那么 博主就要夸你一句：油啊热瘪死他。

那么grunt和gulp有什么异同点呢？

1.易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。

2.高效：经过利用Node.js强大的流，不须要往磁盘写中间文件，能够更快地完成构建。

3.高质量：Gulp严格的插件指导方针，确保插件简单而且按你指望的方式工做。

4.易于学习：经过把API降到最少，你能在很短的时间内学会Gulp。构建工做就像你设想的同样：是一系列流管道

5.易用 Gulp相比Grunt更简洁，并且遵循代码优于配置策略，维护Gulp更像是写代码。高效 Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，经过管道链接，不须要写中间文件。高质量 Gulp的每一个插件只完成一个功能，这也是Unix的设计原则之一，各个功能经过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不只压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存是另外一个插件，能够被别的插件使用，这样就促进了插件的可重用性。易学 Gulp的核心API只有5个，掌握了5个API就学会了Gulp，以后即可以经过管道流组合本身想要的任务。

如何使用gulp配置本身的项目

要想在项目中使用gulp,就要全局安装gulp,执行命令以下

npm install gulp -g 其中-g表示全局安装（node本身安装就可）

这样就算是在计算机上安装了全局gulp 也就意味着可使用gulp中的模块了

下面跟我一块儿学习在项目中如何使用吧

开车了 快点上车 。。嘟嘟嘟

新建文件夹managers,maneger下面新建两个文件夹dist和src，一个表示源头，一个表示输出，而后经过git bash工具 在manager文件夹下执行命令

npm init (用于生成package.json文件)

执行结果以下

一路回车就行，最终获得的目录以下

而后就开始安装须要用到的插件，这里我作几个重要的说明一下，其余插件能够本身去摸索.

npm install gulp--save-dev（save-dev指的是把gulp配置到本项目的package.json文件下，由于你要使用人家的插件嘛 确定须要它来指挥）
npm install gulp-uglify --save-dev(这个插件是用来压缩js的)
npm install gulp-ruby-sass --save-dev(这个是用来编译sass的)
npm install gulp-notify --save-dev(这个是提醒插件)

安装这三个插件，安装完成后你的package.json文件应该是这样的（不是这样的扇博主的face）

显而易见你在devDependdencies中看到了你安装的四个插件，如今就让咱们来使用它们吧

首先，学会压缩js，在src文件夹下新建文件夹js以及gulpfile.js，并在js文件夹下新建文件index.js

下面重点来了，就是如何去本身写任务文件（gulpfile.js）

首先，在这里给你们简单说一下gulp重要的4个api

gulp.src()表示文件的来源 或者说是读取文件
gulp.dest()表示文件的输出 也就是输出文件
gulp.task()表示要执行的任务
gulp.watch()表示要监听的任务

具体的api请狠狠点击这里，不要留情面gulp

下面开始跟着我一块儿写任务吧

首先要引入须要的插件而后给gulp布置任务：以下：

而后你在git bash 上输入

gulp uglify(这个命令就是告诉gulp执行uglify任务，即：gulp+任务名字)

最后你会看到这么一个喜庆的画面

接着你会看到在你的dist文件夹下新生成了js文件夹 里面有个index.js这个index.js就是压缩事后的。

而后或许有人会问了，那么若是个人js文件变更了，它会不会监听到呢？

这个问题问的至关有水平，很好，遇到这样提问的程序员，应该鼓励一下，（鼓励师如花何在）

在gulp你能够经过watch来监听js的改变，以下：

执行 gulp watch()

以下：

这个时候你去修改index.js文件 你会发现以下图示：

这是为何呢？哦 原来是这样啊，当你改变你的js文件时候，gulp监听到了文件的改变，它就会去执行一次uglify任务，也就是你改一次它压缩一次。（忽然想到了亚索 很久没lol了）

是否是颇有意思啊，我在写一个关于sass的任务，但愿你们可以理解哈

注意（sass基于ruby,因此你们还要去安装ruby,不会的能够自行百度）

到此，我相信你们对gulp有个简单的认识了，也想跃跃欲试了，其实gulp还有不少插件，好比gulp-imagemin,gulp-rev,gulp-rev-collector，gulp-clean等须要你们慢慢去研究。

在追求卓越的道路上，就是要不断的努力和总结，你们有啥疑问能够加群 474471759，找博主谈人生 谈理想。