UNPKG

2.73 kBMarkdownView Raw
1#gulp-stylus
2[![Build Status](https://travis-ci.org/stevelacy/gulp-stylus.png?branch=master)](https://travis-ci.org/stevelacy/gulp-stylus)
3[![NPM version](https://badge.fury.io/js/gulp-stylus.png)](http://badge.fury.io/js/gulp-stylus)
4
5> Compile [Stylus](http://learnboost.github.io/stylus/) with gulp (gulpjs.com)
6
7## Information
8
9<table>
10<tr>
11<td>Package</td><td>gulp-stylus</td>
12</tr>
13<tr>
14<td>Description</td>
15<td>Stylus plugin for gulp</td>
16</tr>
17<tr>
18<td>Node Version</td>
19<td>>= 0.9</td>
20</tr>
21<tr>
22<td>Gulp Version</td>
23<td>3.x</td>
24</tr>
25</table>
26
27## Usage
28
29#### Install
30
31```sh
32$ npm install --save-dev gulp-stylus
33```
34
35## Examples
36
37```javascript
38
39// include the required packages.
40var gulp = require('gulp');
41var stylus = require('gulp-stylus');
42
43// include, if you're going to use nib helper library
44var nib = require('nib');
45
46// include, if you want to work with sourcemaps
47var sourcemaps = require('gulp-sourcemaps');
48
49// Get one .styl file and render
50gulp.task('one', function () {
51 gulp.src('./css/one.styl')
52 .pipe(stylus())
53 .pipe(gulp.dest('./css/build'));
54});
55
56// Options
57// Options compress
58gulp.task('compress', function () {
59 gulp.src('./css/compressed.styl')
60 .pipe(stylus({
61 use: nib(),
62 compress: true
63 }))
64 .pipe(gulp.dest('./css/build'));
65});
66
67// Use nib
68gulp.task('nib', function () {
69 gulp.src('./css/nib.styl')
70 .pipe(stylus({use: [nib()]}))
71 .pipe(gulp.dest('./css/build'));
72});
73
74// Set linenos
75gulp.task('linenos', function () {
76 gulp.src('./css/linenos.styl')
77 .pipe(stylus({linenos: true}))
78 .pipe(gulp.dest('./css/build'));
79});
80
81// Inline sourcemaps
82gulp.task('sourcemaps-inline', function () {
83 gulp.src('./css/sourcemaps-inline.styl')
84 .pipe(stylus({
85 sourcemap: {
86 inline: true,
87 sourceRoot: '..',
88 basePath: 'css'
89 }
90 }))
91 .pipe(gulp.dest('./css/build'));
92});
93
94// External sourcemaps
95gulp.task('sourcemaps-external', function () {
96 gulp.src('./css/sourcemaps-external.styl')
97 .pipe(stylus({
98 sourcemap: {
99 inline: true,
100 sourceRoot: '.',
101 basePath: 'css/build'
102 }
103 }))
104 .pipe(sourcemaps.init({
105 loadMaps: true
106 }))
107 .pipe(sourcemaps.write('.', {
108 includeContent: false,
109 sourceRoot: '.'
110 }))
111 .pipe(gulp.dest('./css/build'));
112});
113
114// Default gulp task to run
115gulp.task('default', ['one', 'compress', 'nib', 'linenos', 'sourcemaps-inline', 'sourcemaps-external']);
116
117```
118
119#####You can view more examples in the [example folder.](https://github.com/stevelacy/gulp-stylus/tree/master/examples)
120
121## Options
122#### All stylus options are passed to [accord/stylus](https://github.com/jenius/accord/blob/master/docs/stylus.md)
123
124
125
126## LICENSE [MIT](LICENSE)