gulp对原生jquery项目的css和js文件进行压缩

news2024/11/18 23:22:18
  1. 安装 Node.js 和 Gulp;

  2. 在项目根目录下创建 package.json 文件并添加项目所需的依赖;

  3. 创建一个名为 gulpfile.js 的文件,并在其中编写任务;
    在这里插入图片描述

  4. 在任务中引入所需的 Gulp 插件,例如 gulp-uglify;

  5. 编写任务来处理 JavaScript 文件,将每个文件的代码都压缩到一个新的文件中。
    node.js官网:https://nodejs.org/en;
    Gulp的安装:
    npm初始化,新建package.json
    npm init -y
    先安装全局
    npm install gulp -g
    再需要在当前项目中安装
    npm install gulp
    这里需要安装gulp-uglify和gulp-clean-css
    npm install --save-dev gulp-uglify
    npm install --save-dev gulp-clean-css

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const cleanCSS = require('gulp-clean-css');

gulp.task('css', function () {
  return gulp.src('./css/*.css')
    .pipe(cleanCSS())
    // .pipe(gulp.dest('./dist/css'));压缩到新目录
    .pipe(gulp.dest('./css'));//替换压缩之前的旧代码
});

gulp.task('js', function () {
  return gulp.src('./js/*.js')
    .pipe(uglify())
    // .pipe(gulp.dest('./dist/js'));压缩到新目录
    .pipe(gulp.dest('./js'));//替换压缩之前的旧代码
});

gulp.task('default', gulp.series(['js','css']));

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

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

相关文章

下一代智能座舱风口下,“超级”Tier 1强势崛起

智能座舱进入全新周期,强者愈强的趋势会快速显现。 可以观察到,智能座舱功能日趋多元化。从多屏互动到舱内全场景多元交互,到更多娱乐平台的上线,智能座舱已经从最初的重多功能转变成重体验。 从架构层面来看,各个功…

电脑端(PC)按键精灵——4.控制命令(判断、循环、跳转)

电脑端(PC)按键精灵——4.控制命令(判断、循环) 注:说了键盘、鼠标、其他命令还有安装内容,现在说下控制命令,也就是非常有用的判断和循环操作 按键精灵小白入门详细教程: 电脑端(PC)按键精灵—小白入门…

minicom -s 中“Save setup as ...“命名后保存的配置怎么读取,通过-s加配置名即可

文章目录 快速通道问题背景minicom配置文件吐槽总结 (但凡我看一眼man或者help都不会有这个问题,不能太依赖AI) 快速通道 # 直接通过配置文件启动连接 minicom [配置名字] # 读取配置文件并打开配置菜单 minicom -s [配置名字]问题背景 我刚开始使用minicom&#x…

手机如何访问电脑文件?(iOS和Android)

可以通过手机访问电脑文件吗? “我需要在我的电脑上查看一个文件,但我现在在外面无法实际访问它。我可以通过手机访问我的电脑文件吗?” 答案当然是可以的,无论您使用的是iOS设备还是Android设备,您都可以通过手机…

万里挑一,这4款软件真的太好用了,用一次就离不开

一、LastPass 互联网时代,我们登录很多平台都需要账号密码,但出于安全考虑,你可能会不同的平台有不同的账号及密码。那你是不是还在用手机便签或者纸张去记录,到时候还得一个个输入想想就挺麻烦的。 有这么一款软件,就…

如何vue使用ant design Vue中的select组件实现下拉分页加载数据,并解决存在的一个问题。

需求:拉下菜单中数据过多,200条以上,就会导致select组件卡死。所以需要使用滑动到底部使其分页加载 可以借助 onPopupScroll 事件来监听下拉菜单的滚动事件,并判断当前是否已经到达了下拉菜单底部。具体可以通过以下步骤实现&…

什么是DeFi

随着社会的不断进步,区块链技术的不断完善和发展,去中心化金融(DeFi)成为了区块链领域中很热门的话题之一。DeFi是一种运行在区块链上的金融系统,它的目的是通过去除中心化的机构和服务商,实现全球范围内的…

从语言模型到ChatGPT,大模型调教全攻略

文|python 前言 你是否想过,为什么ChatGPT能够如此火爆呢?我认为这主要是因为ChatGPT提供了好玩、有用的对话式交互功能,能够为用户提供帮助,而不仅仅是依靠“大”模型的魅力。毕竟,GPT-3在2020年就已经推出…

