20分钟快速gulp入门

在互联网告诉发展的今天,自node出现后,我们前端也越来越大(心里美美哒~),同样带来的Web业务日益复杂化和多元化,模式也都想webPage模式转向webApp模式,拼几个页面搞几个jquery的插件就能搞一个完成一个项目的日子已经是很久远的曾经了,而且从前要实现压缩代码,压缩图片,上传到服务器等等等需要各种工具才能实现的功能,用起来很麻烦。所以出现了各种前端构建化工具也应运而生: 等已经成为现在前端开发工程师的必备技能之一。最新的 也大出风头,因为Webpack 提供的“零配置”的进展缓慢和混沌不清,不过现在 已经发布了,还不清楚未来的走向~好,说了这么多,该说说今天的主角了,虽然已经不是前沿的技术了,但是用起来非常的简单方便人性化,下面就来简单介绍介绍基础用法啦~

安装

在确保你的电脑里装了node的情况下,打开命令行执行以下代码:

全局安装gulp,打开命令行输入 有版本号则证明安装成功啦然后创建一个文件夹,名字随你啦~我们接下来的操作都在这个文件夹中进行啦~我创建的文件夹叫 ,如果你的电脑中安装了git请进入这个文件夹然后右键选择 ,如果没有安装那就进入 然后进入相应的文件目录啦~然后~

执行 之后会让你填名字啊 作者啊 描述啊 之类的 剩下的你就一顿回车,之后你的文件夹中就会自动生成一个 文件

然后在命令行中执行 在当前项目中安装gulp

好啦,现在gulp就安装完毕了~接下来我们可以骚操作了

在根目录创建一个文件命名为 (必须是这个,不能变哦)

在根目录穿件一个文件夹 简单的介绍一下gulp的api

然后我们简单的应用一下感受一下gulp的用法

打开 输入如下代码:

然后再当前文件夹目录下的命令行中执行 gulp message

可以看到 证明任务已经执行了

接下来为大家简单介绍一下:拷贝文件,压缩合并js,sass编译,压缩图片的用法。首先来安装上述功能相对应的插件(同样也是在相应的目录下执行哦)

安装可能会有些慢,如果实在受不了的话可以安装淘宝的镜像cnpm 然后用cnpm执行哦~cnpm的安装如下:

安装完gulp的插件后在项目根目录新建文件夹 ,打开 开始配置~;

第一步,引入插件

第二步,定义任务 我们先来定义个简单的任务来再次熟悉一下 的用法~ 下面定义一个拷贝html的任务

任务一, 拷贝html

在命令行里执行 gulp copyHtml 就可以啦,赶紧去看看你的文件夹里成功拷贝了么?

任务二, 图片压缩

准备工作:在src目录下新建images文件夹,在里面随便放几张图片

同样命令行执行 gulp imagemin 即可完成输出,现在你应该基本了解gulp的任务写法了,接下来的几个任务我就不细说了,直接上代码

现在4个api我们已经用了3个了,还有一个监听的 没有用,简单介绍一下,字面意思监听相应目录下的文件是否发生改变,如果改变执行某个任务,即一个参数为监听目录,另一个参数为要执行的任务,(watch是一个持续执行的任务结束的话是不会停止的哦)代码如下:

现在就已经有了5个任务了(算上最开始的 就6个了)每一个任务都要执行一遍命令行是不是很麻烦。如果任务更多了那就更烦了,不要担心, 为我们准备了默认任务

定义好默认任务如上后,在命令行中输入 回车即可按照参数中的任务顺序全部执行。

结语

今天的gulp分享就告一段落啦~希望能对大家有所帮助。本次分享只是入门教程,简单的介绍了基础用法,实际项目中更复杂的用法日后会陆续分享给大家哒~如果喜欢给点个赞啦(比心心~~),后续预告~~本周还会出webpack的相关入门分享给大家

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180305G1LY2V00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券