微信号:programmer_club

介绍:程序员第一自媒体,与你探讨码农人生路上遇到的各类泛技术话题,定期为你推荐码农人生思考、感悟以及启迪!

如何让快速地"偷css"?

2017-04-30 21:59 jimzhuang

作者: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('xxx', function () {      return gulp.src('./homepage.css')        .pipe(uncss({            html: ['homepage.html']        }))        .pipe(gulp.dest('./out')); });

现在容量大小


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




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

小编拉你进粉丝微信群

不是在文章评论里回复

 
程序员之家 更多文章 大型网站技术架构 如果只有一个月的时间学 iOS 开发,我们该做些什么? 金庸笔下的良好代码风格 代码真的有必要写到完美吗? 为什么程序猿会选择跳槽?
猜您喜欢 ⑴让Google Chrome崩溃?只需16个字节! Android代码优化小技巧 React - Facebook开源Javascript库 只用30分钟,你也可以自己做一个Snapchat 由构建读懂Vue2.0,为自己的定制实现添砖加瓦!