Blog

Overview

Configuring Stylus CSS Pre-Processor with Gulp and Sourcemaps

In this article we’ll go over how to configure your project to process Stylus files using Gulp. We’ll also create source map file which your browser will use to help point you in the right direction of your files when developing

In this article we’ll go over how to configure your project to process Stylus files using Gulp. We’ll also create source map file which your browser will use to help point you in the right direction of your files when developing

Installation

If you’re in a new project, with no package.json file present, you’ll want to start off by typing yarn init to get this file setup.

Now let’s get gulp installed.

yarn add gulp

Secondly, we’ll want to install gulp-stylus.

yarn add gulp-stylus

Lastly, let’s install gulp-sourcemaps, this way when we’re developing and using our development tools within the browser we’ll be able easily pin point in which file our code resides.

yarn add gulp-sourcemaps

Configuration

Now that we have our packages installed, lets start by setting up our base gulpfile.js file.