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.
|
40 | var gulp = require('gulp');
|
41 | var stylus = require('gulp-stylus');
|
42 |
|
43 |
|
44 | // include, if you want to work with sourcemaps
|
45 | var sourcemaps = require('gulp-sourcemaps');
|
46 |
|
47 | // Get one .styl file and render
|
48 | gulp.task('one', function () {
|
49 | gulp.src('./css/one.styl')
|
50 | .pipe(stylus())
|
51 | .pipe(gulp.dest('./css/build'));
|
52 | });
|
53 |
|
54 | // Options
|
55 | // Options compress
|
56 | gulp.task('compress', function () {
|
57 | gulp.src('./css/compressed.styl')
|
58 | .pipe(stylus({
|
59 | compress: true
|
60 | }))
|
61 | .pipe(gulp.dest('./css/build'));
|
62 | });
|
63 |
|
64 |
|
65 | // Set linenos
|
66 | gulp.task('linenos', function () {
|
67 | gulp.src('./css/linenos.styl')
|
68 | .pipe(stylus({linenos: true}))
|
69 | .pipe(gulp.dest('./css/build'));
|
70 | });
|
71 |
|
72 | // Include css
|
73 | // Stylus has an awkward and perplexing 'incude css' option
|
74 | gulp.task('include-css', function() {
|
75 | gulp.src('./css/*.styl')
|
76 | .pipe(stylus({
|
77 | 'include css': true
|
78 | }))
|
79 | .pipe(gulp.dest('./'));
|
80 |
|
81 | });
|
82 |
|
83 | // Inline sourcemaps
|
84 | gulp.task('sourcemaps-inline', function () {
|
85 | gulp.src('./css/sourcemaps-inline.styl')
|
86 | .pipe(sourcemaps.init())
|
87 | .pipe(stylus())
|
88 | .pipe(sourcemaps.write())
|
89 | .pipe(gulp.dest('./css/build'));
|
90 | });
|
91 |
|
92 | // External sourcemaps
|
93 | gulp.task('sourcemaps-external', function () {
|
94 | gulp.src('./css/sourcemaps-external.styl')
|
95 | .pipe(sourcemaps.init())
|
96 | .pipe(stylus())
|
97 | .pipe(sourcemaps.write('.'))
|
98 | .pipe(gulp.dest('./css/build'));
|
99 | });
|
100 |
|
101 | // Default gulp task to run
|
102 | gulp.task('default', ['one', 'compress', 'linenos', 'sourcemaps-inline', 'sourcemaps-external']);
|
103 |
|
104 | ```
|
105 |
|
106 | #####You can view more examples in the [example folder.](https://github.com/stevelacy/gulp-stylus/tree/master/examples)
|
107 |
|
108 | ## Options
|
109 | #### All stylus options are passed to [accord/stylus](https://github.com/jenius/accord/blob/master/docs/stylus.md)
|
110 |
|
111 |
|
112 |
|
113 | ## LICENSE [MIT](LICENSE)
|