Preprocess CSS with Styl
Install with npm
npm install --save-dev gulp-styl
var gulp = require('gulp');
var styl = require('gulp-styl');
gulp.task('default', function () {
gulp
.src('src/app.css')
.pipe(styl(inline()))
.pipe(gulp.dest('dist'));
});Plugins are supplied as arguments. Optionally supply an object with options as the last argument.
var gulp = require('gulp');
var styl = require('gulp-styl');
var inline = require('rework-inline');
gulp.task('default', function () {
gulp.src('src/app.css')
.pipe(styl(inline()))
.pipe(gulp.dest('dist'));
});var gulp = require('gulp');
var styl = require('gulp-styl');
gulp.task('default', function () {
gulp.src('src/app.css')
.pipe(styl({
compress: true,
whitespace: true
}))
.pipe(gulp.dest('dist'));
});Be sure gulp-jade depedencies are donwloaded (npm install) and into
example/ folder:
$ npm install -g gulp
$ npm install gulp --save-dev
$ gulpbody
background-color: white
color: red
transform: background-color 300ms ease-out
&.active
background-color: blue
&::before
content: 'Page is Active'body{background-color:white;color:red;-ms-transform:background-color 300ms ease-out;-moz-transform:background-color 300ms ease-out;-webkit-transform:background-color 300ms ease-out;transform:background-color 300ms ease-out;}body.active::before{content:'Page is Active';}body.active{background-color:blue;}MIT © Sindre Sorhus