4

如何删除单个 css 文件中的重复样式，如果它们已经存在于 common.css 文件中。

common.css文件具有以下样式。

.nav {
    background-color: red;
}

home.css有以下样式。

.nav {
    background-color: red;
}

.home {
    width: 300px;
}

现在，我想使用 gulp 任务修改home.css以删除重复的类.nav（因为我有该类并且在 common.css 中具有相同的属性）。修改home.css文件后，我将以下输出除外。

.home {
    width: 300px;
}

我不想更改或修改common.css文件。你能建议任何节点包吗？

4

1 回答 1

0

您应该考虑将两个文件编译合并到一个“主”css 文件中，您可以在其中清理-缩小-等。

因为如果两个文件没有在同一页面上使用，则删除两个文件的重复项并没有“真正的收获”。

如果它们被用于同一个页面，可以使用一个缩小合并的 css 文件，你也可以减少阻塞调用的数量来呈现你的页面。

可以使用gulp-concat连接你的 css 文件：

var concat = require('gulp-concat');
 
gulp.task('concat-css', function() {
  return gulp.src('./*.css')
    .pipe(concat('main.css'))
    .pipe(gulp.dest('dist'));
});

可以使用clean-css或gulp-clean-css wrapper删除重复项：

gulp.task('minify-css', () => {
  return gulp.src('dist/*.css')
    .pipe(cleanCSS({removeDuplicateRules: 'true'}))
    .pipe(gulp.dest('dist'));
});

因此，您最终可能会先调用 concat-css，然后再调用 minify-css，这样您就可以准备好一个 main.css 文件以供使用而不会重复。

于 2022-01-13T16:31:46.247 回答