исходные карты gulp sass и автопрефиксер не работают

Я не могу заставить автопрефиксер работать с gulp sass. Вот мой gulpfile.js:

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer({ browsers: ['last 2 versions' ]}))
    .pipe(gulp.dest('./css/'));
});
gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
gulp.task('default', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

Я следил за решением в соответствующем вопросе, но не смог это сделать. Вот ссылка: ССЫЛКА


gulp autoprefixer gulp-sass gulp-sourcemaps gulp-autoprefixer
person JS dev    schedule 10.11.2016    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Мне удалось добиться функциональности исходных карт и автопрефиксов, поэтому я подумал о совместном использовании. Вот мой gulpfile.js:

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer())
    .pipe(gulp.dest('./css/'));
});
gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
gulp.task('default', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
person JS dev    schedule 10.11.2016

arrow_upward
0
arrow_downward

@ Ответ Вишала правильный. Я обнаружил, что совместное использование autoprefixer и sourcemaps не работает, ТОЛЬКО при указании папки для файла исходной карты.

.pipe(sourcemaps.write('/assets/blahblah/blah')

Однако мне удалось передать параметры autoprefixer, оставив папку назначения для sourcemaps пустой. Также важно вызывать функцию write ДО вызова autoprefixer

    return gulp.src('assets/FOLDER/public/scss/styles.scss')
        .pipe(plumber(function (error) {
            gutil.log(error.message);
            this.emit('end');
        }))
        .pipe(sourcemaps.init())
        .pipe(sass({
            style: 'compressed',
            sourceComments: 'normal',
            errLogToConsole: true
        }))
        .pipe(sourcemaps.write())
        .pipe(autoprefixer({ browsers: ['last 2 version', 'ie 9', 'ios 6', 'android 4'], remove: false }))
        .pipe(gulp.dest('assets/FOLDER/dist/css'))
        .pipe(minifyCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('assets/FOLDER/dist/css'))
        .pipe(notify({ message: 'Styles task complete' }));
});

    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-concat": "^2.6.0",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^1.5.4",
    "gulp-sourcemaps": "^2.4.1",
    "gulp-util": "^3.0.8",
    "gulp-watch": "^5.0.1"
person Rob Scott    schedule 14.10.2019

arrow_upward
-1
arrow_downward

Попробуйте удалить пакет автопрефиксера!!

Мои исходные карты были сумасшедшими ссылками на классы кода.

Это связано с тем, что автопрефиксер поврежден в gulp. Попробуйте удалить этот пакет и самостоятельно написать префиксы в коде.

Надеюсь это поможет!

Работал на меня.

person Sergio Gómez    schedule 03.10.2019