使用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/ ...
随机推荐
- 使用Vue3.5的onWatcherCleanup封装自动cancel的fetch函数
前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文章中有不少同学对Vue3.5新增的onWatcherCleanup有点疑惑,这个新增的API好像和watch API回调的第三个参数on ...
- C# .net 6 Log4net 安装、配置 以及相关问题处理
安装log4net 首先下载相关Nuget包 安装的时候注意项目的.net版本,我这里使用的是.net 6 在根目录下面新建一个配置文件 log4net.config,并且添加下面相关配置项目 < ...
- 一文了解svg之stroke属性
属性 stroke-width SVG具有stroke-width定义笔触宽度的CSS属性. <svg width="500" height="120"& ...
- canvas图片旋转扩展出原生JS实现移动端横竖屏手写签名示例
前提知识 canvas是提供了各种各样的接口去控制画布,比如旋转rotate方法. 这里的旋转并不是真的把这个画布旋转了,例如ctx.rotate(90 * Math.PI / 180)顺时针旋转90 ...
- WPF 实现一个吃豆豆的Loading加载动画
运行的效果如下 先引入一下我们需要的库 在nuget上面搜一下"expression.Drawing",安装一下这个包 我们再创建一个Window,引入一下这个包的命名空间 我们设 ...
- face-api.js 学习笔记
参考 Build Real Time Face Detection With JavaScript (youtube get started) face-api.js - JavaScript API ...
- String 的 intern() 方法
问题: String s1 = "a" + "b"; //创建了几个对象? String s2 = new String("ab"); // ...
- mongo 副本集rs 理解和使用小结
转载请注明出处: 在MongoDB中,rs(通常指的是"replica set"的缩写)是复制集(Replica Set)的标识符或在使用时的一种常见前缀,尤其是在命令行工具和脚本 ...
- 浅谈舞蹈链(DLX)
名字: \(DL\),\(Dancing\space Link\),舞蹈链,是由\(Donald\space Knuth\)提出的数据结构,用来优化 \(X\) 算法,所以叫\(DLX\) \(X\) ...
- Docker基本概念(LXC?镜像、容器、仓库是什么?容器和虚拟机又是什么?)(一)
学习Docker前,我们有必要了解下Docker的前生LXC(Linux Container). 一.LXC介绍 LXC 可以提供轻量级的虚拟化,用来隔离进程和资源,和我们传统观念中的全虚拟化完全不一 ...