Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >利用grunt插件来压缩js和css文件用来减少http请求,提高页面效率

利用grunt插件来压缩js和css文件用来减少http请求,提高页面效率

作者头像
用户9127725
发布于 2022-08-08 00:47:38
发布于 2022-08-08 00:47:38
1.9K00
代码可运行
举报
运行总次数:0
代码可运行

1.安装nodejs

http://nodejs.org/

2.安装各自的node package

js我用的是UglifyJS github地址:https://github.com/mishoo/UglifyJS

css我用的是clean-css github地址:https://github.com/GoalSmashers/clean-css

图片用的是node-smushit    github地址:https://github.com/colorhook/node-smushit

3.编写代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var fs = require('fs');
var jsp = require("uglify-js").parser;
var pro = require("uglify-js").uglify;
function jsMinifier(flieIn, fileOut) {
var flieIn=Array.isArray(flieIn)? flieIn : [flieIn];
var origCode,ast,finalCode='';
for(var i=0; i
origCode = fs.readFileSync(flieIn[i], 'utf8');
ast = jsp.parse(origCode);
ast = pro.ast_mangle(ast);
ast= pro.ast_squeeze(ast);
finalCode +=';'+ pro.gen_code(ast);
}
fs.writeFileSync(fileOut, finalCode, 'utf8');
}
//jsMinifier('./file-src/test2.js', './file-smin/test-min.js');  //单个文件压缩
jsMinifier(['./file-src/test.js','./file-src/test2.js'], './file-smin/test-min.js'); //合并压缩

命令翻译

UglifyJS使用

uglifyjs [ 选项... ] [ 文件 ]

文件参数应该放在选项后面,uglifyjs 会读取文件中的javascript代码进行处理。如果你不指定输出的文件名,那么他会把处理后的内容输出到命令行中。

支持的选项 :

●   -b 或 –beautify - 输出格式化代码,当传入该参数,下面的附加选项用于更美观的控制格式化:

●   -i N 或 –indent N - 缩进级别(空格数量)

●   -q 或 –quote-keys - 是否用引号引起字符串对象的键(默认只会引起不能被正确标志的键名)

●   –ascii -默认 UglifyJS 不处理字符编码而直接输出 Unicode 字符,通过传入该参数将非ASCII编码的字符转化为cXXXX的序列(输出总按照UTF8编码,但传入该选项能得到ASCII编码的输出)。

●   -nm 或 –no-mangle - 不改变变量名称

●   -ns 或 –no-squeeze - 不调用 ast_squeeze() 函数(该函数会做多种优化使得结果更小,可读性略有降低)

●   -mt 或 –mangle-toplevel - 在顶级作用域打乱变量名称(默认不开启)

●   –no-seqs - 当调用 ast_squeeze() 将会合并多个语句块为一个语句块,如 ”a=10; b=20; foo()” 将被转换为 ”a=10,b=20,foo()”

●   –no-dead-code - 默认 UglifyJS 将会删除不被用到的代码,传入该参数禁用此功能。

●   -nc 或 –no-copyright - 默认 uglifyjs 会在输出后的代码中添加版权信息等注释代码,传入该参数禁用此功能。

●   -o 文件名 或 –output 文件名 - 指定输出文件名,如果不指定,则打印到标准输出(STDOUT)

●   –overwrite - 如果传入的JS代码来自文件而不是标准输入,传入该参数,输出会覆盖该文件。

●   –ast - 传入该参数会得到抽象的语法树而不是Javascript,对调试或了解内部代码很有用。

●   -v 或 –verbose - 在标准错误输出一些信息(目前的版本仅输出操作用时)

●   –extra - 开启附加优化,这些优化并未得到全面的测试。

●   –unsafe - 开启其他附加优化,这些优化已知在特定情况下并不安全,目前仅支持:

●   foo.toString() ==> foo+””

●   –max-line-len (默认32K字节) - 在32K字节出增加换行符,传入0禁用此功能。

