На днях встретил очередную "верстку" в формате "куча файлов css + js + html в одной папке". Никакого подхода в именовании, структуре, в общем - бардак. Ну и как обычно, если нужно что-то поменять, нужно менять во всех файлах.

Казалось бы, вот уже 21-век, а некоторые программисты все еще не пользуются системами автоматической сборки фронтенда. Созданы тысячи инструментов, написаны десятки статей и howto (про bower, про grunt, про glup и другие), но снова и снова встречаю тоже самое - бардак и нулевая оптимизация frontend части.

Как правило причины в этом две:

1. плохое знание англ. языка, или не желание выделить время для оптимизации
2. пользователь windows (т.е работу через терминал воспринимают как "мистику")

Привожу свой подход к построению frontend части проекта:

Если вы еще не использует bower и grunt (или схожие по целям программы), ознакомитесь с документацией на страницах этих проектов, и попробуйте использовать это в своих проектах.

Что вы получите в итоге?

1. перестанете писать css "вручную" (можно, но нет смысла), используем less или scss для генерации css
2. качественно оформленный фронтенд, который легко поддерживать
3. подготовка спрайтов, изображений "для web", обработка векторной графики в автоматическом режиме
4. включаемые области в html файлах (повторения)
5. перестанете нажимать "f5" после изменений в верстке, livereload в помощь (странно, но некоторые до сих пор так делают :)) 
6. перестанете работать по ftp-ssh, или вручную заливать файлы после изменений 

Все что нужно, это выделить немного времени и ознакомиться с документацией, например bower и grunt. Или же на рус.языке можете прочитать данные посты про bower и про grunt.

После ознакомления с документацией или статьями, предлагаю присмотреться к следующим пакетам, "must have" в наборе почти любого проекта:

1. grunt-contrib-watch - отслеживание изменений в файлах
2. grunt-contrib-cssmin - операции с css файлами. Сжатие, упаковка, добавление префиксов, замена путей  и многое другое.
3. grunt-contrib-uglify - упаковка js файлов
4. grunt-contrib-concat - конкатенация любых файлов (шаблонов jade, js, css итд.)
5. grunt-bower-concat - конкатенация пакетов установленных с помощью bower
6. grunt-contrib-less - компилятор less to css
7. less-plugin-clean-css - плагин к less компилятору
8. less-plugin-autoprefix - плагин к less компилятору, автопрефиксер "-webkit -moz" итд.
9. grunt-contrib-jshint - проверка-валидация js кода
10. grunt-spritesmith - генератор спрайтов по картинкам
11. grunt-contrib-imagemin - сжатие(обработка) изображений для веб
12. grunt-css-url-rewrite - замена путей в css
13. grunt-contrib-copy - копирование файлов
14. grunt-contrib-symlink - создание симлинков
15. grunt-contrib-connect - плагин для livereload
16. grunt-rsync - оболочка rsync, для заливки файлов на внешний сервер
17. grunt-notify - системные уведомления о завершении сборки
18. grunt-ssh - выполнение shell команд через ssh на удаленном сервере
19. grunt-shell - выполнение shell команд локально