Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
gulp-clean-css
Advanced tools
gulp-clean-css is a Gulp plugin for minifying CSS files using the clean-css library. It helps in reducing the size of CSS files by removing unnecessary whitespace, comments, and other redundant elements, which can improve the performance of web applications.
Basic Minification
This feature allows you to perform basic minification of CSS files. The code sample demonstrates how to set up a Gulp task to minify CSS files from the 'src' directory and output the minified files to the 'dist' directory.
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', () => {
return gulp.src('src/*.css')
.pipe(cleanCSS({ compatibility: 'ie8' }))
.pipe(gulp.dest('dist'));
});
Advanced Minification Options
This feature allows you to use advanced minification options provided by clean-css. The code sample shows how to set the 'level' option to 2 for more aggressive optimizations.
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
gulp.task('minify-css-advanced', () => {
return gulp.src('src/*.css')
.pipe(cleanCSS({ level: 2 }))
.pipe(gulp.dest('dist'));
});
Source Maps
This feature allows you to generate source maps for the minified CSS files. The code sample demonstrates how to initialize and write source maps using the 'gulp-sourcemaps' plugin in conjunction with 'gulp-clean-css'.
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');
gulp.task('minify-css-sourcemaps', () => {
return gulp.src('src/*.css')
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist'));
});
gulp-csso is another Gulp plugin for minifying CSS files, using the CSSO library. It offers similar functionality to gulp-clean-css but uses a different underlying library for minification. CSSO is known for its aggressive optimizations and may produce smaller file sizes in some cases.
gulp-uglifycss is a Gulp plugin for minifying CSS files using the UglifyCSS library. It provides basic minification capabilities similar to gulp-clean-css but may not offer as many advanced options or optimizations.
gulp-postcss is a Gulp plugin that allows you to use PostCSS plugins to process CSS files. While not a minifier itself, it can be used with plugins like cssnano to achieve minification. This makes it a more flexible but potentially more complex solution compared to gulp-clean-css.
This is just a simple gulp plugin, which means it's nothing more than a thin wrapper around clean-css
. If it looks like you are having CSS related issues, please contact clean-css. Only create a new issue if it looks like you're having a problem with the plugin itself.
npm install gulp-clean-css --save-dev
See the CleanCSS
options.
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', () => {
return gulp.src('styles/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist'));
});
Useful for returning details from the underlying minify()
call. An example use case could include logging stats
of the minified file. In addition to the default object, gulp-clean-css
provides the file name
and path
for further analysis.
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', () => {
return gulp.src('styles/*.css')
.pipe(cleanCSS({debug: true}, (details) => {
console.log(`${details.name}: ${details.stats.originalSize}`);
console.log(`${details.name}: ${details.stats.minifiedSize}`);
}))
.pipe(gulp.dest('dist'));
});
Source Maps can be generated by using gulp-sourcemaps.
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');
gulp.task('minify-css',() => {
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist'));
});
FAQs
Minify css with clean-css.
The npm package gulp-clean-css receives a total of 151,131 weekly downloads. As such, gulp-clean-css popularity was classified as popular.
We found that gulp-clean-css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.