3.0.1 • Published 9 months ago
gulp-stylus v3.0.1
gulp-stylus
Compile Stylus with gulp (gulpjs.com)
Information
Usage
Install
$ npm install --save-dev gulp-stylus
Examples
// 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.
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
LICENSE MIT
3.0.1
9 months ago
3.0.0
1 year ago
2.7.1
2 years ago
2.7.0
6 years ago
2.6.0
7 years ago
2.5.0
8 years ago
2.4.0
8 years ago
2.3.1
8 years ago
2.3.0
8 years ago
2.2.0
8 years ago
2.1.2
8 years ago
2.1.1
8 years ago
2.1.0
8 years ago
2.0.7
9 years ago
2.0.6
9 years ago
2.0.5
9 years ago
2.0.4
9 years ago
2.0.3
9 years ago
2.0.2
9 years ago
2.0.1
9 years ago
2.0.0
9 years ago
1.3.7
9 years ago
1.3.5
9 years ago
1.3.6
9 years ago
1.3.4
9 years ago
1.3.3
10 years ago
1.3.2
10 years ago
1.3.0
10 years ago
1.1.0
10 years ago
1.0.5
10 years ago
1.0.4
10 years ago
1.0.3
10 years ago
1.0.2
10 years ago
1.0.1
10 years ago
1.0.0
10 years ago
0.2.1
10 years ago
0.2.0
10 years ago
0.1.0
10 years ago
0.0.14
10 years ago
0.0.13
10 years ago
0.0.12
10 years ago
0.0.11
10 years ago
0.0.10
10 years ago
0.0.9
10 years ago
0.0.7
10 years ago
0.0.5
10 years ago
0.0.4
10 years ago
0.0.3
10 years ago
0.0.2
10 years ago