标签: gulp-autoprefixer

我正在使用[Metronic v6.03]

我遵循了有关文档的快速入门教程。 https://keenthemes.com/metronic/?page=docs

如果我输入命令“ gulp build”，则会收到一条消息：

“将Autoprefixer浏览器选项替换为Browserslist配置。使用package.json或.browserslistrc文件中的browserslist键。

使用浏览器选项会导致一些错误。Browserslist配置可用于Babel，Autoprefixer，postcss-normalize和其他工具。

如果您确实需要使用选项，请将其重命名为overrideBrowserslist。

了解更多信息：https : //github.com/browserslist/browserslist#readme https://twitter.com/browserslist ”

主题无法正确编译。

NPM版本：6.9.0

纱线版本：1.16.0

Gulb版本

命令行：2.2.0

本地版本：4.0.2

我将package.json上的浏览器列表更改为

“浏览者列表”：[

"last 1 version",

"> 1%",

"maintained node versions",

"not dead"

]

并尝试将行替换为：

“浏览者列表”：[

"defaults"

]

在Linux上，我在上面添加了文件.browserslistrc。

我是Gulp的新手,之前从未使用任何插件,所以我有点迷失.

我已经按照一些教程进行了操作,并设法让Gulp运行并使用auto-prefixer插件.我现在只是试图找出是否有办法让它成为所有浏览器的所有版本的前缀？

在这个浏览器列表中,我可以选择所有主要浏览器的最后两个版本或一系列版本,但我想选择所有浏览器的所有版本(主要和其他).我特别想添加对默认三星浏览器的支持,因为我现在遇到一些浏览器兼容性问题,并希望一些前缀可能是解决方案.

这是我到目前为止的代码:

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

gulp.task('prefix', function () {
    gulp.src('css/**/*.css')
        .pipe(prefix('last 2 versions'))
        .pipe(gulp.dest('css/'));
});

gulp.task('default', ['prefix']);

谢谢

我只是不能让gulp-autoprefixer工作.我用过渡测试它但是当我保存我的scss文件时,前缀不会显示在我的css文件中.其他一切似乎都很好.

这是我的gulp文件:

var gulp = require('gulp'),
    plumber = require('gulp-plumber'),
    rename = require('gulp-rename'),
    autoprefixer = require('gulp-autoprefixer'),
    imagemin = require('gulp-imagemin'),
    cache = require('gulp-cache'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
  browserSync({
    server: {
       baseDir: "./"
    }
  });
});

gulp.task('bs-reload', function () {
  browserSync.reload();
});

gulp.task('images', function(){
  gulp.src('build/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('images/'));
});

gulp.task('styles', function(){
  gulp.src(['scss/**/*.scss'])
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(sass())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(gulp.dest('css/'))
    .pipe(browserSync.reload({stream:true}))
});


gulp.task('default', ['browser-sync'], function(){
  gulp.watch("scss/**/*.scss", ['styles']); …

我正在使用Gulp并且已经使用了Gulp Autoprefixer独立版本，例如：

gulp.task('styles', function() {
    gulp.src('scss/**/*.scss')
        //.................
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: [
              //..........
            ],
        }))
        //............
});

...但是随后我看到了Gulp Postcss插件，该插件似乎包装了非Gulp自动前缀的用法，例如：

gulp.task('styles', function() {
    gulp.src('scss/**/*.scss')
    //.................
            .pipe(sass())
            .pipe(postcss([
                autoprefixer({
                    browsers: [
                        //.......
                    ],
                }),
            ]))
    //............
});

有什么不同？

其他线程（例如此 GitHub 问题）向我表明，我的问题可能是我在 gulpfile 中使用的另一个工具可能会第二次运行 autoprefixer 本身并删除-webkit-flex，但我不确定从哪里开始这个想法。

下面我将张贴我的整个gulpfile，但它基本上是找到了一个非常定制版本BourbonSage这是一个叉贤者。

// ## Globals
var argv         = require('minimist')(process.argv.slice(2));
var autoprefixer = require('gulp-autoprefixer');
var browserSync  = require('browser-sync').create();
var changed      = require('gulp-changed');
var concat       = require('gulp-concat');
var flatten      = require('gulp-flatten');
var gulp         = require('gulp');
var gulpif       = require('gulp-if');
var imagemin     = require('gulp-imagemin');
var jshint       = require('gulp-jshint');
var lazypipe     = require('lazypipe');
var less         = require('gulp-less');
var merge        = require('merge-stream');
var cssNano      = require('gulp-cssnano');
var plumber      = require('gulp-plumber');
var …

我正在从 gulp-ruby-sass 切换到 gulp-sass。Gulp ruby​​ sass 运行没有错误，但为了让我们的 Windows 开发人员的生活更轻松，我试图消除对 Ruby 的依赖。

我在设置我的 gulp 文件时安装了这些软件包，如下所示：

    var sassFiles = './app/assets/sass/**/*.{scss,sass}';
    var cssFiles = './app/assets/css';
    var sassOptions = {
      errLogToConsole: true,
      outputStyle: 'compact'
    };
    var autoprefixerOptions = {
      browsers: ['last 2 versions']
    };


  gulp.task('sass', function () {
     return gulp
    .src(sassFiles)
    .pipe(sourcemaps.init())
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(cssFiles))
    .pipe(browserSync.stream());
});

除了每次都失败在我的文件中的评论：

[08:20:39] Starting 'sass'...

events.js:154
  throw er; // Unhandled 'error' event
  ^
 CssSyntaxError: /Users/stevelombardi/github/designsystem-  3/app/assets/sass/design_system.scss:1:1: Unknown word
 ////
 ^
/// This is a poster comment. …