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

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

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的文章吧!一起加油喽~



相关文章
|
12天前
|
C语言 开发者
Makefile 简介:自动化你的构建过程
一旦`Makefile`被正确设置,你只需要在命令行中运行命令`make`,它会查找当前目录下的`Makefile`文件,并执行其中定义的规则来构建目标。`make`命令非常智能,它会检查文件的时间戳,只重新编译那些自上次编译后有改动的文件。 总之,`Makefile`是开发者的强大工具,能够大幅提升软件开发的效率和准确性。通过学习和使用`Makefile`,你可以更有效地管理项目构建过程,使其自动化、高效且可靠。
14 1
|
24天前
|
运维 监控 Docker
构建高效微服务架构:从理论到实践构建高效自动化运维体系:Ansible与Docker的完美融合
【5月更文挑战第31天】 在当今软件开发的世界中,微服务架构已经成为了实现可伸缩、灵活且容错的系统的关键策略。本文将深入探讨如何从零开始构建一个高效的微服务系统,涵盖从概念理解、设计原则到具体实施步骤。我们将重点讨论微服务设计的最佳实践、常用的技术栈选择、以及如何克服常见的挑战,包括服务划分、数据一致性、服务发现和网络通信等。通过实际案例分析,本文旨在为开发者提供一套实用的指南,帮助他们构建出既健壮又易于维护的微服务系统。
|
2天前
|
Java Maven
Maven 自动化构建
Maven自动化构建确保项目依赖稳定性。当bus-core-api构建完成后,app-web-ui和app-desktop-ui自动构建。app-web-ui依赖bus-core-api的1.0-SNAPSHOT,同样app-desktop-ui也依赖于它。这种方式简化了多项目间的依赖管理和构建流程。
|
21天前
|
存储 数据管理 测试技术
构建Python构建自动化测试框架(原理与实践)
当谈到软件质量保证时,自动化测试是一个不可或缺的步骤。Python作为一种简单易学的编程语言,具有丰富的测试框架和库,使得构建自动化测试框架变得相对简单。本文将介绍如何使用Python构建自动化测试框架,包括选择合适的测试框架、编写测试用例、执行测试和生成报告等方面。
构建Python构建自动化测试框架(原理与实践)
|
2天前
|
JSON 弹性计算 运维
深入浅出资源编排ROS:构建云环境下的自动化运维利器引言
**资源编排ROS是阿里云提供的自动化管理工具,通过声明式模板定义云资源生命周期,简化复杂IT架构的运维。它解析JSON或YAML模板,自动创建、更新资源,确保状态与模板一致。ROS用于环境一致性、故障恢复、成本优化,是现代云管理的关键,助力企业提升效率和成本效益。**
74 3
|
6天前
|
Java Maven
Maven 自动化构建
Maven自动化构建确保依赖稳定性:当`bus-core-api`构建完成后,依赖它的`app-web-ui`和`app-desktop-ui`项目自动构建。`app-web-ui`与`app-desktop-ui`都依赖`bus-core-api`的1.0-SNAPSHOT版本。
|
8天前
|
Java Maven
Maven 自动化构建
Maven自动化构建确保项目依赖稳定性:当`bus-core-api`构建后,`app-web-ui`和`app-desktop-ui`这两个依赖它的项目自动构建。`app-web-ui`和`app-desktop-ui`均依赖`bus-core-api`的1.0-SNAPSHOT版本。
|
25天前
|
安全 物联网 测试技术
构建未来:Android与IoT设备的无缝交互深入探索软件自动化测试的未来趋势
【5月更文挑战第30天】在物联网(IoT)技术快速发展的当下,Android系统因其开放性和广泛的用户基础成为了连接智能设备的首选平台。本文将探讨如何通过现代Android开发技术实现智能手机与IoT设备的高效、稳定连接,并分析其中的挑战和解决方案。我们将深入挖掘Android系统的底层通信机制,提出创新的交互模式,并通过实例演示如何在Android应用中集成IoT控制功能,旨在为开发者提供一套可行的指导方案,促进IoT生态系统的进一步发展。
|
25天前
|
敏捷开发 监控 测试技术
深入探索自动化测试框架的选择与构建
【5月更文挑战第30天】在追求高效、可靠的软件发布周期中,自动化测试成为确保产品质量的关键。本文将探讨如何选择合适的自动化测试框架并指导构建一个符合项目需求的框架体系。我们将通过分析不同测试场景和需求,评估Selenium、Appium和JUnit等流行工具的优缺点,并提供策略性建议,以助读者构建出既灵活又稳定的自动化测试环境。
19 3
|
25天前
|
运维 监控 Devops
构建高效自动化运维系统:DevOps在企业级应用的实践
【5月更文挑战第30天】 随着信息技术的飞速发展,企业对软件交付速度和稳定性的要求越来越高。传统的运维模式已无法满足快速迭代和高效稳定的需求,因此,本文将探讨如何通过实施DevOps文化、流程和工具,构建一个高效的自动化运维系统。文章将详细描述DevOps的核心理念、关键技术组件以及如何在组织中落地实施策略,旨在帮助企业提升运维效率,加速产品的上市时间,同时保证系统的高可用性和稳定性。