What tools does a layout designer/front-end developer have in their arsenal now?

Question

css

Good afternoon, I noticed that many projects now use grunt / gulp (I know what it is), I also saw the use of bower (I roughly understood what it is), tell me what else is used in development? And the approximate workflow of this is also interesting. It’s also interesting which ones you most often use (webpack? modernizr? requirejs?)
I myself am a backend, I have to get into the frontend for lack of hands (this does not apply to the essence of the issue) and I would like to somehow organize it correctly and without pain
Upd : more about directory structure - as I understand it, the dist directory is an unspoken standard where libraries ready for use are stored?

Answer 1

Chrome dev tools
The best tool we have in our hands today. Since its inception, Chrome has invested a lot in its developer tools and is still improving them continuously. Each release (every 6 weeks or so) comes with its own new DEV trading tool features.
LiveReload
How many times on average do you hit the refresh key on your keyboard each day? A lot, right? LiveReload is a simple web protocol that raises events for clients when files have been changed.
Testing front-end JavaScript code with Mocha / Chai / Sinon
Karma Javascript test runner written by the guys behind AngularJS.
There are many more, but in my opinion these are the most needed front-end list

Answer 2

I, perhaps, will recommend a tool in which everything is already implemented basic for comfortable development - TARS . You don’t need to study anything further and you can immediately dive into the frontend with comfort. There is documentation, in Russian and English + you can always personally ask me questions.

Answer 3

You correctly specified the assemblers gulp / grunt / webpack - whoever likes it more, without them now projects are not projects :), bower is a storehouse of the frontend, you also need to be able to use and use sass / less / stylus preprocessors as well as who, well, if already in the very beginning is still photoshop or the like. Well, the basis without which you can’t go anywhere: HTML / CSS / JS, but everything else will stick around you when you dive into the frontend :)

Answer 4

Project template for a quick start from practitioners .
There you have tools (gulp, stylus, jade), and workflow (bam, browser-sync), and a directory structure.
bower is no longer fashionable. The same tasks are solved by npm and it is already out of the box

Answer 5

You write the gulp/grunt/webpack config yourself, because it depends on the needs of the project. You can, of course. find some yo generator, it will generate a template for you ( for example ).
well, who knows what you need to pack and how
From the standard set there can be sass / less, postcss, concat, uglify, imagemin, etc.

Answer 6

Forgive me for brevity, but here's your reference. m.habrahabr.ru/company/it-grad/blog/270589
Subscribed, follow, read, be interested. You are on the right track