📜 ⬆️ ⬇️

A gift to all front-end developers. grunt (Jade + Stylus + Watch)



Hello Dear Habra users!

First of all, with the New Year already. I wish you well and development in your field of activity!
')
Secondly , as a gift, I prepared a small tool, which I myself have been using for about six months. This tool requires minimal setup time, but it does not affect the return you get from using it.

The question is rather to the maker-ups: Are you not tired of constantly doing the same thing?

I will describe a standard project, maybe a bit in negative colors ...
The average project I have is 5-7 pages in psd, which need to be folded in 2-3 days, despite the fact that the quality should not suffer. These terms include all edits from the customer to his full euphoria.

I am sure that more advanced experts already understand what I want to start a conversation.

It will go about such a tool as grunt.js. Everyone heard, but everyone is afraid. Let's make it easier, or more precisely, I will make it easier for you.

At the end of the article there is a link to github with the project, the rest that I will talk about concerns more philosophy and some of those. parts.

Is it necessary to repeat the same sections of code, write a bunch of closing tags in the layout, monitor vendor prefixes, etc ... Yes, even refreshing the page, with each change, is too lazy.

I propose to get away from this, and not suffer garbage to bother.

The tool that I offer is not much different from the grunt tutorials on the Internet, and if you have time, you can read about it and add your own chips, such as preprocessors, other automation, and anything.

This tool provides a trace. opportunities:
  1. The stylus + nib preprocessor (automatically adds vendor properties for properties such as border-radius, etc.)
  2. Jade Preprocessor (no closing tags in HTML, connecting external blocks)
  3. Watch + LiveReload (compiles files from the stylus and jade to css and html. Automatic page refresh when files change)
  4. Imagemin - image mini -finisher (shrinks without loss of quality)
  5. Connect - Your layout will be launched on the server (localhost: 3000)


As you can see, there are enough opportunities, but if you are small and there is no desire or opportunity to study the grunt, write to me in a personal, I will modify it for you completely free, the benefit is this momentary thing.

Installation instructions can be found on the github page. Ask questions in comments, suggestions, shortcomings, mistakes.

Here is a link to the project: fewatcher

PS You must have nodeJS + npm installed. Installation depends on your system, information on this in the Internet is abundant.
PPS I wish you only good luck! I hope that there will be few questions, and there will be a lot of suggestions for improvement!

Useful links:
http://gruntjs.com/
http://jade-lang.com/
http://learnboost.imtqy.com/stylus/

Source: https://habr.com/ru/post/207970/


All Articles