https://github.com/stevelacy/gulp-stylus

Stylus plugin for gulp
https://github.com/stevelacy/gulp-stylus

Last synced: 2 months ago
JSON representation

Stylus plugin for gulp

• Host: GitHub
• URL: https://github.com/stevelacy/gulp-stylus
• Owner: stephenlacy
• License: mit
• Created: 2013-12-04T18:14:46.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2023-08-30T07:50:38.000Z (about 1 year ago)
• Last Synced: 2024-04-14T14:11:40.631Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 205 KB
• Stars: 222
• Watchers: 8
• Forks: 62
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# gulp-stylus

[![Build Status](https://travis-ci.org/stevelacy/gulp-stylus.png?branch=master)](https://travis-ci.org/stevelacy/gulp-stylus)

[![NPM version](https://badge.fury.io/js/gulp-stylus.png)](http://badge.fury.io/js/gulp-stylus)

> Compile [Stylus](http://learnboost.github.io/stylus/) with gulp (gulpjs.com)

## Information

Packagegulp-stylus

Description

Stylus plugin for gulp

Node Version

>= 0.9

Gulp Version

>= 3.x

## Usage

#### Install

```sh

$ npm install --save-dev gulp-stylus

```

## Examples

```javascript

// include the required packages.

var gulp = require('gulp');

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

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

// include, if you want to work with sourcemaps

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

// Get one .styl file and render

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

  return gulp.src('./css/one.styl')

    .pipe(stylus())

    .pipe(gulp.dest('./css/build'));

});

// Options

// Options compress

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

  return gulp.src('./css/compressed.styl')

    .pipe(stylus({

      compress: true

    }))

    .pipe(gulp.dest('./css/build'));

});

// Set linenos

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

  return gulp.src('./css/linenos.styl')

    .pipe(stylus({linenos: true}))

    .pipe(gulp.dest('./css/build'));

});

// Include css

// Stylus has an awkward and perplexing 'include css' option

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

  return gulp.src('./css/*.styl')

    .pipe(stylus({

      'include css': true

    }))

    .pipe(gulp.dest('./'));

});

// Inline sourcemaps

gulp.task('sourcemaps-inline', function () {

  return gulp.src('./css/sourcemaps-inline.styl')

    .pipe(sourcemaps.init())

    .pipe(stylus())

    .pipe(sourcemaps.write())

    .pipe(gulp.dest('./css/build'));

});

// External sourcemaps

gulp.task('sourcemaps-external', function () {

  return gulp.src('./css/sourcemaps-external.styl')

    .pipe(sourcemaps.init())

    .pipe(stylus())

    .pipe(sourcemaps.write('.'))

    .pipe(gulp.dest('./css/build'));

});

// Pass an object in raw form to be accessable in stylus

var data = {red: '#ff0000'};

gulp.task('pass-object', function () {

  gulp.src('./sty/main.styl')

    .pipe(stylus({ rawDefine: { data: data }}))

    .pipe(gulp.dest('./css/build'));

});

// Use with gulp-data

gulp.task('gulp-data', function() {

  gulp.src('./components/**/*.styl')

    .pipe(data(function(file){

      return {

        componentPath: '/' + (file.path.replace(file.base, '').replace(/\/[^\/]*$/, ''))

      };

    }))

    .pipe(stylus())

    .pipe(gulp.dest('./css/build'));

});

/* Ex:

body

  color: data.red;

*/

// Default gulp task to run

gulp.task('default', ['one', 'compress', 'linenos', 'sourcemaps-inline', 'sourcemaps-external', 'pass-object']);

```

##### You can view more examples in the [example folder.](https://github.com/stevelacy/gulp-stylus/tree/master/examples)

## Extras

You can access the original `stylus` module that `gulp-stylus` uses.

```

var originalStylus = require('gulp-stylus').stylus;

```

## Options

#### All stylus options are passed to [accord/stylus](https://github.com/jenius/accord/blob/master/docs/stylus.md)

## LICENSE [MIT](LICENSE)