gulp入门1-安装

Gulp 是一个流行的自动化构建工具,主要用于前端开发中的任务自动化,如文件压缩、代码合并、代码校验等。以下是一个 Gulp 的入门教程,帮助你快速上手:

1. 安装 Node.js 和 npm

首先,你需要在你的计算机上安装 Node.js 和 npm(Node Package Manager)。你可以从 Node.js 官网下载并安装适合你操作系统的版本。

2. 安装 Gulp

在命令行中,使用 npm 全局安装 Gulp:

npm install --global gulp-cli

注意这里安装的是 gulp-cli(Gulp 命令行接口),而不是 gulp 本身。这是因为 Gulp 4+ 版本将任务逻辑和命令行接口进行了分离。

3. 初始化项目

在你的项目文件夹中,初始化一个新的 npm 项目(如果还没有的话):

npm init -y

-y 参数会跳过问答过程,自动生成一个默认的 package.json 文件。

4. 安装 Gulp 作为开发依赖

在项目文件夹中,使用 npm 安装 Gulp 作为项目的开发依赖:

npm install --save-dev gulp

5. 创建一个 Gulp 任务

在项目的根目录下创建一个名为 gulpfile.js 的文件,这是 Gulp 的配置文件。在这个文件中,你可以定义你的任务。

下面是一个简单的示例,演示如何创建一个简单的 Gulp 任务来复制文件:

// 引入 gulp
const gulp = require('gulp');// 定义一个名为 'copy' 的任务
function copyTask() {// 使用 gulp.src 指定源文件return gulp.src('src/*.js') // 匹配 src 目录下所有的 .js 文件// 使用 gulp.dest 指定目标目录.pipe(gulp.dest('dist')); // 将文件复制到 dist 目录
}// 使用 gulp.task 导出任务
exports.copy = copyTask;

6. 运行 Gulp 任务

在命令行中,进入你的项目文件夹,然后运行 Gulp 任务:

npx gulp copy

这里使用了 npx 命令来运行项目本地的 Gulp。copy 是你在 gulpfile.js 文件中定义的任务名称。

7. 使用插件

Gulp 的强大之处在于它支持大量的插件,可以用来执行各种任务。例如,你可以使用 gulp-uglify 来压缩 JavaScript 文件,或者使用 gulp-sass 来编译 Sass 文件。

首先,你需要使用 npm 安装你需要的插件:

npm install --save-dev gulp-uglify

然后,在你的 gulpfile.js 文件中引入并使用这个插件:

const gulp = require('gulp');
const uglify = require('gulp-uglify');function minifyTask() {return gulp.src('src/*.js').pipe(uglify()) // 使用 uglify 插件压缩文件.pipe(gulp.dest('dist'));
}exports.minify = minifyTask;

现在你可以运行 npx gulp minify 来压缩你的 JavaScript 文件了。

8. 串联任务

你还可以使用 gulp.seriesgulp.parallel 来串联或并行运行多个任务。例如:

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');function minifyTask() {// ... 省略 ...
}function compileSassTask() {return gulp.src('src/sass/*.scss').pipe(sass()) // 使用 sass 插件编译 Sass 文件.pipe(gulp.dest('dist/css'));
}exports.build = gulp.series(minifyTask, compileSassTask); // 串行运行两个任务

现在你可以运行 npx gulp build 来同时执行压缩 JavaScript 和编译 Sass 两个任务了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/18524.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

教你考研“潜规则”!初试+复试经验分享!

这个系列会邀请上岸学长学姐进行经验分享~ 今天分享经验的同学初试380,上岸中国计量大学。 政治 政治不用开始过早,一般推荐在7-8月开始就可以了,我是七月底开始的,考了72分,选择33分,大题39分。刚开始第…

软考 系统架构设计师系列知识点之杂项集萃(22)

接前一篇文章:软考 系统架构设计师系列知识点之杂项集萃(21) 第32题 人口信息采集处理和利用业务属于( ),营业执照发放属于( ),户籍管理属于( )&…

TypeScript 学习笔记(十六):TypeScript 与第三方库的结合使用

TypeScript 学习笔记(十六):TypeScript 与第三方库的结合使用 1. 引言 在前几篇学习笔记中,我们探讨了 TypeScript 的基础知识、前后端框架的结合应用、测试与调试技巧、性能优化、前端架构设计、工具和生态系统,以及 TypeScript 与数据库的深度结合。本篇将重点介绍 Ty…

Flink状态数据结构升级

Flink状态数据结构升级 1. 升级状态数据结构 为了对给定的状态类型进行升级,你需要采取以下几个步骤: 对 Flink 流作业进行 savepoint 操作。升级程序中的状态类型(例如:修改你的 Avro 结构)。从 savepoint 恢复作业。…

Fastjson 反序列化漏洞[1.2.24-rce]

