gulp教程之gulp-minify-css

3,826次阅读

共计 1043 个字符，预计需要花费 3 分钟才能阅读完成。

简介：
使用 gulp-minify-css 压缩 css 文件，减小文件大小，并给引用 url 添加版本号避免缓存。

本地安装 gulp-minify-css
安装：命令提示符执行 npm install gulp-minify-css –save-dev

配置 gulpfile.js
1、基本使用

var gulp = require('gulp'),
    cssmin = require('gulp-minify-css');
 
gulp.task('testCssmin', function () {gulp.src('src/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'));
});

2、gulp-minify-css 其他参数具体参数查看这里

var gulp = require('gulp'),
    cssmin = require('gulp-minify-css');
 
gulp.task('testCssmin', function () {gulp.src('src/css/*.css')
        .pipe(cssmin({advanced: false,// 类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7',// 类型：String 默认：''or'*'[启用兼容模式；'ie7'：IE7 兼容模式，'ie8'：IE8 兼容模式，'*'：IE9+ 兼容模式]
            keepBreaks: true// 类型：Boolean 默认：false [是否保留换行]
        }))
        .pipe(gulp.dest('dist/css'));
});

3、给 css 文件里引用 url 加版本号（根据引用文件的 md5 生产版本号）

var gulp = require('gulp'),
    cssmin = require('gulp-minify-css');
    // 确保已本地安装 gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev]
    cssver = require('gulp-make-css-url-version'); 
 
gulp.task('testCssmin', function () {gulp.src('src/css/*.css')
        .pipe(cssver()) // 给 css 文件里引用文件加版本号（文件 MD5）.pipe(cssmin())
        .pipe(gulp.dest('dist/css'));
});

正文完