¿Cómo utilizar Stylus y Gulp?

Publicado por David Paredes el 10 de Octubre de 2016

Stylus:

Stylus es un nuevo lenguaje revolucionario, que proporciona una forma eficiente, dinámica y expresiva para generar CSS. Soporta tanto una sintáxis con sangría y estilo normal CSS.

Gulp:

GulpJS es un automatizador de tareas escrito en JavaScript y que corre bajo Node.js que sigue la misma filosofía que Grunt. GulpJS mejora en cuanto a facilidad de programación y rapidez a la hora de ejecutar las tareas.

¿Qué necesitamos para compilar nuestro Stylus?

1) Necesitamos descargar Node.js para poder instalar Gulp y Stylus.

2) Creamos un archivo llamado package.json y en el escribimos lo siguiente:

{
  "name": "Stylus",
  "version": "1.0.0",
  "description": "Creando css con Stylus",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": 'David Paredes",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-notify": "^2.2.0",
    "gulp-stylus": "^2.1.0"
  },
  "dependencies": {
    "gulp-concat": "^2.6.0",
    "gulp-concat-css": "^2.3.0",
    "gulp-uglify": "^2.0.0",
    "install": "^0.8.1",
    "npm": "^3.10.8"
  }
}

3) Abrimos nuestra Terminal, nos dirigimos a la carpeta de nuestro proyecto, ejecutamos el comando npm install y esperamos a que descarguen las dependencias.

4) Creamos un archivo llamado gulpfile.js y escribimos lo siguiente.

var gulp = require('gulp');
var notify = require('gulp-notify');
var stylus = require('gulp-stylus');

gulp.task('stylus', function () {
    return gulp.src('./path/*.styl')
      .pipe(stylus())
      .pipe(notify("Stylus se compilo correctamente!"));
});

gulp.task('watch', function () {
    gulp.watch('./path/*.styl', ['stylus']);
});

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

5) Para compilar nuestro Stylus ejecutamos el comando.

gulp

¿Cúal es la sintáxis de Stylus?

Stylus:

body
  color white
  background green
  font-size 15px

Resultado de Stylus en CSS:

body {
  color: white;
  background: green;
  font-size: 15px;
}

¿Está buscando construir o personalizar un sitio de Drupal? Escríbanos sobre su proyecto y nos pondremos en contacto con usted dentro de 48 horas.

Si desea obtener más información sobre por qué Drupal es el sistema de gestión de contenido de código abierto más utilizado en el mundo, visite drupal.org/about.