【工具】gulp自动化构建工具入门教程

⭐️ 本文首发自 前端修罗场(点击即可加入),一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入,即可参与打卡挑战,和一群人一起努力。挑战成功即可获取一次免费的模拟面试机会,进而评估知识点的掌握程度,获得更全面的学习指导意见,不走弯路,不吃亏!


gulp 是基于流(stream)的自动化构建工具,能帮助前端节省很多资源。
OK,直接进入主题——本篇中将主要介绍怎么用gulp。

1 . 先到nodeJs的官网(https://nodejs.org/en/)下载安装nodejs,因为gulp是基于node环境;

然后再cmd命令行工具中你可以检测node的版本以此判断node是否安装成功;

命令:node -v
这里写图片描述

2.安装 npm ,使用 npm 可以方便的安装 gulp;

然后再 cmd 命令行工具中你也可以检测 npm 的版本以此判断 node 是否安装成功;
这里写图片描述

3.根据你的项目路径,通过命令行工具先进入到项目的根目录下,例如:
D:\wampv\wamp\www\getgulp 这是我项目的路径,那么就是用 cd 命令进入到 getgulp 目录下;
图示:
这里写图片描述

此时,我们已经进入到getgulp 这个目录下方了。

4 .安装 gulp,使用 npm 命令,先全局安装

npm install -g gulp

5.在根目录D:\wampv\wamp\www\getgulp 下新建一个package.json 文件
特别注意:package.json 是一个普通json文件,所以不能添加任何注释。
然后在文件中写入

{
  "devDependencies": {
    "del": "^2.0.2"
}

这是为了在安装本地gulp的时候,能解析到package.json的数据;

6.在本地根目录D:\wampv\wamp\www\getgulp 下安装gulp
Npm install gulp --save-dev
安装完成之后,package.json中就会出现gulp版本号的信息
这里写图片描述

以后,每成功安装一个gulp的插件都会在package.json文件中自动写入所安装插件的版本号信息;
至此,我们就将gulp安装到我们的项目中啦~


具体应用——优化less、js、img文件

1.先在根目录D:\wampv\wamp\www\getgulp 新建一个gulpfile.js的文件
gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件,所有的对项目文件的自动化操作将在这里面进行;
如图:
这里写图片描述

然后在根目录下新建一个gulp文件夹,并在gulp文件夹下新建一个tasks文件夹和config.js文件,在tasks文件夹创建default.js、less.js、watch.js,
tasks文件里存放对应的任务、config.js配置任务的相关配置
Config.js配置如下:
这里写图片描述

Default.js如下:
这里写图片描述

Less.js如下:

这里写图片描述

Watch.js文件如下:
这里写图片描述

注意:在wacth.js文件中,我们需要先安装gulp-watch插件;

在gulpfile.js中我们要常常用到几个操作:

require(); gulp.Task(‘任务名称’,回调函数function(){});
gulp.src(‘输入路径’)//你所要操作的文件路径; .pipe()
//管道操作,pipe()是stream模块里传递数据流的一个方法,第一个参数为插件方法,插件会接收从上游流下的文件,进行处理加工后,再往下流。

gulp.dest(‘输出路径’)//你所要输出结果的路径; gulp.Watch(‘监听路径’,[’任务名称’])//监听任务文件变化;

1.然后我们在gulpfile.js文件中就可以开始建立task操作我们要构建的项目 。
首先在文件中引入tasks任务,并引入插件require-dir
这里写图片描述

同样,我们要先安装require-dir插件

这里写图片描述

再者,将我们需要对项目文件的具体操作所需要的gulp插件引入,
例如:
要对less编译和对html以及img文件压缩,则需要先安装gulp-minify-less、gulp-htmlmin、
gulp-imagemin插件。Gulp上有很多插件,这些插件在gulp的官方文档上都能找到。http://www.gulpjs.com.cn/

3.使用npm安装gulp插件安装到项目根目录下
我们先安装gulp-minify-css、gulp-htmlmin、gulp-imagemin插件
这里写图片描述

成功安装完成之后在package.json文件夹中就会有相关的插件信息了,在node_modules文件夹下也将自动生成对应的插件文件夹
这里写图片描述
这里写图片描述

4.然后我们在根目下新建项目文件index.html和src文件夹、dist输出文件夹,大致的目录结构如下:
这里写图片描述

5.建好项目文件之后,我们就可以在gulpfile.js中操作了:
首先需要require以下gulp,这个是所有gulp操作的基础,然后引入相关的gulp插件

如图:

这里写图片描述

为了捕获操作中的异常,我们就需要先安装两个插件gulp-notify和gulp-plumber,然后在gulpfile.js文件中require它们:
这里写图片描述

这里写图片描述

这里写图片描述

6.接下来,我们来写task任务——对项目文件进行相关的gulp操作:
首先,我们来处理less文件,将src/less目录下的less文件编译为css文件:
这里写图片描述

现在我们先来测试下,是否能够顺利进行less编译。
在命令行工具中我们终于要使用到gulp命令啦!

7.使用gulp 命令进行构建

这里写图片描述

于是,我们在build文件夹下将看到前面对less文件的编译输出结果:
这里写图片描述

OK ,关于对less的操作就介绍这些。大家还可以实践一下对img、js、html等文件的操作,都是很相似的操作。

构建工具在前端工程中已作为一种标配在使用,它是前端工程中必要的一个环节,无论从节省资源和时间,还是从效率上都起到了很大的作用,类似的工具还有fis、grunt等。目前听说fis在构建方面表现的很突出,所以在下次中希望自己也能出一篇关于百度fis的文章吧!一起加油喽~(❤️ 现在关注【前端修罗场】,后台回复【666】,即可获取一份【免费的优质学习资料】,一起学习,一起进步,不走弯路,不吃亏~)

这里写图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程轨迹_

期望和你分享一杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值