gulp项目配置,压缩css,压缩js,进行监听文件改动

1,创建项目

npm install -g gulp

这个应该很熟悉,就是全局安装gulp

2,创建一个工程,使用node创建,统一命令

npm init -y

3,创建后,目录出现一个package.json文件,没错,就是我们用vue-cli创建工程的时候,依赖配置文件,使用下面命令,往项目中添加gulp,目录如下图

npm install gulp

在这里插入图片描述

4, 添加一个专属配置文件,gulpfile.js
在这里插入图片描述
5,这里我安装的gulp版本是5.0版本
在这里插入图片描述
6,安装压缩js和css的模块,这里项目目录如下图在这里插入图片描述

npm i gulp-ugify gulp-clean-css

7,安装好后,以下就是配置文件

var gulp = require("gulp");
// 获取 uglify 模块(用于压缩 JS)
var uglify = require("gulp-uglify");
// 获取 cleancss 模块(用于压缩 CSS)
var cleanCSS = require("gulp-clean-css");
// 获取conect模块(用于启动服务)
var connect = require('gulp-connect')
var fileinclude = require("gulp-file-include");

gulp.task("app", (cb) => {
  // 获取html,并打包
  gulp
    .src(["src/app/**/*.html"])
    .pipe(
      fileinclude({
        prefix: "@@",
        basepath: "@file",
      })
    )
    .pipe(gulp.dest("dist/app"));
  cb();
});


// 压缩 js 文件
gulp.task("js", function () {
  // 1. 找到文件
  return (
    gulp
      .src("src/js/*.js")
      // 2. 压缩文件
      .pipe(uglify())
      // 3. 另存压缩后的文件
      .pipe(gulp.dest("dist/js"))
  );
});

// 压缩css
gulp.task("css", function () {
  // 1. 找到文件
  return (
    gulp
      .src("src/css/*.css")
      // 2. 压缩文件
      .pipe(cleanCSS())
      // 3. 另存压缩后的文件
      .pipe(gulp.dest("dist/css"))
  );
});

gulp.task('watch',function(){
  gulp.watch('src/js/*.js',gulp.series('js'));
  gulp.watch('src/css/*.css',gulp.series('css'));
  gulp.watch("src/app/**/*.html",gulp.series('app'));
});	
 
// 开启本地服务器
gulp.task('server',function(){
  connect.server({
    port:8090,
    // 启动实时刷新
    livereload:true
  })
});

gulp.task("default", gulp.parallel( 'server', 'watch'));

8,这里的配置路径**表示任何下级子文件都匹配,*匹配任意名称

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Leetcode每日一题】模拟 - 外观数列(难度⭐⭐)(51)

1. 题目解析 题目链接:38. 外观数列 这个问题的理解其实相当简单,只需看一下示例,基本就能明白其含义了。 2.算法原理 所谓“外观数列”,其实只是依次统计字符串中连续且相同的字符的个数。依照题意,依次模拟即 可。…

Java面向对象进阶基础知识

面向对象进阶 static 静态变量 被该类的所有的对象共享 不属于对象,属于类 随着类的加载而加载,优先于对象存在 类名调用(推荐) 对象名调用 static的注意事项 静态方法中没有this关键字 静态方法,只能访问静态 非静态方法可以访问所有 在Java中,static关…

元宇宙虚拟空间的碰撞体检测(四)

前言 该文章主要讲元宇宙虚拟空间的碰撞体检测,基本技术点,不多说,直接引入正题。 碰撞体检测 这里可以看到检测代码的逻辑是经过一系列判断,最后判断模型类型属性如果是trimesh,那么通过解析出来的顶点来生成我们的…

Linux:IO多路转接之select

文章目录 selecttimeval结构体fd_set 优缺点分析完整代码 本节要介绍的主题是多路转接式IO select 先说结论,这个select是做什么的呢? select是负责在Linux系统中,让一个人可以有多个鱼竿,可以不停的进行轮询,只要有…

【C语言基础】:文件操作详解(前篇:准备知识)

文章目录 一、什么是文件以及文件的分类1.1 程序文件1.2 数据文件1.3 文件名 二、文本文件和二进制文件2.1 数据在文件中的存储 三、文件的打开和关闭3.1 流和标准流3.1.1 流3.1.2 标准流 3.3 文件指针3.5 文件的打开和关闭 一、什么是文件以及文件的分类 文件是指存储在计算机…

【SCI绘图】【曲线图系列1 python】绘制扫描点平滑曲线图

SCI,CCF,EI及核心期刊绘图宝典,爆款持续更新,助力科研! 本期分享: 【SCI绘图】【曲线图1 python】绘制扫描点平滑曲线图 1.环境准备 python 3 import numpy as np import pandas as pd import proplot …

