Configurando postCSS en Gulp

El 25 de noviembre de 2015

Archivado en: CSS postCSS Gulp

Ayer contaba mi corta pero exitosa historia con postCSS. En el artículo comentaba que utilizo postCSS con Gulp. En este artículo voy a profundizar en como añadir postCSS a Gulp desde el principio hasta el final. Si ya has trabajado con Gulp seguramente todo esto te resultará familiar.

Soy usuario de OSX así voy a hacer todo tirando de iTerm2.

Creando el proyecto y su estructura

Voy a empezar creando el proyecto con todos sus directorios. Lo podéis hacer a manopla creando carpeta y archivos. Yo lo voy a hacer a lo viejuno(también es más rápido) tirando de cli.

mkdir gulp-postcss

cd gulp-postcss

mkdir dist

mkdir src

touch index.html

touch gulpfile.js

cd dist

mkdir css

cd css

touch styles.css

cd ..

cd ..

cd src

mkdir css

cd css

touch styles.css

Npm

Vamos a empezar a instalar todo lo necesario. Para aquellos que no tengan instalado Gulp, vamos a instalarlo de forma global, para ello vamos a escribir en el terminal

npm install -g gulp

Ahora nos vamos a la carpeta que hemos creado y vamos a escribir lo siguiente

npm init

En el terminal nos va a ir saliendo una serie de campos que vamos a ir rellenando y que más tarde se verán reflejados en el package.json que nos ha creado el npm init

Ahora vamos a empezar a instalar dependencias. La primera de ellas Gulp

npm install --save-dev gulp

Escribiendo –save-dev agregará este paquete como un dependencia a nuestro proyecto, y también lo añadirá al package.json

Gulpfile

Ahora vamos a abrir Gulpfile.js con un IDE, en mi caso Sublime Text 3. Una vez abierto vamos a escribir lo siguiente

var gulp = require('gulp');

gulp-postcss

Ahora vamos a instalar gulp-postcss. Volvemos a nuestra ventana del terminal

npm install --save-dev gulp-postcss

Y en nuestro gulpfile.js añadimos lo siguiente

var gulp = require('gulp');
var postcss = require('gulp-postcss');

gulp.task('css', function () {
    var processors = [
        //Aqui irán los plugins que vayamos instalando
    ];
    //Aquí la ruta de donde coge nuestros css
    return gulp.src('./src/css/styles.css')
        .pipe(postcss(processors))
        //Aqui la ruta de destino
        .pipe(gulp.dest('./dist/css'));
});

Vamos a instalar todos los paquetes que vamos a utilizar del tirón. Y luego lo vamos a añadir todo a nuestro gulpfile.js

npm install --save-dev gulp-autoprefixer

npm install --save-dev postcss-pxtorem

npm install rucksack-css --save-dev

npm install --save-dev postcss-nested

npm install --save-dev postcss-simple-vars

Ahora vamos a volver a abrir nuestro gulpfile.js y vamos a ir añadiendo todos los paquetes que hemos instalado anteriormente. A algunos plugins les podemos pasar opciones, en este caso vamos configurar pxtorem, que el valor de root sea 16, que lo transforme solo con dos decimales, y que solo transforme de px a rem las propiedades: font-size line-height padding

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('gulp-autoprefixer');
var vars = require('postcss-simple-vars');
var nested = require('postcss-nested');
var rucksack = require('gulp-rucksack');
var pxtorem = require('postcss-pxtorem');

gulp.task('css', function() {
    var processors = [
        vars,
        nested,
        rucksack,
        pxtorem({
            root_value: 16,
            unit_precision: 2,
            prop_white_list: ['font-size', 'line-height', 'padding'],
            replace: true,
            media_query: false
        }),
        autoprefixer({
            browsers: ['last 2 version']
        })
    ];
    //Aquí la ruta de donde coge nuestros css
    return gulp.src('./src/css/styles.css')
        .pipe(rucksack())
        .pipe(postcss(processors))
        //Aqui la ruta de destino
        .pipe(gulp.dest('./dist/css'));
});

