写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,去除冗余代码的更多相关文章

  1. word表格转html后去除冗余代码

    word可以另存为html文件,通过这个功能,可以快速实现网页展示word内容,特别是表格的编辑,它包含tr.td.th.rowspan.colspan等内容,直接写比较繁琐. 但word转换过来的h ...

  2. 批量去除Teleport Pro整站下载文件冗余代码

    teleport pro tppabs标签批量删除 teleport pro tppabs标签批量删除 使 用Teleport Pro下载的网页代码中包含了很多垃圾代码,比如下载的html网页代码中会 ...

  3. 精简CSS代码

    精简CSS代码可以帮助减小样式文件的大小,使代码清晰,方便维护. 使用简写属性及默认值 .header { margin-top: 10px; margin-right: 20px; margin-b ...

  4. Web前端开发最佳实践(9):CSS代码太太乱,重复代码太多?你需要精简CSS代码

    前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...

  5. ASP.Net MVC4中封装CSS和js冗余代码(不让其大篇的显示在前台上)

    (1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用.   由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...

  6. 去除整站下载文件中的tppabs等冗余代码

    用TeleprotUltra复制了一个网站,结果网页中出现了很多形如tppabs=””的冗余代码,点击vs中的“在文件中查找”图标,打开“查找和替换”对话框,转到“快速替换”,然后进行以下设置: “查 ...

  7. Teleport Ultra/Teleport Pro的冗余代码批量清理方法

    Teleport Pro 是款优秀的网站离线浏览工具(即网站整站下载工具),Teleport Ultra是其增强版,但使用此系列软件下载的离线网页里会包含大量冗余代码(如tppabs),手动去修改工作 ...

  8. [转]Teleport Ultra/Teleport Pro的冗余代码批量清理方法

    原文地址:http://www.abcd9.com/?post=402 Teleport Pro 是款优秀的网站离线浏览工具(即网站整站下载工具),Teleport Ultra是其增强版,但使用此系列 ...

  9. 移动端&PC端CSS样式兼容代码

    CSS样式兼容代码 1.禁止选中复制文本 *{ user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-us ...

随机推荐

  1. HihoCoder1642 : 三角形面积和([Offer收割]编程练习赛37)(求面积)(扫描线||暴力)(占位)

    描述 如下图所示,在X轴上方一共有N个等腰直角三角形.这些三角形的斜边与X轴重合,斜边的对顶点坐标是(Xi, Yi). (11,5) (4,4) /\ /\(7,3) \ / \/\/ \ / /\/ ...

  2. 《HTTP2基础教程》笔记

    <HTTP2基础教程>笔记 HTTP/1问题 队头阻塞 低效TCP 慢启动 拥塞避免阶段 臃肿头部 受限的优先级 高优先级无法插队 第三方资源 h2也无法很好解决 web性能优化 DNS查 ...

  3. 【Lintcode】028.Search a 2D Matrix

    题目: Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the f ...

  4. 使用Tornado作为Django App的服务器

    闲来无事,折腾折腾. 老是听说tonado是个异步web框架和服务器,作为框架倒是了解到了,但是服务器一直不太懂.所以决定了解一下,既然可以做服务器,那就把自己的django app部署到这上边去. ...

  5. TTY,Console以及Terminal

    TTY可以理解是一种终端显示.可以在/dev文件夹看到多个tty开头的文件,可以通过alt+Fn(n=1~6)来进行切换.这个是不是和GUI场景下的多个Terminal窗口是一致的呢? 伪TTY是指一 ...

  6. 百度地图API的第一次接触——地图事件

    0.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...

  7. 人工智能实践:TensorFlow 框架

    张量.计算图.会话 基本概念 基于Tensorflow的NN:用张量表示数据,用计算图搭建神经网络,用会话执行计算图,优化线上的权重(参数),得到模型. 张量(Tensor):张量就是多维数组(列表) ...

  8. Oracle字段增删改方法总结

    一.修改字段的语法:alter table tablename modify (字段名 类型 [default value][null/not null],….);有一个表名为tb,字段段名为name ...

  9. Swiper 滑动切换图片(可用于PC端,移动端)

    作为一名后端的普通程序猿, 你让我搞这种前端不是跟我玩命吗,所以用插件来搞,省事又简单,而且Swiper使用又简单是吧: 头皮发麻,不喜欢说废话,我更喜欢直接看到效果: 按Swiper官方文档来说, ...

  10. Runtime.getRuntime()

    1转自:https://www.aliyun.com/jiaocheng/849282.html 那就首先说点Runtime类吧,他是一个与JVM运行时环境有关的类,这个类是Singleton的.我说 ...