●   –reserved-names - 一些类库会依赖一些变量,该参数指定的名称不会被混淆掉,多个用逗号隔开

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var cleanCSS = require('clean-css');
function cssMinifier(flieIn, fileOut) {
var flieIn=Array.isArray(flieIn)? flieIn : [flieIn];
var origCode,finalCode='';
for(var i=0; i
origCode = fs.readFileSync(flieIn[i], 'utf8');
finalCode += cleanCSS.process(origCode);
}
fs.writeFileSync(fileOut, finalCode, 'utf8');
}
//cssMinifier('./file-src/indexw_20120913.css', './file-smin/index.css');  //单个文件压缩
cssMinifier(['./file-src/index_20120913.css','./file-src/indexw_20120913.css'], './file-smin/index.css');
//图片
var imgMinifier = require('node-smushit');
//imgMinifier.smushit('./file-src/images', {recursive: true}); //递归
imgMinifier.smushit('./file-src/images');

使用示例:如果压缩js直接在命令行使用命令即可

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
uglifyjs jquery-2.1.3.min.js  bootstrap.min.js jquery.goup.min.js jquery.scrollLoading-min.js ./kindeditor/plugins/code/prettify.js -o min.js

最后多个js会被压缩成一个min.js

如果压缩css,则需要编写上面的脚本,命名为cssmin.js

然后利用node命令在命令行中运行

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
node cssmin.js

