使用gulp 压缩js
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的更多相关文章
- 《Gulp 入门指南》 : 使用 gulp 压缩 JS
<Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...
- 使用 gulp 压缩 JS
使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成 ...
- gulp 压缩js,css
最近做的前端项目中发现引用的js包太多,导致页面加载时反应很慢,所以首先想到的是将js和css压缩,提高加载速度. 我们先来看看抓到的当前页面响应时间: 页面异步加载,需要响应时间 7.41秒,这也太 ...
- gulp 压缩 js 和 css 代码
我们在写出来的代码都是非常规范的,改换行的时候就换行,改tab 的时候就有tab,还有这样做是为了后期维护方便,但是这也导致了内存占用量的增大,当把把代码发到线上,如果网速慢一点,可能很久都加载不出来 ...
- gulp压缩js文件报错日志
输出 gulp-uglify 压缩js文件时报错信息 gulp.task('es6', function () { return gulp.src('src/main/webapp/bower_com ...
- 使用gulp压缩js详细步骤笔记
先要安装nodejs,初始化项目配置文件package.json,根据情况输入配置参数 npm init test command: git repository: keywords: author: ...
- gulp压缩js
1.安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 2.查看nodejs的版本号 3.npm ...
- Gulp使用入门操作十一步压缩JS
前提需要安装nodejs 一. 全局安装Gulp npm install -g gulp 二.新建一个 gulpfile.js 文件 chapter2└── gulpfile.js 三.在 gulpf ...
- 使用 gulp 压缩 CSS
请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 ...
- 使用 gulp 压缩图片
请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ ...
随机推荐
- Google Analytics – GA4 & Tag Manager 概念篇
前言 当我们设计好网站或者 App 后, 我们要怎样知道这个产品用户是否满意呢? 如果发掘潜在的提升空间呢? 等用户反馈? 投诉? 显然不是上策, 更好的方式是观察. 身为一个产品经理, 我只要看着你 ...
- YAML 文件基本语法格式(十四)
一.YAML 文件基本语法格式 前面我们得 Kubernetes 集群已经搭建成功了,现在我们就可以在集群里面来跑我们的应用了.要在集群里面运行我们自己的应用,首先我们需要知道几个概念. 第一个当然就 ...
- Java poi 读取 word 、 pdf
从各个博客 CV 出来的,不好意思 pom <dependency> <groupId>org.apache.poi</groupId> <artifactI ...
- 树莓派2 CentOS7.9 安装配置笔记
1. 镜像下载与安装 http://isoredirect.centos.org/altarch/7/isos/armhfp/找到https://mirrors.tuna.tsinghua.edu.c ...
- 利用cv2.morphologyEx提取图像边界
cv2.morphologyEx(image, cv2.MORPH_GRADIENT, SE)可以参考这篇博客cv2.MORPH_GRADIENT:形态学梯度(morph-grad),可以突出团块(b ...
- C# Webapi 简单的依赖注入-构造函数
控制器部分: using Microsoft.AspNetCore.Mvc; using WebApplication1.IServices; using WebApplication1.Utilit ...
- HRM平台的登录页的背景图片- scss
.login-container { // 设置背景图片 background-image: url("~@/assets/common/login.jpg"); ba ...
- 04 统计语言模型(n元语言模型)
博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https:// ...
- ARM 版 OpenEuler 22.03 部署 KubeSphere v3.4.0 不完全指南
作者:运维有术 前言 知识点 定级:入门级 KubeKey 安装部署 ARM 版 KubeSphere 和 Kubernetes ARM 版 KubeSphere 和 Kubernetes 常见问题 ...
- SegmentFault 基于 Kubernetes 的容器化与持续交付实践
本文是根据 KubeSphere 云原生 Meetup 杭州站讲师祁宁分享内容整理而成. SegmentFault 是一家综合性技术社区,由于它的内容跟编程技术紧密相关,因此访问量的波动也和这一群体的 ...