Python OpenCV 3.x 示例:1~5

原文:OpenCV 3.x with Python By Example 协议:CC BY-NC-SA 4.0 译者:飞龙 本文来自【ApacheCN 计算机视觉 译文集】,采用译后编辑(MTPE)流程来尽可能提升效率。 当别人说你没有底线的时候,你最…

文章改写神器-文章生成器免费版

文章伪原创工具 您是否在写文章时感到烦恼,因为您必须为每个不同的平台创建不同的版本?或者您是否感到沮丧,因为您的文章没有通过Google搜索引擎优化SEO? 如果您回答了“Yes”对于上述问题,那么“文章伪原创工具”就…

国家数据局来了,数据市场“黑暗丛林”时代将终结丨数字价值观察室·直播...

【《数字价值观察室》是钛媒体与ITValue联合推出的一档有关企业数字化的深度视频访谈栏目,脱胎于已连续举办十余届的全球数字价值峰会。栏目内容将聚焦产业人士最为关注的数字化问题,邀请行业专家、企业家等作为“观察员”现场论道,探寻数字经…

基于多源数据集成的城市地下管廊运维与智慧管控研究

1、引言 1833年,市政管线综合管廊在巴黎城市地下建成至今,经过百年来的探索、研究、改良和实践,法国、英国、德国、俄罗斯、日本、美国等发达国家的管廊规划建设与安全运维体系已经日臻完善,截止目前,国外已建成各类管…

Python3 OpenCV4 计算机视觉学习手册:6~11

原文:Learning OpenCV 4 Computer Vision with Python 3 协议:CC BY-NC-SA 4.0 译者:飞龙 本文来自【ApacheCN 计算机视觉 译文集】,采用译后编辑(MTPE)流程来尽可能提升效率。 当别人说你没有底线的时候&a…

Python自动化测试 环境搭建 Selenium、WebDriver下载、安装、配置、基本使用详解

基本于Python语言 和 Selenium框架,使用PyCharm 开发环境,详细介绍自动化测试环境的搭建 以及 基本的使用方法。 一、安装Python环境 Python环境目前已被大部分主流操作系统所支持,比如在Linux、Mac、Unix等系统上就自带了Python环境&#xf…

春秋云境:CVE-2022-28525 (文件上传漏洞)

目录 一、题目 1.登录 2.burp抓包改包 3.蚁剑获取flag 一、题目 ED01CMSv20180505存在任意文件上传漏洞 英语不够 翻译来凑: 点击其他页面会Not Found 找不到: 先登录看看吧: 试试万能密码:admin:123 发现错误…

王春玲:在 MogDB 中实现真正意义上的自治异步事务提交

导语 2023年4月7-8日,由中国DBA联盟(ACDU)和墨天轮社区联合主办的第十二届『数据技术嘉年华』(DTC 2023) 在北京新云南皇冠假日酒店成功举办。云和恩墨本原数据内核研发工程师王春玲在“智能前沿:数据库内核技术”专题论坛上发表了…

Adobe设计师证书

Adobe设计师证书又称为Adobe国际认证证书和Adobe认证证书,Adobe国际认证(英文:Adobe Certified Professional)是Adobe公司CEO签发的权威国际认证体系,旨在为用户提供Adobe软件的专业认证。 Adobe认证包括产品技能认证和职业技能认证多个级别,从初学者到专…

【PWN刷题wp】[BJDCTF 2020]babystack

新手上路~低速慢行~ 目录 前言 1. checksec 2. IDA 反汇编 3. payload编写 4. exp编写 5. pwntools用法 前言 作为pwn新手,尽可能在刷题中,记录、学习一些通用的知识点,因此wp是少不了的。 本题是一道简单的ret2text 1. checksec 没有…

程序员必会的英语单词汇总,学习速度可提高10倍,偷偷超越你身边的大聪明

前言 虽然说英语不好也能学编程,但学习速度却大大减慢,尤其是到后面你要查资料或者上Github等英文网站的时候,浏览器自带的翻译还会出错。 所以我专门花了几天的时间,结合自己这些年来的开发经验,把编程常用的英语单…

【C语言】基础语法3:控制流程结构

上一篇:运算符和表达式 下一篇:函数和递归 ❤️‍🔥前情提要❤️‍🔥   欢迎来到C语言基本语法教程   在本专栏结束后会将所有内容整理成思维导图(结束换链接)并免费提供给大家学习,希望大…