Autoprefixer: Cómo añadir vendor prefixes usando CSS standard

Clase 5 de 21 • Diseño web con PostCSS, el futuro de CSS

Sergio Zapata Donado

student•

Creo que van a tener que volver a hacer este curso, no es coincidencia que en cada video este la gente en el chat diciendo que no le funciona en ninguno de los Sistemas operativos.

Diego Forero

Team Platzi•

Si ordenas por nuevas ves que el anterior comentario es de @michiwoowebs que pudo solucionar el problema haciendo unos pequeños cambios en la configuración, esto es por los cambios de versiones en las librerías que cambian su forma de configurar.

Christian Diaz Portela Flores

student•

Concuerdo con Sergio, tienen que volver a hacer este curso, no por los errores de los cambios de versiones de las librerías (los devs estamos acostumbrados a eso), sino, porque el estándar hoy en día es WebPack. y toda la configuración y el bundle lo hace con Gulp (que siendo sinceros Gulp ya está un poco viejo).

Michel González Morales

student•

Comparto el código me funciona bien, se actualiza el archivo en la carpeta dist y se actualiza en el navegador.

var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create()

// Servidor de desarrollo
gulp.task('serve', function () {
    browserSync.init({
      server: {
        baseDir: './dist'
      }
    })
})

// Tarea para procesar el CSS

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

var processors = [
    autoprefixer({ browsers: ['>5%', 'ie 8'] })
]

return gulp.src('./src/invie.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dist/css'))
    .pipe(browserSync.stream())
})

// Tarea para vigilar los cambios
gulp.task('watch', function () {
    gulp.watch('./src/*.css', ['css'])
    gulp.watch('./dist/*.html').on('change', browserSync.reload)
})
  
gulp.task('default', ['watch', 'serve'])```

Carlos Jesús Mestanza Jacobo

student•

Pues no me corrio la actualizacion del css y la terminal no me detecta los cambios, alguna ayuda?

var gulp = require('gulp')
var postcss = require('gulp-postcss')
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create()

//Servidor de desarrollo

gulp.task('server', function () { 
	browserSync.init({
		server: {
			baseDir: './dist'
		}
	})
})

// Tarea para procesar el css

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

	var processors = [
		autoprefixer({browsers:'last 5 versions'})
	]
	return gulp.src('./src/*.css')
		.pipe(postcss(processors))
		.pipe(gulp.dest('./dist/css'))
		.pipe(browserSync.stream()) 
})

// tarea para vigilar los cambios

gulp.task('watch', function () {
gulp.watch('./src/*.css', ['css'])
gulp.watch('./dist/*.html').on('change', browserSync.reload)

})

gulp.task('default', ['watch', 'server'])

Juan Carlos Rueda Diaz

student•

gulp.task(‘server’
=> gulp.task(‘serve’

gulp.task(‘default’, [‘watch’, ‘server’’]
=>gulp.task(‘default’, [‘watch’, ‘serve’’]

Rafnix Gabriel Guzmán Garcia

student•

incluye css en la tarea default!

gulp.task('default', ['watch', 'server','css'])

Daniel Muñoz Martín

student•

Necesito ayuda tengo un problema con el fichero css de la carpeta dist no me reescribe ese fichero y no entiendo porque…no encuentro ningun error en el codigo pero seguro que hay algo que se me pasa a ver si me pueden ayudar muchas gracias este es el codigo.

gulp.task('css', function(){
  var processor = [
    autoprefixer({
      browsers: ['> 5%', 'ie 8']
    })
  ]
  return gulp.src('./src/*.css')
    .pipe(postcss(processor))
    .pipe(gulp.dest('./dist/css'))
    .pipe(browserSync.stream())
})

// Tarea para vigilar los cambos
gulp.task('watch', function(){
  gulp.watch('./src/*.css', ['css'])
  gulp.watch('./dist/*.html').on('change', browserSync.reload)
})

gulp.task('default', ['watch', 'serve', 'css'])

David Camacho

student•

No es necesario que agregues la tarea css en la tarea default ya que en la tarea ‘watch’ estas incluyendo la tarea de css y estas incluyendo una tarea de reload para todos los archivos html.

Verifica que tengas instalado cssnested y cssnext.

Alejandro Ortegano

student•

aqui esta la mi codigo solucionado

var gulp = require('gulp')
var postcss = require('gulp-postcss')
var browserSync = require('browser-sync').create()

//Servidor de desarrollo
gulp.task('serve', function () {
   browserSync.init({
       server: {
           baseDir: './dist'
        }
   })
})

//Tarea para procesar el CSS
gulp.task('css', function () {
    
    var processors = []

    return gulp.src('src/*.css')
      .pipe(postcss(processors))
      .pipe(gulp.dest('dist/css'))
      .pipe(browserSync.stream())
})

// Tarea para vigilar los cambios
gulp.task('watch', function () {
    gulp.watch('./src/*.css', ['css'])
    gulp.watch('./dist/*.html').on('change', browserSync.reload)
})

gulp.task('default', ['watch' , 'serve'] )

//```

