使用gulp-uncss精简css,去除冗余代码

最新推荐文章于 2024-08-10 07:48:46 发布

weixin_30335353

最新推荐文章于 2024-08-10 07:48:46 发布

阅读量262

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shucaige/p/9202159.html

写HTML页面时会产生无用CSS代码，可使用gulp-uncss精简。介绍了创建gulp项目、安装gulp和gulp-uncss、创建gulpfile.js文件并定义任务、执行任务等步骤，还提及该方法可剔除扒来样式中的冗余CSS。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写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.结果输出