最后多个css会被压缩成一个index.css

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-02-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
grunt入门笔记
想一想如果没有这个工具,我们需要手动新建一个压缩代码后的文件夹,每次修改原始文件,都要手动压缩一下,再保存到压缩后的文件夹,想想都要疯掉。所以,grunt前端必不可少。
卢衍飞
2022/11/12
1.3K0
grunt入门笔记
webpack学习(六)打包压缩js和css
打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令webpack -p即表示调用UglifyJS来压缩代码,还有不少webpack插件如html-webpack-plugin也会默认使用UglifyJS。 uglify-js的发行版本只支持ES5,如果你要压缩ES6+代码请使用兼容开发分支。 UglifyJS可用的选项有: parse       解释 compr
柴小智
2018/04/10
4.9K0
前端自动化构建工具Grunt
Grunt 是一个基于任务的JavaScript工程命令行构建工具。 Grunt和Grunt插件,是通过npm安装并管理的,npm是Node.js的包管理器。 了解Grunt前,首先要准备两件事: 1、了解npm(Node Package Manager):npm是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。 2、安装node:进入nodejs官网(https://nodejs.org/),单击INSTALL下载node安装包,默认安装。安装完成后,进入对应目录,会发现nodejs文件夹下面有npm,直接用npm安装相环境既可。
奋飛
2019/08/15
8230
JS 压缩混淆
混淆 obfuscate/garble:替换变量名或方法名,让js不容易看懂。也做到了压缩的效果。
星宇大前端
2019/01/15
15.2K0
Grunt :初次使用及前端构建经验
这是我们部门前端同学cobish的学习笔记,笔者编辑了一下并分享给大家。 在使用 Grunt 之前,项目静态文件几乎没进行压缩合并便直接放到线上,部分文件手动复制粘贴到某压缩网站进行压缩。没压缩合并的
金蝶云平台
2017/06/06
2.5K0
【smart-transform】取自 Atom 的 babeljs/coffeescript/typescript 智能转 es5 库
本文介绍了一种用于快速转换 ES6 到 ES5 的轻量级工具 smart-transform。smart-transform 使用基于 babel 的编译器,可以快速将 ES6 代码转换成 ES5 兼容的代码。该工具在 Atom 编辑器中实现了快速转换的功能,同时也提供了一个命令行工具,方便用户使用。通过配置文件,用户可以自定义转换的规则和输出目录。smart-transform 还支持压缩和混淆,以减小文件大小,提高代码的可维护性。
ios122
2018/01/02
7230
为什么 webpack4 默认支持 ES6 语法的压缩?
在使用 webpack 的时候,很常见的一个构建优化手段就是缩小构建目标。比如在构建阶段只构建 src 里面的模块代码,对于 node_modules 里面所引入的三方包不进行构建操作。
腾讯IVWEB团队
2020/06/28
1.3K0
基于gulp的前端自动化方案
本文需要安装node(自行安装),并了解过gulp入门。gulp脚本下载:https://github.com/youhunwl/gulp 欢迎star。
游魂
2018/10/25
1.1K0
基于gulp的前端自动化方案
node.js第三方模块
别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中,所以又名包。
Qwe7
2022/04/21
9250
前端自动化工具 -- Grunt 使用简介
grunt是基于nodejs的,所以需要一个 nodejs 环境,未了解的可以 来这看看
书童小二
2018/09/03
2K0
前端自动化工具 -- Grunt 使用简介
Grunt常用插件及示例说明
示例:将1.html文件中的var requestAddress = "";替换为var requestAddress = "http://blog.csdn.net/ligang2585116";
奋飛
2019/08/15
1.2K0
(6/24) 插件配置:轻松配置JS文件压缩
实际开发中,在项目上线之前,我们编写的js代码是需要进行压缩的,我们可以采取压缩软件或者在线进行压缩,这不是我们的重点,在webpack中实现JS代码的压缩才是本节的核心。
wfaceboss
2019/04/08
2.3K0
(6/24) 插件配置:轻松配置JS文件压缩
模块加载及第三方包
一个功能就是一个模块,多个模块可以组成完整应用,抽离一个模块不会影响其他功能的运行。
梨涡浅笑
2020/10/28
2K0
模块加载及第三方包
使用gulp压缩博客静态资源
gulp能够帮助用户自动压缩静态资源,配合各类下属插件,能够压缩包括css、js、html乃至各类格式的图片文件。(图片文件的压缩往往只能节省几十KB,效果远远不如imagine、tinypng等压缩方式,所以此处不再写使用gulp压缩图片的内容)。
Akilar
2022/01/20
8300
从零开始学VUE之Webpack(JS打包压缩插件的使用)
可以看到JS已经被压缩了,但是存在一个问题,那就是版权声明没有了,还有注释都没有了,应为这就是压缩的一部分,这个和版权插件是冲突的
彼岸舞
2021/06/07
1.5K0
从零开始学VUE之Webpack(JS打包压缩插件的使用)
Gulp能做什么
var s = gulp.src(["fileA","fileB","fileC"])
Qwe7
2022/05/21
1.5K0
gulp替换webpack
之前项目中使用的webpack进行前端代码的编译,但一直不太喜欢webpack的那种玩法。使用webpack编写编译脚本时就是按webpack的规则进行各种配置,必须完全遵守它的条条框框,明明是自己写nodejs代码进行编译,但完全可控感。之前就听说过gulp+browserify的组合,这次就尝试使用这个东东重写编译脚本。话不多说,直接上最后的成果。 前端依赖package.json package.json { "name": "ssm-scaffold-frontend", "version"
jeremyxu
2018/05/10
2.6K0
gulp
简单介绍 gulp是基于node开发的所以可以使用npm这个nodejs的包管理工具安装gulp,使用npm首先得配置node环境
河湾欢儿
2018/09/06
1.1K0
Vue多页面开发案例解析
Vue 是很好用,但是以往的都是单页面应用,这就导致了一些传统的项目移植困难,一些用了 JQ 的插件的等等写法都要改变。也还用专门找到相对于的 Vue 的插件才行,这次的 Cli 3.0 可以在原来项目的基础上直接移植,非常方便。
芈渡
2021/01/08
1.6K0
Vue多页面开发案例解析
03_Node.js模块化开发
NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。
张哥编程
2024/12/13
1950
03_Node.js模块化开发
相关推荐
grunt入门笔记
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验