1
resposta

O plugin autoprefixer não funciona no transition, funciona apenas no transform

Segui todos os passos da aula, não sei a razão de não funcionar. Alguém pode me ajudar?


//gulpfile.js

var gulp = require('gulp')
  ,imagemin = require('gulp-imagemin')
  ,clean = require('gulp-clean')
  ,concat = require('gulp-concat')
  ,htmlReplace = require('gulp-html-replace')
  ,uglify = require('gulp-uglify')
  ,usemin = require('gulp-usemin')
  ,cssmin = require('gulp-cssmin')
  ,browserSync = require('browser-sync')
  ,jshint = require('gulp-jshint')
  ,jshintStylish = require('jshint-stylish')
  ,csslint = require('gulp-csslint')
  ,autoprefixer = require('gulp-autoprefixer');

gulp.task('default', ['copy'], function() {
    gulp.start('build-img', 'usemin');
});

gulp.task('copy', ['clean'], function() {
    return gulp.src('src/**/*')
        .pipe(gulp.dest('dist'));
});

gulp.task('clean', function() {
    return gulp.src('dist')
        .pipe(clean());
});

gulp.task('build-img', function() {

    return gulp.src('dist/img/**/*')
      .pipe(imagemin())
      .pipe(gulp.dest('dist/img'));
});

gulp.task('usemin', function() {
    return gulp.src('dist/**/*.html')
      .pipe(usemin({
        js: [uglify],
        css: [autoprefixer]
      }))
      .pipe(gulp.dest('dist'));
});

gulp.task('server', function() {

    browserSync.init({
        server: {
            baseDir: 'src'
        }
    });
    gulp.watch('src/js/*.js').on('change', function(event){
        gulp.src(event.path)
            .pipe(jshint())
            .pipe(jshint.reporter(jshintStylish));
    }); 

    gulp.watch('src/css/*.css').on('change', function(event){
        gulp.src(event.path)
            .pipe(csslint())
            .pipe(csslint.reporter());
    }); 

    gulp.watch('src/**/*').on('change', browserSync.reload);   
});
//package.json

{
  "name": "projeto",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.24.4",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.0.2",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.6.1",
    "gulp-csslint": "^0.2.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-html-replace": "^1.6.2",
    "gulp-imagemin": "^2.3.0",
    "gulp-jshint": "^1.11.2",
    "gulp-uglify": "^1.5.4",
    "gulp-usemin": "^0.3.29",
    "jshint-stylish": "^2.0.1"
  }
}
//trecho de exemplo do index.min.css


.painel li:hover {
  background-color: rgba(255,255,255,0.8);
  transition: all 0.7s;
}

.painel li:hover {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}

.painel li:hover {
  -webkit-transform: scale(1.2) rotate(-5deg);
      -ms-transform: scale(1.2) rotate(-5deg);
          transform: scale(1.2) rotate(-5deg);
}
1 resposta

Fala aí Kauã, tudo bem? Isso pode ser um problema no autoprefixer do Gulp. Tenho um projeto configurado com o Gulp onde acontece o mesmo, para a propriedade transition não é adicionado os prefixos.

Mas, isso não é um problema, o prefixo não é mais adicionado porque a propriedade transition não precisa mais do mesmo.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software