使用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/ ...
随机推荐
- TypeScript – Get Started
前言 我学 TypeScript 的时候是 Angular 2.0 beta 的年代... 现在 Angular 都快 14 了. 但由于已经有 1 年半没有写 Angular 和 TypeScrip ...
- EF Core – Custom Migrations (高级篇)
前言 会写这篇是因为最近开始大量使用 SQL Server Trigger 来维护冗余 (也不清楚这路对不对). EF Core migrations 没有支持 Trigger Github Issu ...
- Vue3.5中解构props,让父子组件通信更加丝滑
前言 在Vue3.5版本中响应式 Props 解构终于正式转正了,这个功能之前一直是试验性的.这篇文章来带你搞清楚,一个String类型的props经过解构后明明应该是一个常量了,为什么还没丢失响应式 ...
- 15. 序列化模块json和pickle、os模块
1. 序列化模块 1.1 序列化与反序列化 (1)序列化 将原本的python数据类型字典.列表.元组 转换成json格式字符串的过程就叫序列化 (2)反序列化 将json格式字符串转换成python ...
- USB-A, Micro, lightning and USB-C
- 如何让img图片居中
说明:img是行内块元素,用一个盒子(父元素)嵌套img(子元素) text-align:center;可以让父元素为块元素的行内块或行内元素水平居中: vaertical-align:middle; ...
- URL是什么
URL是什么 URL(Uniform Resource Locator,统一资源定位器) URL的组成: 协议://{域名|主机名|IP}:端口/路径/文件名?参数#锚点 协议 Scheme/Prot ...
- 函数(C语言)
目录 1. 函数的概念 2. 库函数 2.1 标准库和头文件 2.2 库函数的使用方法 3. 自定义函数 3.1 函数的语法形式 3.2 函数的举例 4. 形参和实参 4.1 实参 4.2 形参 4. ...
- 挑战Java面试题复习第1天,坚持就是胜利
面向对象和面向过程的区别面向过程: 步骤分析:将问题分解为一系列步骤.函数实现:用函数逐步实现这些步骤.调用执行:在需要时调用这些函数.高性能:适合对性能要求高的场合,如单片机和嵌入式开发.面向对象: ...
- AI绘画漫谈——从AI网页生成说起
1. 又说"前端已死" 为什么说"又"呢?因为前两年我在一些博客网站三天两头就能看到这个标题,虽然今年好像换话题了,但感觉前端每年都要死个七八次,当然这里面还是 ...