gapp sass sourcemaps и авторефикс не работают

Question

Я не могу заставить работать автоматический префикс с 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']);
});

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

Answer 1

Я смог достичь исходных карт и функциональности авторефикса, поэтому подумал о совместном использовании. Вот мой 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']);
});

Answer 2

@ Ответ Вишала правильный. Я обнаружил, что имея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"

Answer 3

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

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

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

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

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