CSS Gulp 自动前缀不工作

Gulp Autoprefixer Not Working

提问by shooghkirk

I'm unable to get Autoprefixer to work with Gulp. I'm using opacity in my CSS, gradients, and transforms and there aren't any vendor prefixes showing up. Otherwise, everything else is working.

我无法让 Autoprefixer 与 Gulp 一起工作。我在 CSS、渐变和转换中使用了不透明度，但没有显示任何供应商前缀。否则，其他一切都在工作。

Here's my gulp file:

这是我的 gulp 文件：

var gulp = require('gulp');

var lr = require('tiny-lr');
var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var livereload = require('gulp-livereload');
var server = lr();
var plumber = require('gulp-plumber');

var onError = function (err) {  
  gutil.beep();
  console.log(err);
};

gulp.task('lint', function() {
    return gulp.src('js/all.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer('last 2 versions', 'safari 5', 'ie6', 'ie7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(minifycss())
        .pipe(gulp.dest(''))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});


gulp.task('scripts', function() {
    return gulp.src(['js/fittext.js', 'js/fitvids.js', 'js/snap-scroll.js', 'js/cycle-min.js', 'js/all.js', 'js/respond.js'])
        .pipe(concat('all.js'))
        .pipe(gulp.dest('js/min'))
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest('js/min'))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});

gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('**/*.php').on('change', livereload.changed);
    gulp.watch('js/*.js', ['scripts']);
    gulp.watch('scss/**/*.scss', ['sass']);  
});

gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

• I've searched and tried various solutions to this problem without avail. I've also tried changing .pipe(gulp.dest(''))to a specific directory (like this answer suggested), without any luck.

• 我已经搜索并尝试了解决此问题的各种解决方案，但无济于事。我也尝试更改.pipe(gulp.dest(''))到特定目录（如建议的这个答案），但没有任何运气。

I appreciate any help you can offer.

我很感激你能提供的任何帮助。

* UPDATE *

* 更新 *

I'd like to note my naivety on Autoprefixer adding a prefix for opacity, which it obviously does not.

我想指出我对 Autoprefixer 添加不透明度前缀的幼稚，这显然没有。

回答by donnywals

This gulpfile:

这个 gulpfile：

var gulp = require('gulp');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var plumber = require('gulp-plumber');

function onError(err) {
    console.log(err);
}

gulp.task('sass', function(){
    return gulp.src('src/style.scss')
        .pipe(sass())
        .pipe(prefix('last 2 versions'))
        .pipe(minify())
        .pipe(gulp.dest('css/'))
        .pipe(plumber({
            errorHandler: onError
        }))
});

With this scss:

有了这个scss：

body {
    opacity: .5;
    box-sizing: border-box;
    transform: scale(.5);
    display: flex;
}

Produces this output:

产生这个输出：

body{opacity:.5;box-sizing:border-box;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}

So, I'm not sure what I'm doing different exactly except that I list my browsers differently. But I assume you've tried removing those etc.

所以，除了我以不同的方式列出浏览器之外，我不确定我在做什么完全不同。但我假设您已经尝试删除这些等。

回答by rwacarter

This should work, putting the browsers in an array, instead of as arguments:

这应该有效，将浏览器放在一个数组中，而不是作为参数：

.pipe(autoprefixer({
    browsers: ['last 2 version', 'safari 5', 'ie6', 'ie7', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
})

and you can add cascade by setting it true or false cascade: false

您可以通过将其设置为 true 或 false 来添加级联 cascade: false

回答by alljamin

I know this question was asked a while back but I have stumbled upon a similar problem.

我知道这个问题很久以前就有人问过，但我偶然发现了一个类似的问题。

Here is how I resolved it:

这是我解决它的方法：

1. Add browserlistentry to package.json:

1. 添加browserlist条目到package.json：

{
"browserslist": [
    'last 2 versions', 
    'safari 5', 
    'ie6', 
    'ie7', 
    'ie 8',
    'ie 9', 
    'opera 12.1', 
    'ios 6', 
    'android 4'
  ]
}

1. Install autoprefixer

2. 安装 autoprefixer

npm i --save-dev autoprefixer

npm i --save-dev autoprefixer

1. Install postcss

3. 安装 postcss

npm i --save-dev postcss

npm i --save-dev postcss

1. Modify the pipe in gulpfile.jsto be:

4. 将管道修改gulpfile.js为：

gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
        .pipe(sass({errLogToConsole: true}))
        .pipe(postcss([autoprefixer()]))
        .pipe(minifycss())
        .pipe(gulp.dest(''))
        .pipe(plumber({
            errorHandler: onError
        }))
        .pipe(livereload(server));
});

回答by Ataki Stanley

This should work.

这应该有效。

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function(){
    return gulp.src('css/styles.css')
   .pipe(autoprefixer('last 2 versions'))
   .pipe(gulp.dest ('build'));
});

gulp.task('watch', function(){
    gulp.watch('css/styles.css', gulp.series(['styles']));
});

回答by philipb3

The first thing that I see is:

我看到的第一件事是：

.pipe(autoprefixer('last 2 versions'))

A small change in syntax there:

那里的语法有一个小的变化：

.pipe(autoprefixer('last 2 version'))

Beyond that, I have had success by piping the compiled sass to the destination and then running autoprefixer.

除此之外，我通过将编译的 sass 管道传输到目的地然后运行 ​​autoprefixer 取得了成功。

.pipe(sass())
.pipe(gulp.dest(''))
.pipe(autoprefixer())