⑴ gulp压缩合并css/js时,怎么自动修改引用压缩后的css/js的路径
记录一下用 gulp 来合并、压缩CSS以及进行 MD5命名以及替换文件中引入的CSS文件,当然这一系列操作都是用基于gulp插件的,主要会用到下面的几个插件:
var concat = require('gulp-concat');//- 多个文件合并为一个;var minifyCss = require('gulp-minify-css');//- 压缩CSS为一行; var rev = require('gulp-rev');//- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector');//- 路径替换
安装Gulp插件到本地项目
npm init//- 生成一个 package.json,里面是一些常规的配置信息npm install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector --save-dev//- 安装插件到项目目录内
完成上面两步后,会在我们的项目内生成一个package.json文件以及一个node_moles目录
创建配置文件 gulpfile.js
在项目根目录内创建一个 gulpfile.js 文件(必须是这个文件名哟~),内容就是上面几个插件的配置信息:
var gulp = require('gulp');var concat = require('gulp-concat'); //- 多个文件合并为一个;var minifyCss = require('gulp-minify-css'); //- 压缩CSS为一行;var rev = require('gulp-rev'); //- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector'); //- 路径替换gulp.task('concat', function() { //- 创建一个名为 concat 的 task
gulp.src(['./css/wap_v3.1.css', './css/wap_v3.1.3.css']) //- 需要处理的css文件,放到一个字符串数组里
.pipe(concat('wap.min.css')) //- 合并后的文件名
.pipe(minifyCss()) //- 压缩处理成一行
.pipe(rev()) //- 文件名加MD5后缀
.pipe(gulp.dest('./css')) //- 输出文件本地
.pipe(rev.manifest()) //- 生成一个rev-manifest.json
.pipe(gulp.dest('./rev')); //- 将 rev-manifest.json 保存到 rev 目录内});
gulp.task('rev', function() {
gulp.src(['./rev/*.json', './application/**/header.php']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件
.pipe(revCollector()) //- 执行文件内css名的替换
.pipe(gulp.dest('./application/')); //- 替换后的文件输出的目录});
gulp.task('default', ['concat', 'rev']);
运行结果
通过以上的配置之后,就可以开始运行 gulp 对我们的项目进行相关的操作啦;
使用 gulp 命令,运行Gulp.js 构建程序
首先运行 concat 这个 task 生成一个 rev-manifest.json 文件
然后再运行 rev 这个 task 替换掉文件中引入的 css
YuanWingdeMacBook-Pro:m YuanWing$ gulp concat
[11:47:02] Using gulpfile ~/SVN/JKD/m/gulpfile.js
[11:47:03] Starting 'concat'...
[11:47:03] Finished 'concat' after 12 msYuanWingdeMacBook-Pro:m YuanWing$ gulp rev
[11:47:17] Using gulpfile ~/SVN/JKD/m/gulpfile.js
[11:47:17] Starting 'rev'...
[11:47:17] Finished 'rev' after 10 msYuanWingdeMacBook-Pro:m YuanWing$
rev-manifest.json文件内容:
{ "wap.min.css": "wap.min-c49f62a273.css"}
header.php替换前后对比:
替换前:<link rel="stylesheet" href="/css/wap.min.css" />
替换后:<link rel="stylesheet" href="/css/wap.min-c49f62a273.css" />
gulp-rev-collector进行文件路径替换是依据 rev-manifest.json 的,所以要先成生 .json 文件,然后再进行替换;
⑵ 能不能推荐一下CSS的压缩软件和js的压缩软件
YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用java开发。使用方法://压缩JSjava -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js//压缩CSSjava -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css下载地址 http://www.julienlecomte.net/yuicompressor/yuicompressor-2.4.2.zip
⑶ phpStorm 在压缩的css或js文件中搜索时很卡怎么破
貌似是Phpstorm7以上的版本有BUG,换成6就可以。
压缩js,利用jsmin类:
header('Content-type: text/javascript');
require 'jsmin.php';
echo JSMin::minify(file_get_contents('common.js') . file_get_contents('common2.js'));
⑷ 如何判断网站是否压缩CSS或者JS
打开一个页面,查看源码,查找到.css或.js文件,样式表内样式排在一行,js字符连在一起的就是压缩过的。
⑸ 如何压缩css和js文件实现快速传输
大家都知道bluehost支持Gzip压缩,但是并没有明显的一个开启按钮需要你自己配置,但是Gzip有一个缺点是不能压缩css和js文件,但是并不说明这两个文件不能像html文件那样压缩,我们可以利用一个叫Minify库进行压缩。
使用方法:1、下载Minify
2、解压缩后将min文件上传到网站根目录
3、编写.htaccess文件添加如下代码:
⑹ 如何压缩javascript和css文件
一、压缩html和javascript:
我们用站长工具的JavaScript-HTML格式化工具,我们打开页面,我今天要压缩的文件js文件:common.js ,把js代码复制到到JavaScript/HTML格式化工具里面如下图所示:
点击下面的“普通压缩”和“加密压缩”按钮,经过我的精心测试,使用“加密压缩”,对文件压缩率是最好的,所以点击“加密压缩”,压缩后如图:
javascript代码压缩后,我们就把这些代码在复制到common.js文件里面,在吧这个文件上传到空间原来的位置,进行访问是否存在一些错误,如果没有什么问题说明压缩成功;
我的common.js 文件压缩前和压缩后的对比:
压缩前:
压缩后:
文件压缩前和压缩后确实有明确的减少,说明压缩确实减少文件的大小,
我们来测试文件压缩前和压缩后所有能的时间做对比(我是用火狐插件测试传输速度):
压缩前所用时间:
压缩后所用时间:
压缩前所用时间是:125ms,压缩后所用时间:78ms ,文件压缩后给我们节省大量的时间,如果每个js都进行压缩,我们房子访问速度会更快的。
(注:html文件和javascript压缩原来一样的,当时压缩html要用到“普通压缩”按钮压缩)
二、压缩css文件:
我们打开站长工具的Css压缩/格式化工具页面,我要压缩的文件是五色旗保健品商城的css主文件style.css,首先我们打开站长工具的Css压缩/格式化工具页面 ,把style.css 代码放到Css压缩/格式化工具里面,如下图所示:
点击“压缩代码”按钮后,css代码压缩成功,如下图所示:
后边就是压缩后的css代码,你要不右边的代码复制到源文件style.css里面在上传到服务器空间里面,在访问一下网,看看网页样式有没有改变,如果有点变化就需要简单的调试一下,如果没有变样,说明你的css压缩成功了;
下面我们来看看styl.css文件压缩前和压缩后的大小和放在访问速度的大小:
文件大小对比:
压缩前:
压缩后:
压缩前30kb,压缩后23kb,明显的文件大小减小了
压缩前所用时间:
css压缩前的时间.jpg (7.36 KB, 下载次数: 0)
下载附件
css压缩前的时间.jpg
2013-11-2 00:35 上传
压缩后所用时间:
压缩前所用时间是:188ms,压缩后所用时间:93ms ,css压缩后明显的节省了95ms;
总结:一个大的网站可能会有很多的javascript和css,如果没有都进行压缩的话,一定会减少很多文件大小的,其实减少文件大少并不是很重要,最重要的是,文件容量减少了,能够快速的提高网站访问的速度,给用户带来好的体验,我们尽量的把文件压缩到最小,这样才有利于用户快速的打开网站,至此我的五色旗保健品商城优化后,我的每天的访问量也增加了很多。
⑺ 网站如何优化,如何提高网站的速度
提高网站相应速度首先要减少页面当中的JS文件,其次要保证页面的大小不超过60K为最好。这是在建站时的硬性要求。
也可以用网络、360这类云加速,提高自己网站的响应速度。
或者使用独立IP的虚拟空间,这样的话独享贷款,页面相应的速度一般会比共享虚拟主机要快一些。
其他优化的问题,例如标题关键词描述的书写,分隔符尽量用英文的逗号和句号书写,不要出现中文标点。每天保证好内容的更新,多找一些收录快的论坛发发带自己i网站链接的帖子,经常交换替换友情链接。这是基本的优化方法,具体的可以私信我加好友来讨论。
希望对你有帮助。望采纳。
⑻ 如何用PHP实现页面的GZIP压缩输出
第一步,你需要对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代码压缩然后输出给客户端了。不信你可以查看源代码,就是一行,网页瞬间压缩很小。
⑼ 百度js和css合并压缩是如何做的
简单来说是通过插件实现,当然现在淘宝出的服务器(nginx修改版)自带有这个功能。 通过一个url地址里写上每个js或者css 路径,然后插件通过路径将js/css 进行gzip形式压缩,最后组合成一个文件输出。你能看到的输出格式是php后缀,但是输出文件的表头是js/CSS 这样浏览器也就当是js/css来解析了。
合并代码工具我推荐minify (PHP),这个比较早,也很简单。
压缩的话网上有很多地方都提供在线压缩
简单说说 JS压缩:
1. 长变量变量名 压缩为短变量名,去空格,去注释
2. 可以将 new Array() 改写为 [], new Object 改写为{} 云云
3. 使用eval, 关键词等等 的复杂逻辑 也可以压缩
这样处理过后,如果觉得还是太大了,还可以采用服务端的gzip压缩传输
⑽ fis3 版本相同但是压缩css和js后出现版本冲突。
通过一个url地址里写上每个js或者css 路径,然后插件通过路径将js/css 进行gzip形式压缩,最后组合成一个文件输出。你能看到的输出格式是php后缀,但是输出文件的表头是js/CSS 这样浏览器也就当是js/css来解析了。
简单说说 JS压缩:
1. 长变量变量名 压缩为短变量名,去空格,去注释
2. 可以将 new Array() 改写为 [], new Object 改写为{} 云云
3. 使用eval, 关键词等等 的复杂逻辑 也可以压缩
这样处理过后,如果觉得还是太大了,还可以采用服务端的gzip压缩传输