gulp - gulp sass 源映射和自动前缀不工作

Question

我无法让 autoprefixer 与 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

@Vishal 的回答是正确的。我发现只有在为源映射文件指定文件夹时，才有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 包！！

我的源图是疯狂的参考代码类。

这是因为 autoprefixer 在 gulp 中已损坏。尝试卸载该软件包并自己在代码中编写前缀。

希望这可以帮助！

为我工作。