[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 ```