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



相关文章
|
2月前
|
机器学习/深度学习 人工智能 运维
构建高效运维体系:从自动化到智能化的演进
本文探讨了如何通过自动化和智能化手段,提升IT运维效率与质量。首先介绍了自动化在简化操作、减少错误中的作用;然后阐述了智能化技术如AI在预测故障、优化资源中的应用;最后讨论了如何构建一个既自动化又智能的运维体系,以实现高效、稳定和安全的IT环境。
77 4
|
1月前
|
监控 jenkins 测试技术
自动化测试框架的构建与实践
【10月更文挑战第40天】在软件开发周期中,测试环节扮演着至关重要的角色。本文将引导你了解如何构建一个高效的自动化测试框架,并深入探讨其设计原则、实现方法及维护策略。通过实际代码示例和清晰的步骤说明,我们将一起探索如何确保软件质量,同时提升开发效率。
43 1
|
1月前
|
测试技术 开发者 Python
自动化测试之美:从零构建你的软件质量防线
【10月更文挑战第34天】在数字化时代的浪潮中,软件成为我们生活和工作不可或缺的一部分。然而,随着软件复杂性的增加,如何保证其质量和稳定性成为开发者面临的一大挑战。自动化测试,作为现代软件开发过程中的关键实践,不仅提高了测试效率,还确保了软件产品的质量。本文将深入浅出地介绍自动化测试的概念、重要性以及实施步骤,带领读者从零基础开始,一步步构建起属于自己的软件质量防线。通过具体实例,我们将探索如何有效地设计和执行自动化测试脚本,最终实现软件开发流程的优化和产品质量的提升。无论你是软件开发新手,还是希望提高项目质量的资深开发者,这篇文章都将为你提供宝贵的指导和启示。
|
19天前
|
人工智能 自然语言处理 JavaScript
Agent-E:基于 AutoGen 代理框架构建的 AI 浏览器自动化系统
Agent-E 是一个基于 AutoGen 代理框架构建的智能自动化系统,专注于浏览器内的自动化操作。它能够执行多种复杂任务,如填写表单、搜索和排序电商产品、定位网页内容等,从而提高在线效率,减少重复劳动。本文将详细介绍 Agent-E 的功能、技术原理以及如何运行该系统。
66 5
Agent-E:基于 AutoGen 代理框架构建的 AI 浏览器自动化系统
|
4天前
|
Serverless 决策智能 UED
构建全天候自动化智能导购助手:从部署者的视角审视Multi-Agent架构解决方案
在构建基于多代理系统(Multi-Agent System, MAS)的智能导购助手过程中,作为部署者,我体验到了从初步接触到深入理解再到实际应用的一系列步骤。整个部署过程得到了充分的引导和支持,文档详尽全面,使得部署顺利完成,未遇到明显的报错或异常情况。尽管初次尝试时对某些复杂配置环节需反复确认,但整体流程顺畅。
|
9天前
|
缓存 监控 安全
公司电脑监控软件的 Gradle 构建自动化优势
在数字化办公环境中,公司电脑监控软件面临代码更新频繁、依赖管理和构建复杂等挑战。Gradle 构建自动化工具以其强大的依赖管理、灵活的构建脚本定制及高效的构建缓存与增量构建特性,显著提升了软件开发效率和质量,支持软件的持续更新与优化,满足企业对员工电脑使用情况的监控与管理需求。
24 3
|
21天前
|
数据库 Docker 容器
Docker在现代软件开发中扮演着重要角色,通过Dockerfile自动化构建Docker镜像,实现高效、可重复的构建过程。
Docker在现代软件开发中扮演着重要角色,通过Dockerfile自动化构建Docker镜像,实现高效、可重复的构建过程。Dockerfile定义了构建镜像所需的所有指令,包括基础镜像选择、软件安装、文件复制等,极大提高了开发和部署的灵活性与一致性。掌握Dockerfile的编写,对于提升软件开发效率和环境管理具有重要意义。
42 9
|
19天前
|
运维 jenkins Java
Jenkins 自动化局域网管控软件构建与部署流程
在企业局域网管理中,Jenkins 作为自动化工具,通过配置源码管理、构建及部署步骤,实现了高效、稳定的软件开发与部署流程,显著提升局域网管控软件的开发与运维效率。
37 5
|
1月前
|
jenkins 测试技术 持续交付
自动化测试框架的构建与优化:提升软件交付效率的关键####
本文深入探讨了自动化测试框架的核心价值,通过对比传统手工测试方法的局限性,揭示了自动化测试在现代软件开发生命周期中的重要性。不同于常规摘要仅概述内容,本部分强调了自动化测试如何显著提高测试覆盖率、缩短测试周期、降低人力成本,并促进持续集成/持续部署(CI/CD)流程的实施,最终实现软件质量和开发效率的双重飞跃。通过具体案例分析,展示了从零开始构建自动化测试框架的策略与最佳实践,包括选择合适的工具、设计高效的测试用例结构、以及如何进行性能调优等关键步骤。此外,还讨论了在实施过程中可能遇到的挑战及应对策略,为读者提供了一套可操作的优化指南。 ####
|
1月前
|
敏捷开发 监控 测试技术
探索自动化测试框架的构建与优化####
在软件开发周期中,自动化测试扮演着至关重要的角色。本文旨在深入探讨如何构建高效的自动化测试框架,并分享一系列实用策略以提升测试效率和质量。我们将从框架选型、结构设计、工具集成、持续集成/持续部署(CI/CD)、以及最佳实践等多个维度进行阐述,为软件测试人员提供一套系统化的实施指南。 ####
下一篇
DataWorks