Juan Diego Silva Garcia

student•

const { series, parallel, src, dest, watch } = require('gulp')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')
const browsersync = require('browser-sync').create()

//server stactic
function browserSync(done) {
  browsersync.init({
    server: {
      baseDir: './dist'
    },
    port: 3000
  })
  done()
}

// BrowserSync Reload
function browserSyncReload(done) {
  browsersync.reload();
  done();
}

// Tarea para procesar el css
function css() {
  var processors = [
    autoprefixer({ overrideBrowserslist: 'last 5 versions'})
  ]
  return src('src/*.css')
    .pipe(postcss(processors))
    .pipe(dest('dist/css'))
    .pipe(browsersync.stream())
}

//Vigilar cambios
function watchFiles() {
  watch('./src/*.css', css)
  watch('./dist/*.html').on('change', browserSyncReload)
}

//unificar las tareas
const watcher = parallel(watchFiles, browserSync)

//exportar cambios
exports.default = series(css, watcher)

Erick Neftalí Sarmiento Cortes

student•

Todo se ve genial y esta excelente la herramienta pero no pude actualizar el npm, me manda error, voy a hacerlo desde cero en un SO nuevo para ver cual fue el problema, supongo que tengo demasiadas cosas ya instaladas aquí.

Erick Neftalí Sarmiento Cortes

student•

