gulp构建项目（八）：gulp-autoprefixer、gulp-less、gulp-csso处理css

需求分析：

• 打包时自动添加css前缀
• 编译css预处理
• 压缩css

一、gulp-autoprefixer等模块安装

npm i -D gulp-autoprefixer gulp-less gulp-csso

二、gulp-autoprefixer等参数说明

/**
 * @param option {Object}
 * @param option.browsers 浏览器类型
 * @param option.cascade 是否美化，默认true
 */

autoprefixer([options])

/**
 * @param option {Object}
 * @param option.restructure 
 */

csso([options])

三、gulp-autoprefixer等配置使用

var csso = require('gulp-csso');            // css压缩
var less = require('gulp-less');	        // less编译
var autoprefixer = require('gulp-autoprefixer');	// 自动添加CSS前缀

gulp.task('css_main', function(){
    return gulp.src('./src/css/**/*.css')
        .pipe(less())	// 编译less
		.pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false	// 是否美化
        }))
        .pipe(concat('main.min.css'))
        .pipe(gulpif(env==='build', csso()))    // 判断是否压缩压缩css
        .pipe(gulp.dest('./dist/css'));
});

.

项目地址（别忘了给星哦）

https://github.com/shiguang0116/gulp-project

相关文章

gulp构建项目（一）：环境准备及项目基础结构搭建
gulp构建项目（二）：browser-sync启本地服务并开启浏览器
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
gulp构建项目（四）：run-sequence实现逐个执行任务
gulp构建项目（五）：gulp-if条件判断及环境变量设置
gulp构建项目（六）：gulp-html-tpl处理公用模板
gulp构建项目（七）：gulp-uglify压缩js以及检查js语法错误
gulp构建项目（八）：gulp-autoprefixer、gulp-less、gulp-csso处理css
gulp构建项目（九）：gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目（十）：gulp-rev-collector-dxb添加版本号（?hash）
gulp构建项目（十一）：gulp-htmlmin压缩html
gulp构建项目（十二）：gulp-babel编译es6
gulp构建项目（十三）：babel-polyfill编译es6新增api
gulp构建项目（十四）：gulp-rename重定义打包生成文件的路径
.
gulp构建项目（附录一）：gulp发生错误时，进程挂掉的问题