Node stylus import structure - bootstrap and jeet

Question

I'm new to css compiling. I currently have a node.js app using express and precompiled bootstrap 3 files, and I'm diving into Stylus to make this better. I want to compile Stylus and import bootstrap with jeet for grid system.

My question is, how should this work? I'm confused about using grunt or why some tutorials show Stylus being used as middleware. Is it that the middleware compiles it realtime, and why would I need that?

Also I ran npm install bootstrap-styl and npm install jeet, but I'm not sure how to reference these in my styles.styl (If I do @import bootstrap, it can't find the files)

My thought is that I want to somehow link the imports to my node_modules, so they can be updated fluidly (I don't want to just copy the bootstrap .styl files from the node_modules folder, right?). Is this what I would use Grunt for?

Answer 1

well grunt is a task runner program that let you write tasks to run and it does automations (if specified) or manual tasks.

Grunt can watch for files/folders changes and invoke some functionality or tasks (if you will) just like what fileWatch function ( in fs module) does in node.js, and the tasks can be anything really from importing jeet into your stylus before compiling to run your tests and refresh your browser. In your situation it's best to use grunt to do the automation (of importing jeet files and compiling it). Grunt is easy to use, you can look at https://www.npmjs.com/package/grunt-contrib-stylus it has the information you will need to use stylus in grunt.

Make sure you npm install grunt-cli && npm install grunt grunt-contrib-stylus --save-dev to install grunt command for command line and the other for your project.

Then in the root of your project you make a gruntfile.js and put your grunt tasks in there, you can google for some articles about it, pretty straightforward.