CODEWITHSUNDEEP
cssgulppurgecss-purge
Dileep
Dileep

Reputation: 515

Gulp - How to remove duplicated styles in individual css files, If they have already present in common css file

How to remove duplicated styles in individual css files, If they already present in common.css file.

common.css file has below styles.

.nav {
    background-color: red;
}

home.css has below styles.

.nav {
    background-color: red;
}

.home {
    width: 300px;
}

Now, I would like to modify the home.css using gulp task to remove the duplicated class .nav (as I have the class and with the same properties in common.css). After modifying of home.css file, then I'm excepting the below output.

.home {
    width: 300px;
}

I don't want to change or modify the common.css file. Could you please suggest any node package?

Upvotes: 4

Views: 1559

Answers (1)

Jean-Nicolas G.
Jean-Nicolas G.

Reputation: 239

You should think of compiling-merging both your files into one 'main' css file where you could clean-minify-etc.

As there is no 'real gain' of removing duplicated of both files if they arent being used on the same page.

And if they are being used a the same page, could use a minified-merged css file, you would also reduce the amount of blocking calls to render your page as well.

Can concatenate your css files with gulp-concat :

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

Can remove duplicates using clean-css or gulp-clean-css wrapper :

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

So you could end up calling concat-css first, then minify-css and would have a main.css file ready to use without duplicate.

Upvotes: 1

Related Questions