Builds dependency tree, based on ".styl" files in your project
npm install gulp-stylus-tree#gulp-stylus-tree
> Serves your ".styl" files, watches them and compiles related styles once they change.
#### Install
``sh`
$ npm install --save-dev gulp-stylus-tree
Split your styles into:
1. "Singles" - styles for particular HTML pages
2. "Components" - styles being reused by "Singles"
Try to modify your "Components". "Singles" will react on change of any related component.
`javascript
var gulp = require('gulp'),
stylTree = require('gulp-stylus-tree');
gulp.task('style-tree', function () {
// Baseline setup
return stylTree({
// Establish the root folder of a project
projectPath: __dirname,
// Set path of style components
componentsPath: 'components',
// Tell where is your single styles
dependentFilesPath: 'singles',
// Options, passed to gulp-stylus (optional)
stylusOpts: {}
});
});
gulp.task('default', ['style-tree']);
``