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

旧城等待， 2022-11-29 12:22 211阅读 0赞

### [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的相关文档][clean-css 1]。

### 安装方式： ###

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+`; 有关示例，请参见[兼容模式][Link 1]；**
 *  `fetch`\-控制用于处理远程请求的功能；有关示例，请参见[fetch选项][fetch]（自4.1.0起）；
 *  `format`\-控制输出CSS格式；默认为`false`; 有关示例，请参见[格式化选项][Link 2]；
 *  **`inline`\-控制`@import`内联规则；默认为`'local'`; 有关示例，请参见[内联选项][Link 3]；**
 *  `inlineRequest`\-控制用于内联远程`@import`规则的其他选项，可以是[HTTP（S）请求选项中的][HTTP_S]任何一个；
 *  `inlineTimeout`\-控制内联远程`@import`失败的毫秒数；默认为5000;
 *  `level`\-控制使用的优化级别；默认为`1`; 有关示例，请参见[优化级别][Link 4]；
 *  **`rebase`\-控制URL重新定位；默认为`true`;**
 *  **`rebaseTo`\-控制所有URL都重新定位到的目录，最有可能是输出文件所在的目录；默认为当前目录；**
 *  `returnPromise`\-控制`minify`方法是否返回Promise对象；默认为`false`; 有关示例，请参见[promise接口][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'));

[gulp-clean-css]: https://www.npmjs.com/package/gulp-clean-css
[gulp]: http://gulpjs.com/
[clean-css]: https://github.com/jakubpawlowicz/clean-css
[clean-css 1]: https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-api
[Link 1]: https://github.com/jakubpawlowicz/clean-css#compatibility-modes
[fetch]: https://github.com/jakubpawlowicz/clean-css#fetch-option
[Link 2]: https://github.com/jakubpawlowicz/clean-css#formatting-options
[Link 3]: https://github.com/jakubpawlowicz/clean-css#inlining-options
[HTTP_S]: https://nodejs.org/api/http.html#http_http_request_options_callback
[Link 4]: https://github.com/jakubpawlowicz/clean-css#optimization-levels
[promise]: https://github.com/jakubpawlowicz/clean-css#promise-interface