How to use Stylus and Gulp?

Posted by David Paredes on October 10, 2016

Stylus:

Stylus is a revolutionary new language, which provide an efficient and expressive way to generate dynamic CSS. It supports both syntax and normal style indented CSS.

Gulp:

GulpJS is an tasks automator written in JavaScript and it runs on Node.js that follows the same philosophy as Grunt. GulpJS improves in ease the programming and speed when performing tasks.

What do we need to compile our Stylus?

1) We need to download Node.js for the Stylus and Gulp installation.

2) Create a file with the name package.json and type the following:

{
  "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) We open our terminal and we head to our project folder and run the npm install command and wait for dependencies to be download.

4) Create a file with the name gulpfile.js and write the following.

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 was compiled correctly!"));
});

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

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

5) To compile our Stylus we execute the command.

 gulp

What is the Stylus syntax ?

Stylus:

body
  color white
  background green
  font-size 15px

Stylus result in CSS:

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

Are you looking to build or customize a Drupal site? Write us about your project, and we’ll get back to you within 48 hours.

If you want to learn more about why Drupal is the most widely used open-source content management system in the world, visit drupal.org/about.