js 编写后文件太大,可以使用gulp 来进行压缩。

具体步骤如下:

1.创建一个工作目录

在该目录下安装 gulp

npm install gulp

安装gulp-uglify 模块

npm install gulp-uglify

2.在工作目录下编写脚本gulpfile.js

var gulp = require('gulp')

var uglify = require('gulp-uglify')

gulp.task('script', done => {
// 1\. 找到文件
gulp.src('js/*.js')
// 2\. 压缩文件
.pipe(uglify())
// 3\. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))

done()
})

这个代码的意思是,创建一个script 的任务

1.这个任务先找到 src 目录下的 后缀为 js 的文件

2.将文件进行压缩

3.将文件另存到dist/js 目录下。

3.编写需要压缩的代码 a.js

function demo (msg) {
alert('--------\r\n' + msg + '\r\n--------')
} demo('Hi')

4.执行任务

在工作目录下执行 gulp script 意思是,gulp 会去查找 gulpfile.js 文件,并执行 script 的任务。

5.在dist/js 下找到 a.js

function demo(n){alert("--------\r\n"+n+"\r\n--------")}demo("Hi");

发现js代码确实被压缩了。

 

使用gulp 压缩js的更多相关文章

  1. 《Gulp 入门指南》 : 使用 gulp 压缩 JS

    <Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...

  2. 使用 gulp 压缩 JS

    使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成 ...

  3. gulp 压缩js,css

    最近做的前端项目中发现引用的js包太多,导致页面加载时反应很慢,所以首先想到的是将js和css压缩,提高加载速度. 我们先来看看抓到的当前页面响应时间: 页面异步加载,需要响应时间 7.41秒,这也太 ...

  4. gulp 压缩 js 和 css 代码

    我们在写出来的代码都是非常规范的,改换行的时候就换行,改tab 的时候就有tab,还有这样做是为了后期维护方便,但是这也导致了内存占用量的增大,当把把代码发到线上,如果网速慢一点,可能很久都加载不出来 ...

  5. gulp压缩js文件报错日志

    输出 gulp-uglify 压缩js文件时报错信息 gulp.task('es6', function () { return gulp.src('src/main/webapp/bower_com ...

  6. 使用gulp压缩js详细步骤笔记

    先要安装nodejs,初始化项目配置文件package.json,根据情况输入配置参数 npm init test command: git repository: keywords: author: ...

  7. gulp压缩js

    1.安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 2.查看nodejs的版本号 3.npm ...

  8. Gulp使用入门操作十一步压缩JS

    前提需要安装nodejs 一. 全局安装Gulp npm install -g gulp 二.新建一个 gulpfile.js 文件 chapter2└── gulpfile.js 三.在 gulpf ...

  9. 使用 gulp 压缩 CSS

    请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 ...

  10. 使用 gulp 压缩图片

    请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ ...

随机推荐

  1. C++ 指针动态内存分配

    动态内存分配 动态内存分配:即由程序员手动的进行内存空间的分配.内存空间的释放的内存管理操作 C++代码中,变量.数组等对象的创建,是由C++自动分配内存的,称之为(自动)静态内存分配 (自动)静态内 ...

  2. 线段树 ----洛谷p3372

    问题描述: 已知一个数列,对数列进行两种操作:1,对数列某个区间中的所有数加d:2,查询数列某区间的区间和 输入: 第一行输入两个整数n和m,分别代表数列中元素个数和对数列的操作次数,第二行输入n个用 ...

  3. USB总线-Linux内核USB3.0主机控制器驱动初始化流程分析(十三)

    1.概述 RK3588有2个USB3.0 DRD控制器,2个USB2.0 Host控制器.USB3.0 DRD控制器既可以做Host,也可以做Device,向下兼容USB2.0和USB1.0.USB3 ...

  4. Linux内存管理2.6 -反向映射RMAP(最终版本)

    所谓反向映射是相对于从虚拟地址到物理地址的映射,反向映射是从物理页面到虚拟地址空间VMA的反向映射. RMAP能否实现的基础是通过struct anon_vma.struct anon_vma_cha ...

  5. 专场直播预约 | 邀您探讨KaiwuDB 离散制造业场景解决方案

    先导语 近日,KaiwuDB 携手山东重工集团有限公司(以下简称:山东重工)  重磅发布"离散制造业解决方案".该方案以 KaiwuDB 就地运算技术专利技术为底座,搭建了&quo ...

  6. 什么是SPA页面,它的优缺点?

    什么是SPA spa是单页面应用(single page web application),浏览器会一开始就加载所需要的html.css.javascript.一旦页面加载完毕,整个页面就不会因为用户 ...

  7. CSharp的Where底层实现

    using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using Syst ...

  8. Springboot --- 使用国内的 AI 大模型 对话

    实在是不知道标题写什么了 可以在评论区给个建议哈哈哈哈 先用这个作为标题吧 尝试使用 国内给出的 AI 大模型做出一个 可以和 AI 对话的 网站出来 使用 智普AI 只能 在控制台中输出 对应的信息 ...

  9. 4:Exchange安装后的任务

    4:Exchange安装后的任务 安装后的任务: 第一:证书的申请安装,分配服务略 注意项:如果是通配符证书,不能直接分配pop的服务              第二:虚拟目录的配置  Exchang ...

  10. KubeSphere 社区双周报 | 杭州站 Meetup 议题征集中 | 2023.04.14-04.27

    KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...