Как запустить autoprefixer + sass в gulp?

Question

[GaserV]

Товарищи, подскажите пожалуйста. Я в галп еще зеленый. Как мне в консоли запустить autoprefixer + sass?

var gulp = require('gulp');

var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass',function(){
	gulp.src('./sass/*.sass')
		.pipe(sass().on('error', sass.logError))
		.pipe(gulp.dest('./css/'))
})

gulp.task('sass:watch',function(){
	gulp.watch('./sass/*.sass', ['sass'])
}

 
gulp.task('default', () =>
    gulp.src('./css/main.css')
        .pipe(autoprefixer({
            browsers: ['> 1%', 'IE 8'], 
            cascade: false
        }))
        .pipe(gulp.dest('dist'))
);

Answer 1

[sergey]

Ну или вот так, в консоли пишем gulp styles и все у вас со стилями отлично:

gulp.task('styles', function() {
    gulp.src(src.sass)
    .pipe(sass({
            "sourcemap=none": true,
            noCache: true,
            compass: true,
            style: sassStyle,
            lineNumbers: false
        }))
    .pipe(autoPrefixer())   
    .pipe(gulp.dest(outputDir + 'css'))
    .pipe(connect.reload())
});

Comments

[GaserV]

можно вас переписать скрипт относительно моего варианта, чтобы и sass копилися, и autoprefixer срабатывал? Просто в данный момент ошибки сплошные бьет

[sergey]

GaserV: ну так мой вариант как раз это и делает, касательно вашего варианта, я не вижу не структуры ни того что у вас происходит, какие ошибки выдает и почему,
но на быструю руку это примерно вот так:

gulp.task('styles',function(){
  gulp.src('./sass/*.sass')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
            browsers: ['> 1%', 'IE 8'], 
            cascade: false
        }))
    .pipe(gulp.dest('dist/css'))
})

[sergey]

GaserV: но повторюсь я не вижу вашей структуры и не понимаю идеи как у вас это должно работать

[GaserV]

SM: точнее вот такая структура.. Ляпнул не то)
var gulp = require('gulp');

var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass',function(){
gulp.src('./sass/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css/'))
.pipe(autoprefixer({
browsers: ['> 1%', 'IE 7'],
cascade: false
}))
})

gulp.task('sass:watch',function(){
gulp.watch('./sass/*.sass', ['sass'])
})

[GaserV]

но тем не менее, sass компилит, а вот prefixer не срабатывает

[Андрей Прозоров]

GaserV: 1) вы сначала записываете css коммандой .pipe(gulp.dest('./css/')) потом берете поток, проходите префикисром и уже никуда не записываете.
2) мне сильно кажеться что без иснтрукции 'last 2 version' autoprefixer ничего делать не будет.

я сделал вот так и у меня работает:

gulp.task('compass', ['cleancss'], function() {
  gulp.src('./develop/scss/**/*.scss')
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(compass({
      config_file: './config.rb',
    sourcemap: true,
          css: 'develop/css',
          sass: 'develop/scss'
    }))
    .on('error', function(error){
      console.log(error);
    })
    .pipe(autoprefixer({browsers: ['last 2 version', '> 2%', 'firefox 15', 'safari 5', 'ie 6', 'ie 7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']}))
   .pipe(gulp.dest('./develop/css'))
   .pipe(reload({stream:true}));		
  
});

.pipe(gulp.dest('./develop/css')) после .pipe autoprefixer