автопрефикс gulpfile должен измениться на postcss

Я только недавно получил эти ошибки, когда мой Gulp говорит, что мне нужно изменить свой gulp-autoprefixer на postcss.

Но поскольку я получил этот gulpfile только с генератором Quench, я понятия не имею, как его изменить, чтобы автопрефиксер снова работал. Кто-нибудь может подробно рассказать, как это изменить?

Мой глоток:

var gulp = require('gulp'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');

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

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


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


gulp.task('default', ['browser-sync'], function(){
  gulp.watch("src/css/*.sass", ['styles']);
  gulp.watch("src/css/*.scss", ['styles']);
  gulp.watch("*.html", ['bs-reload']);
});

Мой пакет.json:

"name": "Quench",
  "version": "1.0.0",
  "description": "A Gulp file and project generator.",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Quench",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "2.6.5",
    "gulp": "3.8.11",
    "gulp-autoprefixer": "2.1.0",
    "gulp-babel": "5.1.0",
    "gulp-concat": "2.5.2",
    "gulp-minify-css": "1.0.0",
    "gulp-plumber": "1.0.0",
    "gulp-rename": "1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^3.0.0"
  }
}

postcss gulp autoprefixer gulp-autoprefixer
person SanderS    schedule 29.01.2018    source источник
comment
github.com/postcss/gulp-postcss#passing-plugins-directly   -  person Dirk    schedule 30.01.2018
comment
Хидж Дирк, спасибо за ссылку. Я уже прочитал это, но не могли бы вы объяснить, что мне нужно сделать. Я могу предположить, что нужно удалить автопрефиксер gulp и установить gulp-postcss и их автопрефиксер. Но как мне дальше отредактировать gulpfile?   -  person SanderS    schedule 30.01.2018

Ответы (1)


arrow_upward
3
arrow_downward

установить эти пакеты

npm i --save-dev gulp-postcss autoprefixer cssnano

cssnano - это postcss-версия minify, измените свой код gulp

var gulp = require('gulp'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename');
//var autoprefixer = require('gulp-autoprefixer'); /*remove*/
//var minifycss = require('gulp-minify-css'); /*remove*/
var postcss = require('gulp-postcss'); /*add*/
var autoprefixer = require('autoprefixer'); /*add*/
var cssnano = require('cssnano'); /*add*/

var sass = require('gulp-sass');
var browserSync = require('browser-sync');

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

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


gulp.task('styles', function(){
  /*add this*/
  var processors = [
    autoprefixer,
    cssnano
  ];

  gulp.src(['src/css/*.scss'])
    .pipe(plumber({
      errorHandler: function (error) {
        console.log(error.message);
        this.emit('end');
    }}))
    .pipe(sass())
    //.pipe(autoprefixer('last 2 versions')) /*remove*/
    .pipe(postcss(processors)) /*add*/
    .pipe(gulp.dest('assets/css/'))
    .pipe(rename({suffix: '.min'}))
    // .pipe(minifycss()) /*remove*/
    .pipe(gulp.dest('assets/css/'))
    .pipe(browserSync.reload({stream:true}))
});

это должно сработать, если нет, я посмотрю еще раз

person Dirk    schedule 30.01.2018
comment
Большое спасибо! С этого дня ты мой герой! - person SanderS; 01.02.2018
comment
Рад, что смог помочь - person Dirk; 01.02.2018