当前位置: 首页 > news >正文

【gulp】gulp 的基本使用

gulp 是一个基于node的自动化打包构建工具,前端开发者可以使用它来处理常见任务:

创建项目

进入项目

    npm init -ynpm i gulp -g  (使用命令 gulp)npm i gulp -D   #     开发依赖(前端工具都是开发依赖  本地安装 代码加载模块)npm i axios   #npm i axios --save         项目依赖-线上项目依赖(线上的代码需要用到 比如 axios)#dev 开发环境   源代码 - 使用一个工具 gulp把代码进行压缩#test 测试环境#生产环境 线上   css,js,html 压缩   不需要使用gulp

项目根目录中创建 gulpfile.js

const gulp = require('gulp');
gulp.task('tname',function(cb){//任务代码cb()
})
在终端中:gulp tnamegulp.task('tname',function(){//任务代码console.log('t1')console.log('t2')// 1-获取对应的文件gulp.src('src/js/*.js') //文件流// 2-管道里 做一个处理    压缩处理 安装插件// .pipe(调用一个插件)// 3-管道存放到另一个地方.pipe(gulp.dest('dist/js'))})

安装编译压缩 scss 插件


npm install sass gulp-sass --save-dev
var sass = require('gulp-sass')(require('sass'))
// 定义一个任务
gulp.task('scss', function (cb) {//任务代码console.log('任务代码scss');gulp.src('./src/scss/**/*.scss')//获取文件.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))//通过gulp插件处理文件.pipe(gulp.dest('./src/css'))//把处理之后的文件 放到 dist/js下.pipe(gulp.dest('./dist/css'))//把处理之后的文件 放到 dist/js下cb()
})gulp.task('w', function (cb) {// 监听路径下scss文件,一旦文件有变化,执行scss任务// console.log('开始监听scss文件的变化');gulp.watch('./src/scss/**/*.scss', gulp.parallel(['scss']));cb()
})

安装压缩 js 插件

 npm i gulp-uglify -D

在文件中定义任务

var gulp = require("gulp");
var uglify = require("gulp-uglify");
gulp.task("js", function () {console.log("js任务代码");gulp.src("./src/js/*.js").pipe(uglify()).pipe(gulp.dest("./dist/js"));
});

在终端中输入 gulp js 执行任务

编译js 高版本js转低版本

npm install --save-dev gulp-babel @babel/core @babel/preset-env


const babel = require('gulp-babel');
gulp.task('babel', () =>gulp.src('src/js/**/*.js').pipe(babel({presets: ['@babel/env']})).pipe(gulp.dest('dist/js'))
);
// 压缩js   npm install --save-dev gulp-uglifyvar uglify = require('gulp-uglify');
gulp.task('compress',function(){// 获取js文件gulp.src('./src/js/**/*.js')// 转译插件 高版本js 转出 es5.pipe(babel({presets: ['@babel/env']}))// es5代码 压缩.pipe(uglify())// 输出到 dist.pipe(gulp.dest('./dist/js'))
})

npm install gulp-concat -D

// 合并js
var concat = require('gulp-concat');
gulp.task('concat', function (cb) {// 获取要合并的js文件gulp.src((['./src/js/login/login-a.js', './src/js/login/login-b.js']))// 合并.pipe(concat('login.js'))// 输出.pipe(gulp.dest('./src/js'))cb()
})

npm install gulp-htmlmin -D

//gulp-htmlmin  压缩html
var htmlmin = require('gulp-htmlmin');
gulp.task('htmlmin', function() {gulp.src('src/**/*.html')
//    压缩html代码 去掉了 空格和换行.pipe(htmlmin({collapseWhitespace: true})).pipe(gulp.dest('dist'));
})

npm install gulp-connect -D

var connect = require("gulp-connect");// 刷新任务
gulp.task("reload", function () {gulp.src("./src/**/*.html").pipe(connect.reload());
});gulp.task('w', function (cb) {// 启动一台http服务器connect.server({livereload: true,});// 监听路径下scss文件,一旦文件有变化,执行scss任务// console.log('开始监听scss文件的变化');gulp.watch('./src/scss/**/*.scss', gulp.parallel(['scss']));gulp.watch('src/*.html', gulp.parallel(['minify']));gulp.watch('src/js/*.js', gulp.parallel(['js']));gulp.watch('src/js/login/*.js', gulp.parallel(['concat']));// 监听所有文件的变化gulp.watch('src/**/*.*', gulp.parallel(['reload']))cb()
})

npm i gulp-imagemin -D

npm i gulp-imagemin@7 -D

const imagemin = require('gulp-imagemin');
gulp.task('imagemin', function () {gulp.src('src/images/*').pipe(imagemin()).pipe(gulp.dest('dist/images'))
})

打包任务

gulp.task('build', gulp.series(['js', 'sass', 'minify']), function () {console.log('项目的构件压缩完毕!');})

网址:gulp.js - 基于流(stream)的自动化构建工具 | gulp.js中文网 

相关文章:

【gulp】gulp 的基本使用

gulp 是一个基于node的自动化打包构建工具,前端开发者可以使用它来处理常见任务: 创建项目 进入项目 npm init -ynpm i gulp -g (使用命令 gulp)npm i gulp -D # 开发依赖(前端工具都是开发依赖 本地安装 代…...

Linux 下处理 ^M 字符的最佳实践

Linux 下处理 ^M 字符的最佳实践 一、快速解决方案 按照优先级排序的三种解决方案: 1. 使用 dos2unix(推荐) # 安装 sudo apt-get install dos2unix # Ubuntu/Debian sudo yum install dos2unix # CentOS# 使用 dos2unix 文件名2. 使用 sed sed...

【优选算法】—复写零(双指针算法)

云边有个稻草人-CSDN博客 每天至少一道算法题,接着干,以额现在的实力想完成那个目标确实难。算法题确实烧脑,挺煎熬的,但脑子烧多了是不是就该好些了?。。。 记得那句话,必须有为成功付出代价的决心&#x…...

2024国赛A问题三和四

问题三 最小螺距单目标优化模型的建立 问题二考虑了在螺距固定的条件下计算舞龙队盘入的终止时间,问题三在第二问的基础提出了改变螺距的要求,即求解在螺距最小为多少时,龙头前把手能够沿着相应的螺线盘入到调头空间的边界。故可将其转换为…...

asp.net 高校学生勤工俭学系统设计与实现

博主介绍:专注于Java(springboot ssm 等开发框架) vue .net php python(flask Django) 小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设,从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找…...

《计算机组成及汇编语言原理》阅读笔记:p116-p120

《计算机组成及汇编语言原理》学习第 7 天,p116-p120 总结,总计 5 页。 一、技术总结 1.CPU优化 (1)increase overall performance number 例如:16位电脑提升到32位电脑。 (2)multiprocessing One way to make computers more useful i…...

C# OpenCvSharp DNN 卡证检测矫正

目录 说明 效果 模型 项目 代码 下载 参考 说明 源码地址:https://modelscope.cn/models/iic/cv_resnet_carddetection_scrfd34gkps 在实人认证、文档电子化等场景中需要自动化提取卡证的信息,以便进一步做录入处理。这类场景通常存在两类问题&…...

Spring Boot 中 Map 的最佳实践

在Spring Boot中使用Map时,请遵循以下最佳实践: 1.避免在Controller中 直接使用Map。应该使用RequestBody 接收-个DTO对象或者 RequestParam接收参数,然后在Service中处 理Map。 2.避免在Service中 直接使用原始的Map。应该使用Autowired 注入-个专门…...

J-LangChain - 智能链构建

介绍 j-langchain是一个Java版的LangChain开发框架&#xff0c;旨在简化和加速各类大模型应用在Java平台的落地开发。它提供了一组实用的工具和类&#xff0c;使得开发人员能够更轻松地构建类似于LangChain的Java应用程序。 依赖 Maven <dependency><groupId>i…...

开源低代码平台-Microi吾码 打印引擎使用

引言 在开发中&#xff0c;会遇到很多记录的表单数据需要下载打印下来使用到线下各种应用场景中。在传统的方法中可能是需要先导出数据&#xff0c;然后将数据填入word表格中在打印下来。 但Microi吾码提供了一项新功能&#xff0c;便是打印引擎。打印引擎即可在线设计…...

【MySQL】索引 面试题

文章目录 适合创建索引的情况创建索引的注意事项MySQL中不适合创建索引的情况索引失效的常见情况 索引定义与作用 索引是帮助MySQL高效获取数据的有序数据结构&#xff0c;通过维护特定查找算法的数据结构&#xff08;如B树&#xff09;&#xff0c;以某种方式引用数据&#xf…...

【高阶数据结构】AVL树

AVL树 1.AVL的概念2.AVL树的实现1.AVL树的结构2.AVL树的插入1.更新平衡因子2.旋转1.右单旋2.左单旋3.左右双旋4.右左双旋 3.AVL树的查找4.AVL树的平衡检测5.AVL树的性能分析6.AVL树的删除 3.总代码1.AVLTree.h2.Test.cpp 1.AVL的概念 AVL树是最先发明的自平衡⼆叉查找树&#…...

【Spring】基于XML的Spring容器配置——<bean>标签与属性解析

Spring框架是一个非常流行的应用程序框架&#xff0c;它通过控制反转&#xff08;IoC&#xff09;和依赖注入&#xff08;DI&#xff09;来简化企业级应用的开发。Spring容器是其核心部分&#xff0c;负责管理对象的创建、配置和生命周期。在Spring中&#xff0c;XML配置是一种…...

docker mysql5.7安装

一.更改 /etc/docker/daemon.json sudo mkdir -p /etc/dockersudo tee /etc/docker/daemon.json <<-EOF {"registry-mirrors": ["https://do.nark.eu.org","https://dc.j8.work","https://docker.m.daocloud.io","https:/…...

HDR视频技术之十一:HEVCH.265 的 HDR 编码方案

前文我们对 HEVC 的 HDR 编码优化技术做了介绍&#xff0c;侧重编码性能的提升。 本章主要阐述 HEVC 中 HDR/WCG 相关的整体编码方案&#xff0c; 包括不同应用场景下的 HEVC 扩展编码技术。 1 背景 HDR 信号一般意味着使用更多比特&#xff0c;一般的 HDR 信号倾向于使用 10…...

最新的强大的文生视频模型Pyramid Flow 论文阅读及复现

《PYRAMIDAL FLOW MATCHING FOR EFFICIENT VIDEO GENERATIVE MODELING》 论文地址&#xff1a;2410.05954https://arxiv.org/pdf/2410.05954 项目地址&#xff1a; jy0205/Pyramid-Flow&#xff1a; 用于高效视频生成建模的金字塔流匹配代码https://github.com/jy0205/Pyram…...

Effective C++ 条款 11:在 `operator=` 中处理“自我赋值”

文章目录 条款 11&#xff1a;在 operator 中处理“自我赋值”核心问题示例&#xff1a;使用地址比较示例&#xff1a;copy-and-swap 技术设计建议总结 条款 11&#xff1a;在 operator 中处理“自我赋值” 核心问题 自我赋值风险 如果赋值操作符没有处理自我赋值&#xff08;…...

19、鸿蒙学习——配置HDC命令 环境变量

一、下载Command Line Tools 可参考上篇《鸿蒙学习——配置OHPM、hvigor环境变量》 二、配置hdc环境变量 hdc命令行工具用于HarmonyOS应用/元服务调试所需的工具&#xff0c;该工具存放在命令行工具自带的sdk下的toolchains目录中。为方便使用hdc命令行工具&#xff0c;请将…...

初始 ShellJS:一个 Node.js 命令行工具集合

一. 前言 Node.js 丰富的生态能赋予我们更强的能力&#xff0c;对于前端工程师来说&#xff0c;使用 Node.js 来编写复杂的 npm script 具有明显的 2 个优势&#xff1a;首先&#xff0c;编写简单的工具脚本对前端工程师来说额外的学习成本很低甚至可以忽略不计&#xff0c;其…...

网络工程师常用软件之PING测试工具

老王说网络&#xff1a;网络资源共享汇总 https://docs.qq.com/sheet/DWXZiSGxiaVhxYU1F ☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝☝ 今天介绍一款好用的PING测试工具&#xff0c;ATKKPING。 ATKKPING的主要功能包括测试…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

Sklearn 机器学习 缺失值处理 获取填充失值的统计值

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中,数据清…...

Mysql故障排插与环境优化

前置知识点 最上层是一些客户端和连接服务&#xff0c;包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念&#xff0c;为通过安全认证接入的客户端提供线程。同样在该层上可…...

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...

【阅读笔记】MemOS: 大语言模型内存增强生成操作系统

核心速览 研究背景 ​​研究问题​​&#xff1a;这篇文章要解决的问题是当前大型语言模型&#xff08;LLMs&#xff09;在处理内存方面的局限性。LLMs虽然在语言感知和生成方面表现出色&#xff0c;但缺乏统一的、结构化的内存架构。现有的方法如检索增强生成&#xff08;RA…...