使用gulp-uncss精简css,去除冗余代码
2024-08-25 20:29:08
写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...~~~~
最新文章
- Checkpoints codeforces 709B
- Terminal中输入命令直接打开QtCreator,以及创建其桌面快捷方式
- ORA-02287: 此处不允许序号
- #Leet Code# Evaluate Reverse Polish Notation
- [LeetCode#281] Zigzag Iterator
- C# 反射 表达式树 模糊搜索
- Autofac 之 基于 Castle DynamicProxy2 的 Interceptor 功能
- php 实现传入参数的传出
- Monad / Functor / Applicative 浅析
- Android输入控件详解
- 第35章 秘密(secrets) - Identity Server 4 中文文档(v1.0.0)
- Python【每日一问】08
- Linux操作oracle——关闭、停止、重启
- MySQL安装指南(转)
- 移除input框type=";number";在部分浏览器的默认上下按钮
- .NET C#获取当前网页地址
- ubuntu 使用命令行登录oracle
- react-router 4 路由的嵌套
- Spine输出资源一键入Unity3D工具代码
- HTTPS 数字签名 证书