使用gulp-uncss精简css,去除冗余代码
写html页面的时候,多修改几次就会出现很多无用的css代码,下面使用gulp-uncss来精简css文件,去掉没用的css代码
1.首先找个目录创建一个gulp项目在命令行输入:npm init 然后一路回车创建一个项目
2.安装gulp和gulp-uncss --save -dev 在命令行输入:
npm install gulp
npm install gulp-uncss --save -dev
3.安装完成后在目录里创建一个文件 gulpfile.js(文件名不要改,改了会报错),然后在gulpfile.js文件里面写需要执行的任务,比如定义一个叫uncss的任务,这个名字在执行的时候会用到,代码:
var gulp = require('gulp');
var uncss = require('gulp-uncss');
gulp.task('uncss', function () {
return gulp.src('screen.css') //需要进行处理的css
.pipe(uncss({
html:['default.html'] //使用css的html文件,可以多个
}))
.pipe(gulp.dest('./out')); //输出目录
});
console.log('done')
4.在项目目录中打开cmd 输入:gulp uncss
5.结果输出

6.这个东西还可以有其他用途,比如扒了别人的样式,可以直接使用此方法剔除掉冗余的css...~~~~
使用gulp-uncss精简css,去除冗余代码的更多相关文章
- word表格转html后去除冗余代码
word可以另存为html文件,通过这个功能,可以快速实现网页展示word内容,特别是表格的编辑,它包含tr.td.th.rowspan.colspan等内容,直接写比较繁琐. 但word转换过来的h ...
- 批量去除Teleport Pro整站下载文件冗余代码
teleport pro tppabs标签批量删除 teleport pro tppabs标签批量删除 使 用Teleport Pro下载的网页代码中包含了很多垃圾代码,比如下载的html网页代码中会 ...
- 精简CSS代码
精简CSS代码可以帮助减小样式文件的大小,使代码清晰,方便维护. 使用简写属性及默认值 .header { margin-top: 10px; margin-right: 20px; margin-b ...
- Web前端开发最佳实践(9):CSS代码太太乱,重复代码太多?你需要精简CSS代码
前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...
- ASP.Net MVC4中封装CSS和js冗余代码(不让其大篇的显示在前台上)
(1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用. 由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...
- 去除整站下载文件中的tppabs等冗余代码
用TeleprotUltra复制了一个网站,结果网页中出现了很多形如tppabs=””的冗余代码,点击vs中的“在文件中查找”图标,打开“查找和替换”对话框,转到“快速替换”,然后进行以下设置: “查 ...
- Teleport Ultra/Teleport Pro的冗余代码批量清理方法
Teleport Pro 是款优秀的网站离线浏览工具(即网站整站下载工具),Teleport Ultra是其增强版,但使用此系列软件下载的离线网页里会包含大量冗余代码(如tppabs),手动去修改工作 ...
- [转]Teleport Ultra/Teleport Pro的冗余代码批量清理方法
原文地址:http://www.abcd9.com/?post=402 Teleport Pro 是款优秀的网站离线浏览工具(即网站整站下载工具),Teleport Ultra是其增强版,但使用此系列 ...
- 移动端&PC端CSS样式兼容代码
CSS样式兼容代码 1.禁止选中复制文本 *{ user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-us ...
随机推荐
- BZOJ3991:寻宝游戏 (LCA+dfs序+树链求并+set)
小B最近正在玩一个寻宝游戏,这个游戏的地图中有N个村庄和N-1条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩家可以任意选择一个村庄,瞬间转移到这个村庄,然后可以任意在地图的道路上行走 ...
- python 之闭包,装饰器,生成器
一.可迭代的对象(也就是可以用for循环,generator 是生成器的意思) 怎么判断是否可迭代呢?通俗的方法建立一个for循环 高大上的方法是: In [40]: from collections ...
- BZOJ_5359_[Lydsy1805月赛]寻宝游戏_DP
BZOJ5359_[Lydsy1805月赛]寻宝游戏_DP Description begin.lydsy.com/JudgeOnline/upload/201805.pdf 我们需要找到一条权值最大 ...
- P2051 [AHOI2009]中国象棋[线性DP]
最近智商有点不在线.其实一直不在线. 题目 先是想用$f[i][j][k][0/1/2]$表示摆了i行时有j列空着,k列有了一个炮,且当下摆了0/1/2个的状态,转移方程写的出来但是极其繁琐.于是又设 ...
- 主备角色switch
理论知识:Switchover 切换允许primary 和一个备库进行切换,并且这种切换没有数据丢失. 前提条件: 1) 主备库相关参数 fal_client.fal_server .standby_ ...
- 单机11g ogg 双向DML复制
环境说明: Linux为Linux 2.6.32-573.el6.x86_64 Oracle为 11g Enterprise Edition Release 11.2.0.1.0 - 64bit Pr ...
- scala新人佑门
scala语言 1. val和var val和var当前区别在于前者只能被赋值一次,就像java中的final,但是后者则可以随意覆盖: 2. Unit Unit返回代表空返回,类似于vo 3. 类型 ...
- makefile 使用【转载】
该篇文章为转载,是对原作者系列文章的总汇加上标注. 支持原创,请移步陈浩大神博客: http://blog.csdn.net/haoel/article/details/2886 makefile很重 ...
- zk 04之 Zookeeper Api(java)与应用
如何使用 Zookeeper 作为一个分布式的服务框架,主要用来解决分布式集群中应用系统的一致性问题,它能提供基于类似于文件系统的目录节点树方式的数据存储,但是 Zookeeper 并不是用来专门存储 ...
- Iptables防火墙面试题
Iptables防火墙面试题 第1章 (一)基础口试题 1.1 详述 iptales 工作流程以及规则过滤顺序? 1.防火墙是一层层过滤的.实际是按照配置规则的顺序从上到下,从前到后进行过滤的. 2. ...