首页 > 代码库 > 编程那些事儿:如何快速地"借用"CSS

编程那些事儿:如何快速地"借用"CSS

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

技术分享

  01gulp

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

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

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

  02gulp-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配置代码说明

  03实战例子

  我们现在需要这个把某个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,容量小了很多,很有效果,我们的目标达成了。

  学更多软件编程知识,了解更多IT行业资讯欢迎登陆中软国际教育集团官网www.zretc.com!

编程那些事儿:如何快速地"借用"CSS