gulp插件:gulp-cssnano,gulp-minify-css 和gulp-clean-cs
https://blog.csdn.net/weixin_40817115/article/details/81095176
近日在学习《Web前端自动化构建》,关于gulp的css压缩插件,书中先后提到了两个,分别是gulp-cssnano和gulp-minify-css,而执行npm install gulp-minify-css –save-dev时,控制台提示如下:
npm WARN deprecated gulp-minify-css@1.2.4: Please use gulp-clean-css
gulp-minify-css@1.2.4
至此,一共出现了三个压缩css的gulp插件。
对比如下
压缩能力:
相同css文件分别用这三个插件进行压缩,
gulp-cssnano:2.55KB;
gulp-minify-css: 2.44KB;
gulp-clean-css: 2.55KB;
维护:
gulp-cssnano: current tags: 2.1.3 Published 4 months ago;
附npm地址:https://www.npmjs.com/package/gulp-cssnano
gulp-minify-css: 1.2.4 Published 2 years ago Please use gulp-clean-css;
附npm地址:https://www.npmjs.com/package/gulp-minify-css
gulp-clean-css: 3.9.4 Published 2 months ago ;
附npm地址:https://www.npmjs.com/package/gulp-clean-css
使用:
鉴于gulp-minify-css已被废弃,在此仅对比gulp-cssnano和gulp-clean-css
gulp-cssnano
安装:
npm install gulp-cssnano --save-dev
1
示例:
const gulp = require('gulp');
const cssnano = require('gulp-cssnano');
gulp.task('styles', () => {
return gulp.src('./main.css')
.pipe(cssnano())
.pipe(gulp.dest('dist'));
});
1
2
3
4
5
6
7
8
Source Maps:
const gulp = require('gulp');
const cssnano = require('gulp-cssnano');
const sourcemaps = require('gulp-sourcemaps');
gulp.task('styles', () => {
return gulp.src('main.css')
.pipe(sourcemaps.init())
.pipe(cssnano())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist'));
});
1
2
3
4
5
6
7
8
9
10
11
gulp-clean-css
安装:
npm install gulp-clean-css --save-dev
1
示例:<
5b4
br/>
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'));
});
1
2
3
4
5
6
7
8
gulp-clean-css支持回调函数
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'));
});
1
2
3
4
5
6
7
8
9
10
11
示例代码中可以获取
4458
css压缩前后的stats信息,同时它也提供了file name以及path用于其他分析。
Source Maps:
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'));
});
- gulp 插件之 gulp-clean-css 和 gulp-make-css-url-version
- gulp教程之gulp-minify-css【gulp-clean-css】
- gulp插件(2) - gulp-clean-css(压缩CSS文件)
- gulp常用插件-gulp-clean-css
- 【原创】cs+html+js+css模式(六):改造ajax.js,从原来的原生态js修改为依赖于jquery插件
- gulp插件构建项目 压缩js、css、image、zip、web服务、跨域等插件
- Dreamweaver CS5 CS6 代码格式化、美化插件(可同一时候格式化HTML、JavaScript、CSS )眼下最好用的代码格式化扩展
- Dreamweaver CS5 CS6 代码格式化、美化插件(可同时格式化HTML、JavaScript、CSS )目前最好用的代码格式化扩展
- 对gulp-minify-css改动一点点,只合并指定大小的图片
- gulp教程之gulp-minify-css
- Gulp插件之gulp-jscs插件的.jscsrc配置信息详情
- Dreamweaver CS5 CS6 代码格式化、美化插件(可同一时候格式化HTML、JavaScript、CSS )眼下最好用的代码格式化扩展
- gulp插件(9) - gulp-postcss & autoprefixer(生成CSS前缀)
- gulp插件(10) - gulp-clean(删除文件及文件夹)
- Gulp CSS 常用插件
- gulp-less插件之less文件编译成css
- gulp教程之gulp-minify-css
- 将less编译成css的gulp插件
- gulp教程之gulp-minify-css