gulp sass sourcemaps 和 autoprefixer 不工作

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']);
});

我按照相关问题的解决方案进行操作，但无法完成。这是 link ：

Answer 1

我能够实现 sourcemaps 和 autoprefix 功能所以想到分享。这是我的 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 是疯狂的引用代码类。

这是因为 gulp 中的自动前缀已损坏。尝试卸载该软件包并自行在代码中写入前缀。

希望对您有所帮助！

对我有用。

Answer 3

@Vishal 的回答是正确的。我发现将 autoprefixer 和 sourcemaps 放在一起是行不通的，ONLY 在为 sourcemap 文件指定文件夹时。

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

但是，我能够将参数传递给 autoprefixer，同时将 sourcemaps 的目标文件夹留空。在调用 autoprefixer

之前调用 write 函数也很重要
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"

gulp sass sourcemaps 和 autoprefixer 不工作

gulp sass sourcemaps and autoprefixer not working

gulp

gulp-sass

autoprefixer

gulp-sourcemaps

gulp-autoprefixer