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

我在相关问题中遵循了解决方案，但无法完成。这是链接：LINK

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

尝试删除自动前缀包！

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

这是因为gulp中的autoprefixer已损坏。尝试卸载该程序包，然后自己在代码中写前缀。

希望这会有所帮助！

为我工作。

Answer 3

@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"

gulp sass sourcemaps和autoprefixer无法正常工作

3 个答案: