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. Google Analytics – GA4 & Tag Manager 概念篇

    前言 当我们设计好网站或者 App 后, 我们要怎样知道这个产品用户是否满意呢? 如果发掘潜在的提升空间呢? 等用户反馈? 投诉? 显然不是上策, 更好的方式是观察. 身为一个产品经理, 我只要看着你 ...

  2. YAML 文件基本语法格式(十四)

    一.YAML 文件基本语法格式 前面我们得 Kubernetes 集群已经搭建成功了,现在我们就可以在集群里面来跑我们的应用了.要在集群里面运行我们自己的应用,首先我们需要知道几个概念. 第一个当然就 ...

  3. Java poi 读取 word 、 pdf

    从各个博客 CV 出来的,不好意思 pom <dependency> <groupId>org.apache.poi</groupId> <artifactI ...

  4. 树莓派2 CentOS7.9 安装配置笔记

    1. 镜像下载与安装 http://isoredirect.centos.org/altarch/7/isos/armhfp/找到https://mirrors.tuna.tsinghua.edu.c ...

  5. 利用cv2.morphologyEx提取图像边界

    cv2.morphologyEx(image, cv2.MORPH_GRADIENT, SE)可以参考这篇博客cv2.MORPH_GRADIENT:形态学梯度(morph-grad),可以突出团块(b ...

  6. C# Webapi 简单的依赖注入-构造函数

    控制器部分: using Microsoft.AspNetCore.Mvc; using WebApplication1.IServices; using WebApplication1.Utilit ...

  7. HRM平台的登录页的背景图片- scss

    .login-container {   // 设置背景图片   background-image: url("~@/assets/common/login.jpg");   ba ...

  8. 04 统计语言模型(n元语言模型)

    博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https:// ...

  9. ARM 版 OpenEuler 22.03 部署 KubeSphere v3.4.0 不完全指南

    作者:运维有术 前言 知识点 定级:入门级 KubeKey 安装部署 ARM 版 KubeSphere 和 Kubernetes ARM 版 KubeSphere 和 Kubernetes 常见问题 ...

  10. SegmentFault 基于 Kubernetes 的容器化与持续交付实践

    本文是根据 KubeSphere 云原生 Meetup 杭州站讲师祁宁分享内容整理而成. SegmentFault 是一家综合性技术社区,由于它的内容跟编程技术紧密相关,因此访问量的波动也和这一群体的 ...