代码随想第31天 | 122.买卖股票的最佳时机II 、 55. 跳跃游戏 、 45.跳跃游戏II

一、前言 参考文献:代码随想录 今天主要还是贪心,但是是比较难想到的题目,不管那么多吧,直接做吧! 二、买卖股票的最佳时机|| 1、思路: 这个思路我确实想不出来,但是这个思路又异常的简单&…

MySQL复制拓扑1

文章目录 主要内容一.安装MySQL服务器1.MySQL 安装程序和其它文件保存在下发的 mysql8-files.iso 镜像文件中,可以使用虚拟光驱来提取到 Linux 文件系统。代码如下(示例): 2.将 MySQL8.0 程序解压到 /opt 目录,再创建到 MySQL 默认…

c# wpf LiveCharts 绑定 简单试验

1.概要 c# wpf LiveCharts 绑定 简单试验 2.代码 <Window x:Class"WpfApp3.Window2"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schem…

嵌入式驱动学习第六周——内核函数调用(堆栈打印)

前言 在内核中&#xff0c;函数调用堆栈非常重要&#xff0c;因为它可以帮助开发人员理解代码是如何执行的&#xff0c;从而进行调试、性能优化或问题排查。堆栈可以显示当前执行的函数以及导致该函数调用的先前函数&#xff0c;从而形成一个函数调用链。本篇博客就介绍堆栈打印…

编程新手必看,学习python中字符串数据类型内容(8)

1、 Python3 字符串 字符串是 Python 中最常用的数据类型。我们可以使用引号( ’ 或 " )来创建字符串。 创建字符串很简单&#xff0c;只要为变量分配一个值即可。例如&#xff1a; var1 Hello World! var2 "Runoob"Python 访问字符串中的值 Python 不支持单…

虚拟主机、VPS主机和云服务器的区别

对于每个建站新手来说&#xff0c;首先要解决的就是服务器购买的问题&#xff0c;目前市面有很多类型的服务器&#xff0c;常见的有&#xff1a;阿里云、腾讯云、Vultr云服务器&#xff0c;也有RackNerd、Cloudways等提供的VPS&#xff0c;还有SiteGround、ChemiCloud 、 Hosti…

如何保护大模型API安全

大模型的崛起正在改变着我们对机器学习和人工智能的理解&#xff0c;它们不仅提供了令人惊叹的预测和分析能力&#xff0c;还在各行各业的应用中发挥着重要作用。通过提供 API&#xff0c;用户无需了解底层实现细节&#xff0c;使大型模型能够更好地与用户和应用程序进行交互&a…

C++面向对象程序设计 - 对象指针和this指针

在C学习中&#xff0c;指针是一个用于指向另一个变量的地址的变量。理解指针有一定难度&#xff0c;但是理解它的工作原理后&#xff0c;会发现它们是非常强大和有用的工具。指针可以用来指向一般的变量&#xff0c;也可以指向对象。 一、指向对象的指针 在建立对象时&#xf…

C++——栈和队列容器

前言&#xff1a;这篇文章我们将栈和队列两个容器放在一起进行分享&#xff0c;因为这两个要分享的知识较少&#xff0c;而且两者在结构上有很多相似之处&#xff0c;比如栈只能在栈顶操作&#xff0c;队列只能在队头和队尾操作。 不同于前边所分享的三种容器&#xff0c;这篇…

文件的随机读写--fseek,ftell,拷贝文件

想要查看fseek&#xff0c;ftell&#xff0c;函数&#xff0c;请登录这个网站&#xff1a; cplusplus.com - The C Resources Networkhttps://legacy.cplusplus.com/ 还有一个函数没有写出来&#xff0c;是rewind&#xff0c;它是&#xff1a;让⽂件指针的位置回到⽂件的起始位…

[WIP]Sora相关工作汇总VQGAN、MAGVIT、VideoPoet

视觉任务相对语言任务种类较多(detection, grounding, etc.)、粒度不同 (object-level, patch-level, pixel-level, etc.)&#xff0c;且部分任务差异较大&#xff0c;利用Tokenizer核心则为如何把其他模态映射到language space&#xff0c;并能让语言模型更好理解不同的视觉任…

图片总丢?为何不自己搭建一个图床服务

图片总丢?为何不自己搭建一个图床服务 经常写博客或者Markdown文章的同学都知道,图片资源总莫名其妙丢了,我们或者每次把图片随着md文件移过来换过去,或者找一个提供图床服务的产品,又或者扔到自己的服务器,然后将资源目录发布出来。 但是,这些方法总归存在一些问题,…

【数据结构与算法】力扣 206. 反转链表

题目描述 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a; head [1,2,3,4,5] 输出&#xff1a; [5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a; head [1,2] 输出&#xff1a; [2,1]示例 3&#…