[TOC] ## 编译sass、自动添加css前缀和压缩 1. 安装插件 `npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-notify gulp-rename --save-dev ` ### 方式一: 配置gulpfile.js ``` var gulp = require('gulp'), sass = require('gulp-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), rename = require('gulp-rename'), notify = require('gulp-notify'); gulp.task('styles', function() { return gulp.src('*.scss') //src 的参数可以是数组[main.scss, vender.scss],也可以是正则 /**/*.scss .pipe(sass()) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) .pipe(gulp.dest('dist/assets/css')) .pipe(rename({suffix: '.min'})) .pipe(minifycss()) .pipe(gulp.dest('dist/assets/css')) .pipe(notify({ message: 'Styles task complete' })); }); ``` 执行 `gulp styles` ### 方式二 ``` const {src,dest} = require('gulp'), sass = require('gulp-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), rename = require('gulp-rename'), notify = require('gulp-notify'); function style(){ return src('src/*.scss') //src 的参数可以是数组[main.scss, vender.scss],也可以是正则 /**/*.scss .pipe(sass()) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) .pipe(dest('dist/assets/css')) .pipe(rename({suffix: '.min'})) .pipe(minifycss()) .pipe(dest('dist/assets/css')) .pipe(notify({ message: 'Styles task complete' })); } // exports.default = style //执行 gulp exports.style = style ```