精华内容
下载资源
问答
  • gulp压缩html

    千次阅读 2018-10-24 11:54:27
    通过一条命令用Npm安装... 安装完毕后,打开gulpfile.js文件,我们里面编写一个task用来专门压缩html,并对html进行一系列的处理:   1 2 3 4 5 6 7 8 9 10 11 ...

    通过一条命令用Npm安装gulp-htmlmin:

    npm install gulp-htmlmin --save-dev

      安装完毕后,打开gulpfile.js文件,我们里面编写一个task用来专门压缩html,并对html进行一系列的处理:

     

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    var gulp = require('gulp');

    var htmlmin = require('gulp-htmlmin');

    gulp.task('html',function(){

    var options = {

    collapseWhitespace:true,

    collapseBooleanAttributes:true,

    removeComments:true,

    removeEmptyAttributes:true,

    removeScriptTypeAttributes:true,

    removeStyleLinkTypeAttributes:true,

    minifyJS:true,

    minifyCSS:true

    };

    gulp.src('app/**/*.html')

    .pipe(htmlmin(options))

    .pipe(gulp.dest('dest/'));

    });

      我们看到task里面有个设置选项,分别介绍一下他们的属性的作用:

    1.collapseWhitespace:从字面意思应该可以看出来,清除空格,压缩html,这一条比较重要,作用比较大,引起的改变压缩量也特别大;

    2.collapseBooleanAttributes:省略布尔属性的值,比如:<input checked="checked"/>,那么设置这个属性后,就会变成 <input checked/>;

    3.removeComments:清除html中注释的部分,我们应该减少html页面中的注释。

    4.removeEmptyAttributes:清除所有的空属性,

    5.removeSciptTypeAttributes:清除所有script标签中的type="text/javascript"属性。

    6.removeStyleLinkTypeAttributes:清楚所有Link标签上的type属性。

    7.minifyJS:压缩html中的javascript代码。

    8.minifyCSS:压缩html中的css代码。

      总之,压缩Html的原则就是清除没用的代码,删除本就默认值的属性,将html压缩的最小,这样才能提高项目运行的性能。

    展开全文
  • 如何用php压缩html代码并输出

    千次阅读 2018-09-15 09:16:57
    所以,我们往往会问用php如何压缩html代码?怎么让代码变成一行,压缩输出。常常看到别人网页上的html代码都是压缩之后输出的,那么我们如何操作呢? 因为本人使用的是php语言,所以这里告诉php的压缩函数,下方...

    原文地址:http://www.shuchengxian.com/article/22.html

    站长朋友们都知道,网页越小,打开的速度就是越快,对于SEO有帮助。所以,我们往往会问用php如何压缩html代码?怎么让代码变成一行,压缩输出。常常看到别人网页上的html代码都是压缩之后输出的,那么我们如何操作呢?

    因为本人使用的是php语言,所以这里告诉php的压缩函数,下方说明方法:

     

    第一步,你需要对php的设置如下:

    php.ini:
    
    output_buffering = Off
    
    output_handler = ob_gzhandler
    
    zlib.output_compression = Off
    
    zlib.output_compression_level = -1

     

    第二步,你需要在apache下增加如下设置:

     

    AddOutputFilter DEFLATE html php js css

     

    这样就可以对html php js css进行gzip压缩了。

     

    第三步,你需要使用如下php压缩html并输出到客户端的函数:

     

    function compress_html($string) {
    
      return ltrim(rtrim(preg_replace(array("/> *([^ ]*) *</","//","'/\*[^*]*\*/'","/\r\n/","/\n/","/\t/",'/>[ ]+</'),
             array(">\\1<",'','','','','','><'),$string)));
    
    }

     

    上面的这个正则表达式,很强大的哦,经过我本人亲自测试可使用。

    通过以上方法,你就可以将你的html代码压缩然后输出给客户端了。不信你可以查看源代码,就是一行,网页瞬间压缩很小。

     

    拓展:

    这里有两种压缩html代码的方式。

    第一种:只压缩html代码,不压缩js,jq中的空行,换行等。

    $str = preg_replace("~>\s+<~", "><",preg_replace("~>\s+\r\n~", ">", $str));

    压缩之后的结果显示,除了js,jq的代码除外,其他的代码都是一行。

    第二种:只要是页内的代码全部的压缩,包括js、jq。

    $str = ltrim(rtrim(preg_replace(array("/> *([^ ]*) *</","//","'/\*[^*]*\*/'","/\r\n/","/\n/","/\t/",'/>[ ]+</'),array(">\\1<",'','','','','','><'),$str)));

    压缩之后的结果就是一行,不管js、jq。

    这里要是页面中的js、jq都已经抽出去之后,可以使用第二种方式,这样压缩的更加的彻底。要是页面中的js、jq没有抽取干净的话,我建议还是采用第一种方式只压缩网页中除了js、jq以外的html元素。

    展开全文
  • 正则表达式 压缩 HTML 字符串

    千次阅读 2020-02-10 14:33:25
    参考资料:https://www.cnblogs.com/mmzuo-798/p/7264093.html var text = `<ul class="footer mainNav js-main-nav"> <li class="mainNav__list act"> <a class="mainNav_...

    \n 匹配换行符
    \r 匹配回车符
    \t 匹配制表符

    参考资料:https://www.cnblogs.com/mmzuo-798/p/7264093.html

    var text = `<ul class="footer mainNav js-main-nav">
    	<li class="mainNav__list act">
    		<a class="mainNav__list__icon" href="#" style="background-image: url(./images/public/mainNav-1.png);"></a>
    	</li>
    	<li class="mainNav__list">
    		<a class="mainNav__list__icon" href="#" style="background-image: url(./images/public/mainNav-2.png);"></a>
    	</li>
    	<li class="mainNav__list">
    		<a class="mainNav__list__icon" href="#" style="background-image: url(./images/public/mainNav-3.png);"></a>
    	</li>
    </ul>`
    console.log(text)
    console.log(text.replace(/\t/g, "").replace(/\r/g, "").replace(/\n/g, ""))
    
    展开全文
  • 需求分析:压缩html,减少文件体积,减轻服务器压力 一、安装gulp-htmlmin模块 npm i -D gulp-htmlmin 二、gulp-htmlmin参数说明 /** * @param path {String} 生成文件的路径及文件名,如:rev/manifest.josn * @...

    需求分析:压缩html,减少文件体积,减轻服务器压力

    一、安装gulp-htmlmin模块

    npm i -D gulp-htmlmin
    

    二、gulp-htmlmin参数说明

    /**
    * @param path {String} 生成文件的路径及文件名,如:rev/manifest.josn
    * @param option {Object}
    * 	{
    * 		removeComments: true,	//清除HTML注释
    * 		collapseWhitespace: true,	//压缩HTML
    * 		collapseBooleanAttributes: true,	//省略布尔属性的值 <input checked="true"/> ==> <input />
    * 		removeEmptyAttributes: true,	//删除所有空格作属性值 <input id="" /> ==> <input />
    * 		removeScriptTypeAttributes: true,	//删除<script>的type="text/javascript"
    * 		removeStyleLinkTypeAttributes: true,	//删除<style><link>的type="text/css"
    * 		minifyJS: true,	//压缩页面JS
    * 		minifyCSS: true	//压缩页面CSS
    * 	}
    */
    
    htmlmin([options])
    

    三、gulp-htmlmin配置使用

    添加完版本号之后,再进行压缩

    var htmlmin = require('gulp-htmlmin');      // html压缩
    
    // 添加版本号(路径替换)
    gulp.task('set_version', function() {
        return gulp.src(['./rev-manifest.json', './dist/*.html'])
            .pipe(revCollector())   // 根据.json文件 执行文件内js/css名的替换
            .pipe(gulpif(env==='build', htmlmin({ 
                removeComments: true,       // 清除HTML注释
                collapseWhitespace: true,   // 压缩HTML
                minifyJS: true,             // 压缩页面JS
                minifyCSS: true             // 压缩页面CSS
            })))
            .pipe(gulp.dest('./dist'));
    });
    

    四、执行npm run build,效果如下

    在这里插入图片描述

    .

    项目地址(别忘了给星哦)

    https://github.com/shiguang0116/gulp-project

    相关文章

    gulp构建项目(一):环境准备及项目基础结构搭建
    gulp构建项目(二):browser-sync启本地服务并开启浏览器
    gulp构建项目(三):gulp-watch监听文件改变、新增、删除
    gulp构建项目(四):run-sequence实现逐个执行任务
    gulp构建项目(五):gulp-if条件判断及环境变量设置
    gulp构建项目(六):gulp-html-tpl处理公用模板
    gulp构建项目(七):gulp-uglify压缩js以及检查js语法错误
    gulp构建项目(八):gulp编译less,添加CSS前缀以及压缩css
    gulp构建项目(九):gulp-imagemin压缩图片及gulp-cache缓存
    gulp构建项目(十):gulp-rev-collector-dxb添加版本号(?hash)
    gulp构建项目(十一):gulp-htmlmin压缩html
    gulp构建项目(十二):gulp-babel编译es6
    gulp构建项目(十三):babel-polyfill编译es6新增api
    gulp构建项目(十四):gulp-rename重定义打包生成文件的路径
    .
    gulp构建项目(附录一):gulp发生错误时,进程挂掉的问题

    展开全文
  • nodejs压缩html、js、css

    千次阅读 2018-05-17 11:09:51
    var fs = require('fs');var minify = require('html-minifier').minify;fs.readFile('./index2.html', 'utf8', function (err, data) { if (err) { throw err; } fs.writeFile('./test_result.html...
  • 在线压缩html/css/js文件成一行

    万次阅读 2018-01-03 19:26:34
    在线压缩html/css/js文件成一行: 压缩网站为:http://tool.oschina.net/jscompress/ 将源码压缩成一行,去掉文中的一些注释和空格以及空行,好处是: 1、减小文件体积,节省带宽,提高相应速度 2、压缩html...
  • gulp教程之gulp-htmlmin压缩html

    万次阅读 2016-11-17 21:26:19
    使用gulp-htmlmin压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作。 本地安装gulp-htmlmin 安装:命令提示符执行 cnpm install gulp-htmlmin –save-dev 注意:没有安装cnpm请...
  • 在网站打开速度优化-前端篇的时候貌似少见了一点,就是减小网友源代码的大小,今天就我的博客来做一下,下面的代码只能用到wordpress里,其他的博客系统要修改...//压缩html代码 function wp_compress_html() {  fu
  • java 实现html压缩

    千次阅读 2018-06-04 09:34:26
     /** 将html字符串进行压缩 */ private List<String> htmlCompress(String text) throws Exception { HtmlCompressor compressor = new HtmlCompressor(); compressor.setEnabled( true ); compressor....
  • html压缩代码

    千次阅读 2016-03-21 11:15:14
    压缩HTML的起因 如何提高网页加载速度 ,需要怎么对html页面优化相信是每个拟提高建站技术站长曾想到的问题,其实网页优化的方法还是很多。 有童鞋询问higrid如何 压缩HTML,也就是说能不能 把所有的html、js、Css...
  • PHP 对HTML页面进行压缩

    千次阅读 2018-02-05 22:46:31
    页面压缩也有很多的方法,有PHP自带的zlib的gzip压缩,还有清除html页面中不必要的字符,空格,注释,换行符等。 第一种打开PHP.ini中的配置既可以,可以参考: http://mp.blog.csdn.net/postedit/79265316php压缩...
  • VSCode 使用 minify 手动压缩JS, CSS, HTML

    千次阅读 2020-12-22 20:16:57
    在项目中, build出来的js实在是太大了, 而我不能使用公司以外的网站或者是插件来压缩,此时就可以用平时的开发工具 VSCode 压缩。 1. 下载Minify插件 搜索minify, 可以得到以下结果,点击Install即可下载, 我...
  • webpack4打包html压缩js

    万次阅读 2018-07-23 11:23:26
    压缩js使用插件uglifyjs-webpack-plugin 配置文件: const path = require("path"); const uglifyjs = require('uglifyjs-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpa...
  • HTML5实现图片压缩上传(详解)

    千次阅读 2019-07-31 23:18:05
    HTML5实现图片压缩上传,主要用到FileReader, canvas, Blob,FormData这几个api 1,fileReader用来读取文件 2,利用canvas.toDataURL('"image/jpeg",quality)中的quality参数进行图片压缩 3,将图片base64格式...
  • APS.NET MVC 对输出HTML源码进行压缩

    千次阅读 2017-10-26 15:49:59
    思路:增加一个Controller基类,用于压缩输出的HTML源代码,对输出html内容里的空格回车换行符等进行移除,需要压缩的Controller继承自这个基类即可。 如果js结尾不写分号的话,压缩后,页面脚本会受影响,按标准写...
  • 网页压缩,去除多余的空行,换行符,制表符,注释等 根据网上的代码改的,我把正则部分第一... * 压缩html : 清除换行符,清除制表符,去掉注释标记 * @param $string * @return 压缩后的$string * */ function compre
  • 模块介绍 说明文档 ...这里只贴了代码,具体步骤参考《js,css压缩工具yuicompressor--nodejs常用模块(1)》。 npm i html-minifier var fs = require('fs'); var minify = require('html-minifie
  • vuecli打包后html文件没有压缩的问题

    千次阅读 2018-08-29 15:12:19
    1、打包之后,发现index.html文件的内容没有压缩,这时候,只需要在build文件夹下的webpack.prod.comf.js里面的第70行左右加三句代码即可 minimize:true, minifyCSS:true, minifyJS:true, ...
  • html5前端图片压缩上传

    热门讨论 2016-03-03 12:40:31
    利用html5 canvas处理图片,得到图片字节流,上传。前端canvas压缩,代码简洁亲测可用,参考博客 :https://blog.csdn.net/jialiuyang/article/details/50787636;
  • vscode 压缩代码方式

    千次阅读 2019-03-07 09:54:53
    选中想要合并的行,按Ctrl + Shift + P调出命令窗口,输入join lines,确认执行就可以合并多行了。
  • html5图片压缩上传(多图预览、压缩、上传) 解决iphone 拍照 旋转问题 图片等比例压缩
  • 压缩上传,手机图片太大咋办,先压缩再上传,自由选择压缩质量。大大减少上传时间。
  • HTML5实现图片压缩上传功能

    万次阅读 2016-03-29 10:54:29
    上篇文章中提到移动端上传图片,我们知道现在流量还是挺贵的,手机的像素是越来越高,拍个照动不动就是好几M,伤不起。虽然客户端可以轻轻松松实现图片压缩再...在HTML5的影响下,前端能干的事情越来越多了,开发的功
  • HTML 代码混淆与压缩

    千次阅读 2018-04-15 23:59:00
    混淆与压缩HTML5 &amp; JS 应用中充满着对输入进行验证/注入的问题,需要开发人员始终保持警惕。同时为了防止盗版或者至少使盗版更加困难,常会使用混淆工具对 JS 代码进行混淆。在线工具...
  • IDEA如何压缩js,好处和原理

    千次阅读 2019-06-04 16:15:35
    2.js文件压缩原因,压缩原理,功能的优点 答:js 压缩器是一个在线压缩和混淆js代码的开发辅助工具,能够减小 js文件大小、避免网站上的 js源代码被他人窥视和窃取。 压缩:删除 Javascript 代码中所有注释、跳...
  • HTML压缩(JSP的GZIP实现)

    千次阅读 2016-03-29 16:05:32
    HTTP 压缩可以大大提高浏览网站的速度,它的原理是,在客户端请求网页后,从服务器端将网页文件压缩,再下载到客户端,由客户端的浏览器负责解压缩并浏览。相对 于普通的浏览过程HTML ,CSS,Javascript , Text ,它...
  • html5上传前压缩图片尺寸、质量

    千次阅读 2016-12-28 14:30:38
    现代手机图片像素较大,一张图片都有好几M,在服务器带宽较小的情况下(本人苦逼小站只有1Mbps)对用户的耐心是个很大的挑战,此时在浏览器端压缩再上传就很有必要了。 [一]环境:jdk8+tomcat8 [二]框架:...
  • 有时有效,有时无效,网上说是iis根据访问量来动态处理的,不知道到底是什么情况
  • 使用HTML5在前台进行图片压缩,然后上传至服务器上由PHP保存。此插件只适用于PC端,未做手机端页面优化,如果需要应用在手机端请自行优化UI,即然是PC端为什么还要前端压缩呢?PC端很容易使用图片处理软件进行压缩,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 547,213
精华内容 218,885
关键字:

压缩html