postcss@1.0.0 /media/mychip/UUI/Documentos/Programacion/CURSO/PostCSS
+-- caniuse-lite@1.0.30000680  extraneous
+-- normalize-range@0.1.2  extraneous
+-- num2fraction@1.2.2  extraneous
+-- postcss@6.0.1  extraneous
`-- postcss-value-parser@3.3.0  extraneous

npm WARN postcss@1.0.0 No repository field.
npm ERR! Linux 3.19.0-32-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "--save-dev" "gulp-autoprefixer"
npm ERR! node v6.2.0
npm ERR! npm  v3.8.9
npm ERR! path ../browserslist/cli.js
npm ERR! code EPERM
npm ERR! errno -1
npm ERR! syscall symlink

npm ERR! Error: EPERM: operation not permitted, symlink '../browserslist/cli.js' -> '/media/mychip/UUI/Documentos/Programacion/CURSO/PostCSS/node_modules/.bin/browserslist'
npm ERR!     at Error (native)
npm ERR!  { Error: EPERM: operation not permitted, symlink '../browserslist/cli.js' -> '/media/mychip/UUI/Documentos/Programacion/CURSO/PostCSS/node_modules/.bin/browserslist'
npm ERR!     at Error (native)
npm ERR!   errno: -1,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'symlink',
npm ERR!   path: '../browserslist/cli.js',
npm ERR!   dest: '/media/mychip/UUI/Documentos/Programacion/CURSO/PostCSS/node_modules/.bin/browserslist',
npm ERR!   parent: 'postcss' }
npm ERR! 
npm ERR! Please try running this command again as root/Administrator.

npm ERR! Please include the following file with any support request:
npm ERR!     /media/mychip/UUI/Documentos/Programacion/CURSO/PostCSS/npm-debug.log

Erick Neftalí Sarmiento Cortes

student•

me cambie de maquina y lo hice desde el principio y ahora quien me puede ayudar porque no veo error en mi código y no cambia nada:

var gulp = require('gulp')
var postcss = require('gulp-postcss')
var browserSync = require('browser-sync').create()

//Servidor de desarrollo
gulp.task('serve', function(){
  browserSync.init({
    server: {
      baseDir: './dist'
    }
  })
})

//Ptarea para procesar el CSS
gulp.task('css', function(){

  var processors = []

  return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dist/css'))
    .pipe(browserSync.stream())
})

// Tarea para vigilar los cambios
gulp.task('watch', function(){
  gulp.watch('./src/*.css', ['css'])
  gulp.watch('./dist/*.html').on('change', browserSync.reload)
})

gulp.task('default', ['watch', 'serve'])

Emiliano Durán

student•

No me funciona el código como está en el video:

autoprefixer({browsers:'last 5 versions'}) // esto si funciona y concuerda con la documentación de NPM

Abrazoooo!!!

Emiliano Durán

student•

https://www.npmjs.com/package/gulp-autoprefixer

Jhonny Stiven Agudelo Tenorio

student•

a quien le ha funcionado el codigo como el profesor lo hace, si copio el codigo de alguien de la clase pasada funciona pero al colocarle el autoprefixer ahi llega todo, lo coloco como el profesor lo tiene y nada funciona

Jhonny Stiven Agudelo Tenorio

student•

![](

Diego Forero

Team Platzi•

Tienes un error de digitación y el mismo error te dice, en la linea 22 de tu archivo cambia browser por browsers

https://platzi.com/clases/postcss/concepto/postcss-y-cssnext/autoprefixer-como-anadir-vendor-prefixes-usando-cs/material/?time=144

Jhonny Stiven Agudelo Tenorio

student•

muchas gracias,

Luis Miguel Ruiz Martinez

student•

esto no funciona en w10? :c

Diego Forero

Team Platzi•

Qué problema tienes?, todo debe funcionar en Windows.

Ivan Cardozo

student•

no anda el codigo

gulpfile.js:

var gulp = require('gulp')
var postcss = require('gulp-postcss')
var autoprefixer = require('autoprefixer')
var browserSync = require('browser-sync').create()

//Servidor de desarrollo
gulp.task('serve', function () {
   browserSync.init({
       server: {
           baseDir: './dist'
        }
   })
})

//Tarea para procesar el CSS
gulp.task('css', function () {

    var processors = [
      autoprefixer({ browsers: ['>5%' , 'ie 8'] } )
    ]

    return gulp.src('src/*.css')
      .pipe(postcss(processors))
      .pipe(gulp.dest('dist/css'))
      .pipe(browserSync.stream())
})

// Tarea para vigilar los cambios
gulp.task('watch', function () {
    gulp.watch('./src/*.css', ['css'])
    gulp.watch('./dist/*.html').on('change', browserSync.reload)
})

gulp.task('default', ['watch' , 'serve'] )

css file:

body{
  background: brown;
}
.classTest{
  display: flex;
  transition: all 0.3s ease;
  
}

Ivan Cardozo

student•

osea anda pero el css de dist no hace lo que se supone deberia hacer

body{
  background: brown;
}
.classTest{
  display: flex;
  transition: all 0.3s ease;
  
}

Muestra lo mismo , ya intente incluso reiniciar gulp y nada

Diego Forero

Team Platzi•

Este curso ya esta marcado como obsoleto porque muchas de las librerías se actualizaron, te recomiendo que tomes la nueva versión del curso https://platzi.com/cursos/postcss

Francisco Jherson Huacho Inga

student•

Con este código me funciono:

var postcss = require('gulp-postcss');
var browserSync = require('browser-sync').create();
var autoprefixer = require('autoprefixer'); //plugin de postcss

// Servidor de Desarrollo
gulp.task('serve', function(){
  browserSync.init({
    server: {
      baseDir: './dist'
    }
  });
});

// Tarea para procesar el css
gulp.task('css', function(){
  var processors = [
    autoprefixer({browsers: ['last 2 version']}),
  ] //un array de plugins (poner en ordem)
  return gulp.src('./src/*.css')
          .pipe(postcss(processors))
          .pipe(gulp.dest('./dist/css'))
          .pipe(browserSync.stream());
});

// Tarea para vigilar los cambios
gulp.task('watch', function(){
  gulp.watch("./src/*.css", ['css']).on('change', browserSync.reload)
  gulp.watch("./dist/*.html").on('change', browserSync.reload)
});

gulp.task('default', ['serve', 'css', 'watch']);

Autoprefixer: Cómo añadir vendor prefixes usando CSS standard

El futuro de CSS con PostCSS y CSSNext

Bienvenidos al modulo de PostCSS

¿Qué es PostCSS ?

Nomenclatura BEM ( Bloque, Elemento, Modificador )

Configurando nuestras tareas en Gulp: Servidor, Procesamiento de CSS y Watch

Autoprefixer: Cómo añadir vendor prefixes usando CSS standard

Anidando clases de CSS con Nested

Configurando CSSNext en nuestro archivo Gulp

Propiedades personalizadas

Usando Calc

Media queries personalizadas

Manejo de color

Manejo de filtros

Mixins: Cómo reutilizar estilos de CSS

Separando nuestros archivos CSS y uso de @import

Implementando un carousel con CSS Scroll Snap

Grids responsive con Lost

Minificando archivos con CSSWring

Fuentes responsive con rucksack

Unificando media-queries con Mqpacker

Conclusiones de PostCSS

Desafio 1

Desafio 2