Gulp -如何删除重复的样式在个别css文件,如果他们已经存在于共同的css文件

hzbexzde  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(202)

如何删除单个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文件。你能推荐一个节点包吗?

yyyllmsg

yyyllmsg1#

你应该考虑把两个文件编译合并成一个“main”css文件,在那里你可以清理-缩小-等等。
因为如果两个文件不在同一页面上使用,删除它们的重复文件是没有“真实的好处”的。
如果它们在同一个页面上使用,可以使用一个缩小的合并的css文件,你也可以减少呈现页面的阻塞调用的数量。
可以将css文件与gulp-concat连接在一起:

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

可以使用clean-cssgulp-clean-css Package 程序删除重复项:

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

因此,您可以首先调用concat-css,然后调用minify-css,这样就有一个main.css文件可以使用,而不会出现重复。

相关问题