如何使用Gulp從SASS/SCSS中縮小和Autoprefix CSS文件

Question

我對我的gulp文件有問題，無法弄清楚發生了什麼問題。

問題：autoprefixer無法按預期工作，並且它並不總是按預期正確輸出.css和.min.css文件。

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var sourcemaps = require('gulp-sourcemaps'); 
var prefix = require('gulp-autoprefixer'); 
var minify = require('gulp-minify-css'); 
var rename = require('gulp-rename'); 

var config = { 
    sassMain: 'style/Main.scss', 
    sassFiles: 'style/**/*.scss', 
    cssfiles: ['style/Main.css'], 
    dest: 'style', 
    autoprefixerOptions: { 
    browsers: ['last 2 versions', '> 5%'] 
    } 
}; 

gulp.task('compile-sass', function() { 
    return gulp.src(config.sassMain) 
     .pipe(sourcemaps.init()) 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(prefix(config.autoprefixerOptions.browsers)) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest(config.dest)) 
     .pipe(rename({ extname: '.min.css' })) 
     .pipe(minify()) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest(config.dest)) 
}); 

gulp.task('default', function() { 
    gulp.watch(config.sassFiles, ['compile-sass']); 
}); 

任何想法？

Answer 1

首先，我建議將所有源文件放入文件夾src並將文件內置到build。這個工程的下方，你可以逐步添加新的管道，看看有什麼打破它

gulpfile.js

var gulp = require('gulp') 
var sass = require('gulp-sass') 
var autoprefixer = require('gulp-autoprefixer') 
var minCss = require('gulp-minify-css') 
var rename = require('gulp-rename') 

var config = { 
    srcCss : 'src/scss/**/*.scss', 
    buildCss: 'build/css' 
} 

gulp.task('build-css', function(cb) { 
    gulp.src(config.srcCss) 

     // output non-minified CSS file 
     .pipe(sass({ 
     outputStyle : 'expanded' 
     }).on('error', sass.logError)) 
     .pipe(autoprefixer()) 
     .pipe(gulp.dest(config.buildCss)) 

     // output the minified version 
     .pipe(minCss()) 
     .pipe(rename({ extname: '.min.css' })) 
     .pipe(gulp.dest(config.buildCss)) 

    cb() 
}) 

gulp.task('watch', function(cb) { 
    gulp.watch(config.srcCss, ['build-css']) 
}) 

gulp.task('default', ['build-css', 'watch']) 

main.scss

$degrees: '50%'; 

.rotated { 
    transform: $degrees; 
} 

的package.json

{ 
    "name": "", 
    "version": "1.0.0", 
    "private": true, 
    "devDependencies": { 
    "gulp": "^3.9.0", 
    "gulp-autoprefixer": "^3.1.0", 
    "gulp-minify-css": "^1.2.2", 
    "gulp-rename": "^1.2.2", 
    "gulp-sass": "^2.1.0" 
    } 
} 

產生的文件結構

這裏是你運行$ gulp後（不包括node_modules文件夾）

$ tree -I node_modules 
. 
├── build 
│   └── css 
│    ├── main.css 
│    └── main.min.css 
├── gulpfile.js 
├── package.json 
└── src 
    └── scss 
     └── main.scss 

4 directories, 5 files 

我的環境

$ node -v 
v5.1.0 

$ npm -v 
3.3.12 

$ gulp -v 
[13:39:54] CLI version 1.0.0 
[13:39:54] Local version 3.9.0