Gulp Autoprefixer Не Работает

Я не могу заставить Autoprefixer работать с Gulp. Я использую непрозрачность в моих CSS, градиентах и преобразованиях, и нет никаких префиксов поставщика. В противном случае, все остальное работает.

вот мой файл gulp:

var gulp = require('gulp');

var lr = require('tiny-lr');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var livereload = require('gulp-livereload');
var server = lr();
var plumber = require('gulp-plumber');

var onError = function (err) {  
  gutil.beep();
  console.log(err);
};

gulp.task('lint', function() {
    return gulp.src('js/all.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer('last 2 versions', 'safari 5', 'ie6', 'ie7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(minifycss())
        .pipe(gulp.dest(''))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});


gulp.task('scripts', function() {
    return gulp.src(['js/fittext.js', 'js/fitvids.js', 'js/snap-scroll.js', 'js/cycle-min.js', 'js/all.js', 'js/respond.js'])
        .pipe(concat('all.js'))
        .pipe(gulp.dest('js/min'))
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest('js/min'))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});

gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('**/*.php').on('change', livereload.changed);
    gulp.watch('js/*.js', ['scripts']);
    gulp.watch('scss/**/*.scss', ['sass']);  
});

gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
  • Я искал и пробовал различные решения этой проблемы без толку. Я также попытался изменить .pipe(gulp.dest('')) в определенный каталог (например,этот ответ предложил), без каких-либо удача.

Я ценю любую помощь вы можете предложить.

* обновление *

Я хотел бы отметить свою наивность на Autoprefixer, добавив префикс для непрозрачности, чего, очевидно, нет.

6
autoprefixer css gulp sass

3 ответов

этот gulpfile:

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

function onError(err) {
    console.log(err);
}

gulp.task('sass', function(){
    return gulp.src('src/style.scss')
        .pipe(sass())
        .pipe(prefix('last 2 versions'))
        .pipe(minify())
        .pipe(gulp.dest('css/'))
        .pipe(plumber({
            errorHandler: onError
        }))
});

С этим scss:

body {
    opacity: .5;
    box-sizing: border-box;
    transform: scale(.5);
    display: flex;
}

производит этот выход:

body{opacity:.5;box-sizing:border-box;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}

Итак, я не уверен, что я делаю по-другому, за исключением того, что я перечисляю свои браузеры по-разному. Но я предполагаю, что вы пытались удалить их и т. д.

10

Это должно работать, помещая браузеры в массив, а не в качестве аргументов:

.pipe(autoprefixer({
    browsers: ['last 2 version', 'safari 5', 'ie6', 'ie7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
})

и вы можете добавить каскад, установив его в true или false cascade: false

3

первое, что я вижу, это:

.pipe(autoprefixer('last 2 versions'))

небольшое изменение синтаксиса:

.pipe(autoprefixer('last 2 version'))

помимо этого, у меня был успех, по трубопроводу скомпилированного sass к месту назначения, а затем запуск autoprefixer.

.pipe(sass())
.pipe(gulp.dest(''))
.pipe(autoprefixer())
-1