如何使用Gulp从SASS / SCSS中缩小和自动修复CSS文件

Question

I'm having trouble with my gulpfile and can't figure out what's going wrong.

Issues: autoprefixer not working as intended, and it isn't always properly outputting a .css and .min.css file as intended.

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']);
});

Any ideas?

Answer 1

First, I recommend putting all source files into folder src and built files into build . This works below, and you can incrementally add new pipes to see what breaks it

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"
  }
}

Resulting File Structure

Here's what you'll have after you run $ gulp (excludes node_modules folder)

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

4 directories, 5 files

My Environment

$ 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