漏洞复现环境搭建请参考 http://t.csdnimg.cn/vSaaw kali切换jdk版本请参考 Kali安装JAVA8和切换JDK版本的详细过程_kali安装jdk8-CSDN博客 漏洞原理 Fastjson提供的com.sun.rowset.JdbcRowSetImpl类下的dataSourceName方法支持传入一个RMI/LDAP源,支持远程调用。…

绘唐2AI工具在哪里下载

绘唐2AI工具在哪里下载 激活授权方式:https://qvfbz6lhqnd.feishu.cn/wiki/CcaewIWnSiAFgokOwLycwi0Encf 绘唐2AI工具是一款由中国国家语言资源监测与研究中心开发的人工智能绘画工具。该工具利用深度学习算法和人工智能技术,能够自动将输入的文字描述转…

【MySQL数据库】:MySQL内置函数

目录 日期函数 current_date 函数 current_time 函数 current_timestamp 函数 now 函数 date 函数 date_add 函数 date_sub 函数 datediff 函数 字符串函数 charset 函数 concat 函数 instr 函数 ucase 函数 lcase 函数 left 函数 length 函数 replace…

Github 2024-05-28 Python开源项目日报 Top10

根据Github Trendings的统计,今日(2024-05-28统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10TypeScript项目2HTML项目1稳定扩散Web UI 创建周期:512 天开发语言:Python协议类型:GNU Affero General Public License v3.0St…

探索自动发邮件的奥秘:从配置到实现

新书上架~👇全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一、引言:邮件自动化的魅力 二、配置环境:选择适合的SMTP服务器 示…

Spring Boot集成freemaker快速入门demo

1.什么是freemaker? FreeMarker 是一款模板引擎:即一种基于模板和要改变的数据,并用来生成输出文本(HTML网页,电子邮件,配置文件,源代码等)的通用工具。 它不是面向最终用户的,而是一个Java类库…

Adobe AntiCC 简化版 安装教程

Adobe AntiCC 简化版 安装教程 原文地址:https://blog.csdn.net/weixin_48311847/article/details/139277743

面试 Java 框架八股文十问十答第七期

面试 Java 框架八股文十问十答第七期 作者:程序员小白条,个人博客 相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新! ⭐点赞⭐收藏⭐不迷路!⭐ 1)Spring 一共有几种注入…

Kafka Consumer 位移提交深度解析

Kafka Consumer 位移提交深度解析 在使用 Kafka 进行消息处理时,理解和掌握位移(Offset)提交的概念和技术是至关重要的。位移提交不仅关系到消息的消费进度管理,还直接影响到消息的重复消费和丢失问题。本文将深入探讨 Kafka Cons…

数据真实性与经济收益的矛盾:第三方检测何去何从|中联环保圈

在当今的市场化竞争环境中,第三方检测公司在环保行业中处于较为底端的位置。其多数检测业务依赖于第三方技术服务单位的委托,然而在委托过程中,往往面临着报告真实性和收款的矛盾。一旦第三方检测公司负责人在数据真实性和经济收益矛盾中取舍…

1806 jsp防疫物资销售管理系统 Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 jsp 防疫物资销售管理系统 是一套完善的web设计系统,对理解JSP java编程开发语言有帮助采用了java设计,系统具有完整的源代码和数据库,系统采用web模式,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.…

Laravel时间处理类Carbon

时间和日期处理是非常常见的任务。Carbon 是一个功能强大的 PHP 扩展包,它为我们提供了许多方便的方法来处理日期和时间。在 Laravel 中,你无需单独安装 Carbon,因为 Laravel 默认已经包含了它。如果你正在使用 Laravel,那么你已经…

拥抱ASPICE标准——让软件开发更高效、更安全

随着科技的飞速发展,软件已经渗透到我们生活的方方面面,从智能手机到智能家居,从自动驾驶到云计算,软件已经成为了现代社会不可或缺的一部分。然而,随着软件复杂性的不断提升,如何确保软件的质量、可靠性和…

机器学习-2-机器学习领域六种基础算法的历史溯源

【机器学习】吴恩达:机器学习的六个核心算法! 原文链接 吴恩达在其创办的人工智能周讯《The Batch》上更新了一篇博文,总结了机器学习领域多个基础算法的历史溯源。 吴恩达回忆他的研究历程中曾有一次抉择: 多年前,在一次项目中,选择算法时,他不得不在神经网络与决策树…

Qt lambda 表达式

在 Qt 中,lambda 表达式经常用于定义槽函数,特别是在需要快速响应信号而无需编写单独的成员函数时。Lambda 表达式在 C11 中被引入,它允许你定义一个匿名函数(即没有名字的函数)并直接在代码中捕获和使用它。 在 Qt 中…

Android USB调试模式下自动上下滑动(Go实现)

简介 有的时候要对手机UI界面进行滑动测试, 手动或许太消耗时间, 理由Android USB调试模式对UI进行上下滑动测试。 adb指令 使用adb --help 可以查看所有的adb支持指令, 但这里我们只需要上下, 使用到的指令: adb devices #列举所有设备 ad…