Configurando CSSNext en nuestro archivo Gulp

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

Jose Ignacio Hernandez Villafuerte

student•

A mi no me funciono:
npm install --save-dev postcss-cssnext

y Use:
npm install cssnext --save-dev

Alejandro Ortegano

student•

despues de instalarlo asi como dices no puedo conectarme al gulp aqui esta mi codigo :

var gulp = require('gulp')
var postcss = require('gulp-postcss')
var cssnext = require('postcss-cssnext')
// var autoprefixer = require('autoprefixer')
var cssnested = require('postcss-nested')
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 = [
    cssnested,
    cssnext({ 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'] )

Jose Ignacio Hernandez Villafuerte

student•

Esta linea la puse de esta manera:
var cssnext = require(‘cssnext’);

Juan Diego Silva Garcia

student•

cssNext deprecated por postcss-preset-env

const { series, parallel, src, dest, watch } = require('gulp')
const postcss = require('gulp-postcss')
const cssnested = require('postcss-nested')
const postcssPresetEnv = require('postcss-preset-env')
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 = [
    cssnested,
    postcssPresetEnv({ 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)

Luis Alejandro Cortes Chacón

student•

Tuve que instalar cssnext de la siguiente forma: npm install cssnext --save-dev y funcionó. Pero a la hora de modificar el css me muestra el siguiente error

Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.15, but postcss-import uses 4.1.16. Perhaps this is the source of the error below.

events.js:182
      throw er; // Unhandled 'error' event
      ^
TypeError: styles.eachAtRule is not a function

Alejandro Ortegano

student•

@LuisCortes sigo buscando la solucion si la encuentras tu primero que yo me avisas por favor

Luis Alejandro Cortes Chacón

student•

Ok amigo está bien, igual tu si con consigues algo me avisas

CARLOS GUZMAN

student•

Pregunta: Cuando tengo un error de sintaxis en el CSS, inmediatamente me mata el proceso de gulp; debo corregir e iniciar de nuevo; quedo debo mandarle al stream para que el proceso continue y gulp siga escuchando el siguiente cambio con la corrección?... Intente con:

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

var processors=[

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

atImport(),

mixins(),

cssNested,

cssNext({browsers:['>5%','ie 8']})

];

return gulp.src('./src/css/style.css')

.pipe(postcss(processors).on('error',function(error){

console.log(error)

}))

.pipe(gulp.dest('./dist/css'))

.pipe(browserSync.stream());

});

Ya no se detiene gulp; pero deja de responder y me toca cerrarlo corregir e iniciar de nuevo gulp!. alguien pudo resolverlo?

Renato Colarusso

student•

Este curso ha generado muchas dudas. No he podido hacer ver el css aún. Y cada vez que veo el siguiente video son más problemas e incluso no hay nada de comentarios

David Camacho

student•

En que punto te quedaste? Si eres un poco más especifico te podría ayudar…

Puedes indicar en que parte te quedaste específicamente
Puedes copiar tu código
Puedes copiar el error.

Carlos Alberto Lozada Bedregal

student•

Renato14 te comento que tuve algunos problemas al comienzo del curso ya que no entendia bien como funcionaba Gulp, pero decidi no pasar a otro video sin solucionar los problemas o los errores que tenia y para eso me ayude con la pagina oficial de Gulp y de los plugins mencionados, tambien investigue mayor información en internet y viendo videos, tutoriales en youtube pude entender todo el funcionamiento de Gulp y los plugins.
En estos momentos ya puedo ver los videos sin dificultades y no se me presentan mayores dudas ni errores de compilación.
Saludos.

Daniel Muñoz Martín

student•

Necesito ayuda plis, de un dia para otro me dejo de funcionar el plugin de cssnext y me aparece un error que no lo entiendo muy bien:

Your current PostCSS version is 6.0.6, but postcss-attribute-case-insensitive uses 5.2.17. Perhaps this is the source of the error below.

events.js:160
throw er; // Unhandled ‘error’ event
^
Error: Unexpected “space” found.

que se supone que deberia de hacer ???

Diego Forero

Team Platzi•

Estas usando una versión más reciente que no es compatible, intenta instalar la versión 5.2.17 de PostCSS

Daniel Muñoz Martín

student•

Podrías decirme cual es el comando exacto para poder instalar dicha version ? muchas gracias por tu ayuda 😉

Alejandro Ortegano

student•

buenas alguien podria ayudarme a solucionar este error cuando trato de iniciar gulp me da lo siguiente :
module.js:538
throw err;
^

Error: Cannot find module 'cssnext-postcss’
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:\Users\alejandro\Desktop\PostCSS\Invie\gulpfile.js: 3:15)
at Module._compile (module.js:635:30)
at Object.Module._extensions…js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
instale npm install cssnext --save-dev xq npm install --save-dev postcss-cssnext me daba error
y este es mi codigo

var gulp = require('gulp')
var postcss = require('gulp-postcss')
var cssnext = require('postcss-cssnext')
// var autoprefixer = require('autoprefixer')
var cssnested = require('postcss-nested')
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 = [
    cssnested,
    cssnext({ 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'] )

Diego Forero

Team Platzi•

Que error te da al tratar de instalar la librería, que versión de node estas usando?

Alejandro Ortegano

student•

tengo la version 8.9.0

var gulp = require('gulp')
var postcss = require('gulp-postcss')
var cssnext = require('postcss-cssnext')
// var autoprefixer = require('autoprefixer')
var cssnested = require('postcss-nested')
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 = [
    cssnested,
    cssnext({ 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'] )

const { series, parallel, src, dest, watch } = require('gulp')
const postcss = require('gulp-postcss')
const cssnested = require('postcss-nested')
const postcssPresetEnv = require('postcss-preset-env')
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 = [
    cssnested,
    postcssPresetEnv({ 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)

Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.15, but postcss-import uses 4.1.16. Perhaps this is the source of the error below.

events.js:182
      throw er; // Unhandled 'error' event
      ^
TypeError: styles.eachAtRule is not a function

var gulp = require('gulp')
var postcss = require('gulp-postcss')
var cssnext = require('postcss-cssnext')
// var autoprefixer = require('autoprefixer')
var cssnested = require('postcss-nested')
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 = [
    cssnested,
    cssnext({ 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'] )

Configurando CSSNext en nuestro archivo Gulp

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