gulp：压缩CSS插件——gulp-clean-css

gulp-clean-css插件介绍

gulp-clean-css插件是gulp plugin to minify CSS, using clean-css，使用clean-css去压缩CSS的gulp插件。一个依赖clean-css且对clean-css进行了简单包装后的插件。使用方法、相关配置以及排查问题，需要看clean-css的相关文档。

安装方式：

npm install gulp-clean-css --save-dev

 简单的使用：

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'));
});

构造函数选项

clean-css构造函数接受带有以下可用选项的哈希作为参数：

• compatibility-控制使用的兼容模式；默认为ie10+; 有关示例，请参见兼容模式；
• fetch-控制用于处理远程请求的功能；有关示例，请参见fetch选项（自4.1.0起）；
• format-控制输出CSS格式；默认为false; 有关示例，请参见格式化选项；
• inline-控制@import内联规则；默认为'local'; 有关示例，请参见内联选项；
• inlineRequest-控制用于内联远程@import规则的其他选项，可以是HTTP（S）请求选项中的任何一个；
• inlineTimeout-控制内联远程@import失败的毫秒数；默认为5000;
• level-控制使用的优化级别；默认为1; 有关示例，请参见优化级别；
• rebase-控制URL重新定位；默认为true;
• rebaseTo-控制所有URL都重新定位到的目录，最有可能是输出文件所在的目录；默认为当前目录；
• returnPromise-控制minify方法是否返回Promise对象；默认为false; 有关示例，请参见promise接口；
• sourceMap-控制是否构建输出源图；默认为false;
• sourceMapInlineSources-控制将源嵌入源图的sourcesContent字段内；默认为false。

有一定数量的兼容模式快捷方式，即：

• new CleanCSS({ compatibility: '*' }) （默认）-Internet Explorer 10+兼容模式
• new CleanCSS({ compatibility: 'ie9' }) -Internet Explorer 9+兼容模式
• new CleanCSS({ compatibility: 'ie8' }) -Internet Explorer 8+兼容模式
• new CleanCSS({ compatibility: 'ie7' }) -Internet Explorer 7+兼容模式

项目中的使用：

                gulp
                    .src(arr)
                    .pipe(cleanCSS({
                        compatibility: "ie9",
                        rebase: true,
                        rebaseTo: SRC+"/static/page_concat_resource/css",
                        inline: ["local"]
                    }))
                    .pipe(concat(key + ".css"))
                    .pipe(gulp.dest(SRC + "/static/page_concat_resource/css/"));

        .pipe(cleanCSS({
            compatibility: "ie9",
            rebase: false
        }))
        .pipe(concat('vendor.min.css'))
        .pipe(gulp.dest(STATIC + 'jslib/vendor/css'));