Grunt, connect, jade, less, livereload quick layout

Question

JavaScript

I would like to build an environment for fast html/css layout using jade and less. Now I have assembled a connect-server on my knee with a connected livereload, less-monitor and middleware for jade. There are two problems - updating jade and reloading the page too often on the first call, causing the server to crash. I looked that grunt is just for such tasks. From the requirements: there is a src folder with jade and less subfolders, there is a public folder where the final html, css should fall. It is desirable to compile only the head files, as in the same less-monitor - only the file is compiled, which is not imported anywhere. Likewise for jade. Maybe someone has already bothered with this and there are ready-made solutions? I did not find.

Answer 1

Check out my bike, github.com/Zoxon/gulp-front there is a true stylus instead of wood, but this is quickly fixed. I’m constantly finishing it, but it’s still damp to spread

Answer 2

Under windows there is a program
alphapixels.com/prepros
True, it does not meet all the requirements:
1. Collects all jade files, not just ready ones
2. Less also collects each one when it changes, but you can configure it in the program.
3. If you change css then livereload does not work
Another option. Use a separate program for each stage
less - winless
jade - prepros
livereload - livereload
But this is not a pretty solution.

Answer 3

https://github.com/yeoman/generator-webapp will add less and jade.
You can put the final version in your repository. Or add a plug-in for the yeoman.
upd: https://gist.github.com/7rulnik/70fe848ede47a3a697fa here is my standard grant file.
Read more about usemin.