首页 ›存档› 技术 › 查看内容

如何让快速地"偷css"？

2018-3-30 13:00 |来自: 互联网 385 0

摘要: 作者：jimzhuang 原文：blog.jimdono.com/untitled-2/ （点击文末阅读原文即可前往）做前端开发有时候会碰到任务紧急，需要马上写好静态页的问题。设计师给你扔了一个设计稿，要你在下班之前搞定。这时候你如热锅 ...

作者：jimzhuang

原文：blog.jimdono.com/untitled-2/

（点击文末阅读原文即可前往）

做前端开发有时候会碰到任务紧急，需要马上写好静态页的问题。设计师给你扔了一个设计稿，要你在下班之前搞定。这时候你如热锅上的蚂蚁，自己写css的话，时间紧张。上网找了一下相关模板页面，找到了一个80% 90%像的页面，想马上把他css给"偷"下来，但是你打开了页面的css,发现大量与本页面无关的css掺杂在里面，如果一个个校验剔除，费时费力。假设有一个东西能马上帮我把页面无关的css给去除就OK了。现在轮到了一个厉害的gulp插件登场了，gulp-uncss它就能做到。

gulp

说道gulp插件，就先介绍一下gulp是什么东西吧。

首先对于第一个新事物，我会问gulp这是什么？答：gulp是一个自动化构建工具，它可以做一些自动化的任务，比如: 检查Javascript 编译Sass（或Less之类的）文件合并Javascript 压缩并重命名合并后的Javascript 变更静态资源给静态资源添加 md5 合并雪碧图自动刷新浏览器 ... 以前为了提高网站的访问速度，这些都是人工做的，现在gulp可以很好的完成他们，因为它们是流程化的，程序员就是极客，这种能用程序做的当然不用人来咯。

现在前端er可以各种使用构建工具构建自己的前端项目，让繁琐的各种工作让工具去做，自己关心最核心的东西，其中一种最流行的构建工具就是gulp。而gulp各种使用基础入门，本文就不在赘述，下面说一下gulp-uncss的使用。

gulp-uncss的使用

使用gulp插件，我们可以到官方发布包的平台上，查看使用说明。gulp是npm系的，所以查看gulp插件可以到npm的发布平台www.npmjs.com这个网站上查看使用说明。找到gulp-uncss插件地址。

npmjs官网截图

使用gulp插件首先要安装gulp插件。

npm install gulp-uncss --save-dev

安装完之后就要写配置文件gulpfile.js，参考文档中的例子。

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

gulp.task('default', function () { 
  return gulp.src('site.css')
    .pipe(uncss({
      html: ['index.html', 'posts/**/*.html', 'http://example.com']
    }))
    .pipe(gulp.dest('./out'));
});

gulpfile.js配置代码说明

实战例子

不给例子就说好是耍流氓，下面就是举个栗子。我们现在需要这个把某个div给copy下来，去除其他无用的元素，保留它原本的样式。打开印象笔记官网。下面的我们的需要的一部分div截图。

印象笔记官网截图

用chrome devtool复制它的dom结构

dom结构复制

然后把查看css，把相关的css下载下来。

可以查看css容量很大，里面充斥着不相干的css,我们现在就用插件去掉多余的css。

使用gulp去除无用css

gulp.task('**', function () { 
  return gulp.src('./homepage.css')
    .pipe(uncss({
      html: ['homepage.html']
    }))
    .pipe(gulp.dest('./out'));
});

现在容量大小

变成14kb，容量小了很多，很有效果。我们的目标达成。

在微信公众号内回复数字“1”

小编拉你进粉丝微信群

不是在文章评论里回复

声明：文章版权归原作者所有部分文章转自互联网如有侵权请联系 [邮箱地址] 删除