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. 使用Vue3.5的onWatcherCleanup封装自动cancel的fetch函数

    前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文章中有不少同学对Vue3.5新增的onWatcherCleanup有点疑惑,这个新增的API好像和watch API回调的第三个参数on ...

  2. 【JS设计模式笔记】给我一张名片-工厂方法模式(创建型)

    广告展现 例如,关于计算机培训广告资源需要投放,一批是Java的用绿色字体,一批是PHP的,用黄色字体,红色背景. // 创建Java学科类 var Java = function (content) ...

  3. 反DDD模式之“复用”

    本文书接上回<反DDD模式之关系型数据库>,关注公众号(老肖想当外语大佬)获取信息: 最新文章更新: DDD框架源码(.NET.Java双平台): 加群畅聊,建模分析.技术实现交流: 视频 ...

  4. Vue3——Vue Router

    安装 vue-router 依赖包 npm install vue-router@4 创建 router 文件夹,然后在里面创建一个 index.ts 文件,用于定义你的路由配置 // index.t ...

  5. 前端使用 Konva 实现可视化设计器(23)- 绘制曲线、属性面板

    本章分享一下如何使用 Konva 绘制基础图形:曲线,以及属性面板的基本实现思路,希望大家继续关注和支持哈(多求 5 个 Stars 谢谢)! 请大家动动小手,给我一个免费的 Star 吧~ 大家如果 ...

  6. 视频剪辑过于卡顿,让Pr更流畅的技巧 ( 待测试 )

    事件起因: 项目组某后期同事,使用Pr剪辑视频非常卡顿,但是机器配置是完全满足他的办公需求的 解决办法: 1. 降低回放分辨率 如果你的视频预览卡顿,首先应该考虑的,就是当前回放分辨率是否过高.通常在 ...

  7. yaml.load与yaml.dump的用法

    import yaml #向yaml文件中写 with open("E:\个人\ rename.yaml", 'w') as f: project = {'在远方':"1 ...

  8. 17. ES6怎么嵌入变量

    模板字符串 具体操作: 首先 , 使用反引号包裹字符串,然后使用 ${} 嵌入变量 :

  9. 博客配套视频已上传至 B 站,欢迎关注

    博客配套视频已上传至 B 站,欢迎关注+一键三连 链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 链接 ...

  10. 时隔半年 DotNetGuide 已突破了 6.6K + Star,持续更新,欢迎更多小伙伴PR投稿!

    前言 记得今年5月份的时候 DotNetGuide GitHub才突破5k Star,经过持续不断地输出时隔半年 DotNetGuide 已突破了 6.6K + Star!并且由我创建的DotNetG ...