Gulp CSS 常用插件

先找一个可以使用的插件，广度先打开，再找不同的插件，插件不同的内容将深度打开

##一、从需求出发

我们使用gulp 的作用面

• css代码格式化
• css压缩
  • PostCSS 社区的 cssnano：gulp-cssnano
  • clean-css：gulp-clean-css
  • csso：gulp-csso

但是不同的工具可能有默认的激进压缩功能，导致代码出现问题。所以用任何压缩工具之前，请先大概看一遍他的文档，把过于激进的压缩功能通过配置参数禁用掉。如果没有提供参数配置，果断放弃吧。

• less编译
• sass编译
• stylus编译
• css合并
• css自动添加浏览器前缀
  • gulp-autoprefixer

• css 编码规范检查

##二、CSScomb：CSS格式化的工具，重新梳理你写过的css属性，进行合理的归类与排序。

安装

    npm install gulp-csscomb --save-dev

###使用

例子：

    var gulp = require('gulp');
    var csscomb = require('gulp-csscomb');

    gulp.task('styles', function() {
      return gulp.src('src/styles/main.css')
    	.pipe(csscomb())
    	.pipe(gulp.dest('./build/css'));
    });

例子：

    var gulp = require('gulp');
    var $ = require('gulp-load-plugins')();
    
    gulp.task('styles', function() {
      return gulp.src('src/styles/bootstrap.less')
	    .pipe($.less({strictMath: true}))
	    .pipe($.autoprefixer([
	      'Android 2.3',
	      'Android >= 4',
	      'Chrome >= 20',
	      'Firefox >= 24', // Firefox 24 is the latest ESR
	      'Explorer >= 8',
	      'iOS >= 6',
	      'Opera >= 12',
	      'Safari >= 6']))
	    .pipe($.csscomb())
	    .pipe(gulp.dest('./build/css'));
    });

注：因为CssComb官网是提供了一个Bulid Config的工具来构建Csscomb来配置格式化的样式 如果.csscomb.json文件存在于和源码相同的文件夹或者在工程的根目录下，gulp-csscomb会把文件中的配置当作默认配置。 当然还可以自定义自己的配置。如 csscomb('zen')

###附上自己的.csscomb.json

{
    "remove-empty-rulesets": true,
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "\t",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": true,
    "quotes": "double",
    "sort-order-fallback": "abc",
    "space-before-colon": " ",
    "space-after-colon": " ",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": "\n",
    "space-before-opening-brace": "",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": " ",
    "space-before-selector-delimiter": " ",
    "space-before-closing-brace": "\n",
    "strip-spaces": true,
    "vendor-prefix-align": true
}

三、css合并：gulp-concat-css

###安装

npm install --save-dev gulp-concat-css

###例子：

var gulp = require('gulp');
var concatCss = require('gulp-concat-css');

gulp.task('default', function () {
  return gulp.src('assets/**/*.css')
    .pipe(concatCss("styles/bundle.css"))
    .pipe(gulp.dest('out/'));
});

###Api解析

concatCss(targetFile, options)

• targetFile: 合并后文件名
• options: (since 2.1.0)
  • inlineImports: (default true) 内联任何本地导入语句
  • rebaseUrls: (default true) 调整目标文件的位置的任何相对位置。
  • includePaths: (default []) 包括额外的路径，当inlineImports启用时

##四、 css压缩：gulp-clean-css 使用clean-css来压缩css

###安装

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

###API

####cleanCSS([options], [callback])

• options：
  • advanced ：设置为false 去禁用高级优化——例如：选择器和属性的合并与删减
  • aggressiveMerging ：设置为false去禁用有侵略性的属性合并
  • benchmark ：打开基准模式测量花在清理上的时间
  • compatibility ：允许兼容模式
  • debug ： set to true to get minification statistics under stats property (see test/custom：test.js for examples)
  • inliner ： a hash of options for @import inliner, see test/protocol：imports：test.js for examples, or this comment for a proxy use case. 一个hash表作为选项
  • keepBreaks ：是否保持换行符（true/false）默认为false
  • keepSpecialComments ： 是否保留注释（*：保留所有，默认，1：只保留首个，0：移除所有）
  • mediaMerging是否合并@media规则（默认为真）
  • processImport 是否出来@import规则
  • processImportFrom – 一个@import规则list, 'all', ['local'], ['remote'],或者 一个 黑名单路径例如 ['!fonts.googleapis.com']
  • rebase 设置为false去跳过URL重定地址（URL rebasing）
  • relativeTo @import规则和URL依赖的路径
  • restructuring ：设置为false来禁用高级优化的调整
  • root ：一个路径：来决定绝对的@import规则和rebase相对URL
  • roundingPrecision – 小数取整精度默认为2，设置为：1是禁用取整
  • semanticMerging – 设置为true来允许语义学上的合并模式（假定内容为BEM：like），默认为false，因为这个很大可能会破坏你的样式表，小心使用
  • shorthandCompacting – 设置为false来跳过速记法的压缩，默认为true除非sourcemap被设置
  • sourceMap – 暴露源映射下sourceMap属性,
  • 例如 new CleanCSS().minify(source).sourceMap(缺省为false)
  • 如果输入风格是CSS的预处理器(Less,Sass)一个sourcemap可以作为一个字符串传递。
  • sourceMapInlineSources ： set to true to inline sources inside a source map's sourcesContent field (defaults to false) It is also required to process inlined sources from input source maps.
  • target ： 一个文件夹或一个输出文件路径重新设定为所有url的基准

    var gulp = require('gulp');
    var cleanCSS = require('gulp-clean-css');
     
    gulp.task('minify-css', function() {
      return gulp.src('styles/*.css')
	    .pipe(cleanCSS({compatibility: 'ie8'}))
	    .pipe(gulp.dest('dist'));
    });

• callback

在返回潜在minify()响应的details细节。一个示例用例中可能包括日志的数据压缩文件。除了默认的对象,gulp-clean-css提供文件名和路径进行进一步分析。

    var gulp = require('gulp');
    var cleanCSS = require('gulp-clean-css');
     
    gulp.task('minify-css', function() {
	    return gulp.src('styles/*.css')
	    	.pipe(cleanCSS({debug: true}, function(details) {
	    		console.log(details.name + ': ' + details.stats.originalSize);
	    		console.log(details.name + ': ' + details.stats.minifiedSize);
	    }))
	    .pipe(gulp.dest('dist'));
    });

####使用sourcemap

    var gulp = require('gulp');
    var cleanCSS = require('gulp-clean-css');
    var sourcemaps = require('gulp-sourcemaps');
     
    gulp.task('minify-css', function() {
    	return gulp.src('./src/*.css')
	    	.pipe(sourcemaps.init())
	    	.pipe(cleanCSS())
	    	.pipe(sourcemaps.write())
	    	.pipe(gulp.dest('dist'));
    	});
    });

转载于:https://my.oschina.net/reamd7/blog/732005