Y ya por último vamos a instalar y activar los sourcemaps.

npm install --save-dev gulp-sourcemaps

Vamos a nuestro gulpfile.js y vamos a añadir dos .pipe()

return gulp.src('./src/css/styles.css')
    .pipe(rucksack())
    .pipe(sourcemaps.init())
    .pipe(postcss(processors))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dist/css'));

Comenzando a escribir

Ahora vamos al terminal y escribimos lo siguiente

gulp css

Si esta todo bien nos debería de salir el siguiente mensaje en el terminal

Starting 'css'...
Finished 'css' after 14 ms

Ahora vamos a nuestro styles.css y por fin empezamos a escribir líneas de CSS :d

Vamos a utilizar el plugin de las variables como SASS

//Utilizando las variables
$color-background: #001F3F;
$color-texto: #FFDC00;

Vamos a crear @alias con Rucksack. Uno para la propiedad background-color y otro para el box-sizing. Esta funcionalidad del plugin es difícil de utilizar para aquellos que somos adictos a emmet y todos sus shorthands.

//Creando alias con rucksack
@alias {
  bgc: background-color;
  bxz: box-sizing;
  bbx: border-box;
}

body {
    //Utilizando un alias creado con rucksack, también una variable
    bgc: $color-background;
}

Los valores de las siguientes propiedades serán transformados de pixel a REM.

//El pixel del padding se transformara en REM
padding: 0 20px;
//El pixel del font-size se transformara en REM
font-size: 16px;
//El pixel del line-height se transformara en REM
line-height: 20px;

Y ya por último vamos a anidar como SASS

//Nested como SASS & pxtorem
section {
    width: 80%;
    margin: 0 auto;
    font-size: 0;
    article {
        width: 50%;
        display: inline-block;
        //Utilizando un alias creado con rucksack
        bxz: bbx;
        //El pixel del padding se transformara en REM
        padding: 0 20px;
        font-family: Arial, sans-serif;
        //El pixel del font-size se transformara en REM
        font-size: 16px;
        //El pixel del line-height se transformara en REM
        line-height: 20px;
        color: $color-texto;
    }
}

IO

Ahora vamos a ver las diferencias entre lo que hemos escrito en nuestro src/css/styles.css y lo que ha generado postCSS en dist/css/styles.css

src/css/styles.css

//Utilizando las variables
$color-background: #001F3F;
$color-texto: #FFDC00;

//Creando alias con rucksack
@alias {
  bgc: background-color;
  bxz: box-sizing;
  bbx: border-box;
}

body {
    //Utilizando un alias creado con rucksack, también una variable
    bgc: $color-background;
}


//Nested como SASS & pxtorem
section {
    width: 80%;
    margin: 0 auto;
    font-size: 0;
    article {
        width: 50%;
        display: inline-block;
        //Utilizando un alias creado con rucksack
        bxz: bbx;
        //El pixel del padding se transformara en REM
        padding: 0 20px;
        font-family: Arial, sans-serif;
        //El pixel del font-size se transformara en REM
        font-size: 16px;
        //El pixel del line-height se transformara en REM
        line-height: 20px;
        color: $color-texto;
    }
}

dist/css/styles.css

body {
    background-color: #001F3F;
}

section {
    width: 80%;
    margin: 0 auto;
    font-size: 0;
}

section article {
    width: 50%;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 1.25rem;
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.25rem;
    color: #FFDC00;
}

Todo el código del artículo lo tenéis a vuestra disposición en GitHub

SCALABLE, un libro sobre SVGA lo largo de 15 capítulos, 120 páginas y más de 70 ejemplos vamos a ver todo lo que podemos hacer con SVG. Tu pones el precio, disponible desde 0$ para descargar desde LeanPub(PDF, ePUB y MOBI).

Artículo posterior Artículo anterior