Autoprefixer在Gulpfile.js中不起作用

Autoprefixer doesnt work inside Gulpfile.js

本文关键字:不起作用 js Gulpfile Autoprefixer      更新时间:2023-09-26

伙计们,我在我的gulp文件中添加了Autoprefixer插件,一切都很好,但CSS不会吐出Autoprefixer CSS。我很乐意得到帮助。下面是我的gulpfile.js:

// require gulp
var gulp = require('gulp');
// require other packages
var concat = require('gulp-concat'),
    cssmin = require('gulp-minify-css'),
    rename = require("gulp-rename"),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync'),
    uglify = require('gulp-uglify'),
    changed = require('gulp-changed'),
    imagemin = require('gulp-imagemin'),
    autoprefix = require('gulp-autoprefixer');
// scripts task
gulp.task('scripts', function() {
  return gulp.src('./src/js/*.js')
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./dist/js/'))
    .pipe(uglify())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('./dist/js/'));
});
// styles task
gulp.task('styles', function() {
  return gulp.src('./src/sass/*.scss')
    .pipe(autoprefix('last 2 versions'))
    .pipe(sass())
    .pipe(gulp.dest('./dist/css/'))
    .pipe(cssmin())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('./dist/css/'));
});
// browser sync
gulp.task('browser-sync', ['styles'], function() {
    browserSync({
        server: {
            baseDir: ''
        },
        notify: false
    });
    gulp.watch("./src/sass/*.scss", ['scss']);
    gulp.watch("*.html").on('change', browserSync.reload);
});
// watch task
gulp.task('watch', function() {
  gulp.watch('./src/js/*.js', ['scripts']);
  gulp.watch('./src/sass/*.scss', ['styles']);
});
// image minification
gulp.task('imagemin', function() {
  var imgSrc = './src/img/**/*',
      imgDst = './dist/img';
  gulp.src(imgSrc)
    .pipe(changed(imgDst))
    .pipe(imagemin())
    .pipe(gulp.dest(imgDst));
});
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'imagemin', 'watch']);

我希望你们能帮助我度过这个难关。

传递给autoprefixerconfig错误。应该是

.pipe(autoprefix({
        browsers: ['last 2 versions']
    }))

参考:gulp-autoprefixer

在创建css后尝试初始化autoprefixer。

Autoprefixer对css进行修改。它不能处理sass文件。


更新

在复制新的gulpfile.js之前,在项目路径

中添加您的控制台cmd
npm install gulp-postcss autoprefixer es6-promise --save-dev

然后用autoprefixer复制新的gulpfile.js配置

// require gulp
var gulp = require('gulp');
// require other packages
var concat = require('gulp-concat'),
    cssmin = require('gulp-minify-css'),
    rename = require("gulp-rename"),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync'),
    uglify = require('gulp-uglify'),
    changed = require('gulp-changed'),
    imagemin = require('gulp-imagemin');
   // autoprefix = require('gulp-autoprefixer'); -- comment this line
// scripts task
gulp.task('scripts', function() {
  return gulp.src('./src/js/*.js')
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./dist/js/'))
    .pipe(uglify())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('./dist/js/'));
});
// styles task
gulp.task('styles', function() {
  return gulp.src('./src/sass/*.scss')
  //  .pipe(autoprefix('last 2 versions')) -- comment this line
    .pipe(sass())
    .pipe(gulp.dest('./dist/css/'))
    .pipe(cssmin())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('./dist/css/'));
});
// =========================================
// Start - Add packages / new configurations
require('es6-promise').polyfill();
var postcss      = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
gulp.task('autoprefixer', function () {
    return gulp.src(
          ['.dist/css/*.css', '!.dist/css/*.min.css']
      )
        .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
        .pipe(gulp.dest('.dist/css/'));
});
// =========================================
// End new lines
// browser sync
gulp.task('browser-sync', ['styles'], function() {
    browserSync({
        server: {
            baseDir: ''
        },
        notify: false
    });
    gulp.watch("./src/sass/*.scss", ['scss']);
    gulp.watch("*.html").on('change', browserSync.reload);
});
// watch task
gulp.task('watch', function() {
  gulp.watch('./src/js/*.js', ['scripts']);
  gulp.watch('./src/sass/*.scss', ['styles']);
});
// image minification
gulp.task('imagemin', function() {
  var imgSrc = './src/img/**/*',
      imgDst = './dist/img';
  gulp.src(imgSrc)
    .pipe(changed(imgDst))
    .pipe(imagemin())
    .pipe(gulp.dest(imgDst));
});
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'imagemin', 'watch']);

之后尝试在cmd控制台中写入

gulp autoprefixer

问候:)