How to install and configure grunt?

Question

css

Yesterday I asked a question about stylus, got advice to use grunt. I read tutorials, blogs, documentation... And nowhere could I find intelligible information on bringing this whole procedure to the form ready to work on the project.
There is a project folder, there are installed node.js and stylus, it seems that I installed grunt using the commands that are indicated in the lessons and manuals, it is installed, but I can’t understand what to do next. All explanations seem somehow incomprehensible and unfinished.
So I'm asking someone who has been successful with this system to write down as detailed as possible the "for-the-smallest" steps, like "open a command prompt, go to such-and-such a directory to do such-and-such, then create such and such a file and enter such and such code there.
Thank you.

Answer 1

may help
www.youtube.com/watch?v=6mYgrJK768M#t=2285

Answer 2

You don't need grunt

app.use(stylus.middleware({
      src: __dirname + '/styles',
      dest: __dirname + '/public',
      compile: function(str, path) {
          return stylus(str)
            .set('compress', true);
      }
  }));

app I have it var app = module.exports = express();but it's not that important.
So the .styl files are in /styles , for example /styles/style.styl , if it changes, then when you update the page where there is a request like /style.css , node.js generates the /public/style.css file from style.styl

Answer 3

You were advised to use grunt, because in addition to stylus, you will also want to automatically minify pictures when you assemble it, or something else ...
grunt is just a task manager, you can easily replace it with a bash script. And you can also configure watchers for it, which will rebuild everything after the change and run livereload. This thing sometimes saves a lot of nerves. Well, the advantage of using it is that there is a bunch of everything ready.
And so ... the official site is quite enough. Just set a task. set up and execute.