gulpUncss 清除样式

create by jsliang on 2017-10-24
Recently revised in 2019-05-23 20:09:06

套用模板、编写大型网站的时候,经常会写了很多没用的 CSS 代码,尤其是没有分好类、写好备注的时候,就会感觉很麻烦,这时候就可以使用 gulp-uncss 来精简样式,去掉没用的 CSS 代码。

首先,找到你要精简样式的目录:

图

然后,安装 Node:http://nodejs.cn/

接着,新建一个目录放gulp项目:npm init

图

再接着,安装gulp:cnpm install gulp -g

图

然后,安装 gulp-uncss:cnpm install gulp-uncss --save-dev

图

再然后,在项目中新建一个 gulpfile.js:

图

代码如下:

var gulp = require('gulp'), //加载gulp
uncss = require('gulp-uncss'); //加载gulp-uncss

gulp.task('uncss', function() {
    //冗余css文件
    return gulp.src('./App/css/style.css') //清除APP/css下的style.css
    .pipe(uncss({
        //使用该css的html页面,可多个(这里我们只清除一个试试)
        html: ['./App/index.html'],
    }))
    //输出目录
    .pipe(gulp.dest('./dist/css'));
});

接着,新建好输出目录的文件夹:

图

最后,执行gulp uncss:

图

这样,就可以看到,原本 1300 行的 CSS 清除到 630 行了,我们使用 gulp-uncss 清除样式成功啦~。

知识共享许可协议
jsliang的文档库梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于https://github.com/LiangJunrong/document-library上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。

Copyright © jsliang.top 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-05-23 21:36:29

results matching ""

    No results matching ""