С чистого листа. О сборщиках

Переводить sass в css, потом минифицировать js и все остальное руками — рабский труд. Спасают, автоматизируют, ускоряют и выполняют рутинные задачи сборщики проектов. Такие как Webpack, Gulp, Grunt и др. Для них у меня есть минимальные требования:

• Sass
• autoprefixer
• simpleHTTPServer
• autoreload

При верстке удобно иметь 2 экрана. На одном править код, а на другом сразу же видеть результат в браузере.

Если нам нужнем JavaScript, то его следует минифицировать и писать хочется не просто JS, а именно ES2015. А когда он применился мы не хотим перезагружать страницу, а хотим, чтобы сборщик сделал это сам, благодаря HotReload.

Если вы новичок, то стоит все-таки разобраться, как работает webpack, gulp или grunt. Я именно так и делал, собирал проект с самого начала. Но потом, каждый раз писать конфигурацию с чистого листа — отстой.

Быстрее будет, если найти StarterPack — проект, где начальную структуру и список инструментов продумали заранее и свели установку к одной строке:

npm i superStarterPack

Я пока попробовал только 2 коробочки:

• WebStarterKit
• Create React App

WebStarterKit

Если вы не будете использовать Material Design, а писать свои стили, то придется потратить время на вырезание ненужных файлов. Еще есть файлы-манифесты, где надо будет поменять часть дефолтных значений на свои. Пак годится для сборки простых промо-страниц или писем. Для статического сайта уже не хватает шаблонизатора, а для JS приложения считай все придется собирать с нуля.

Create React Ap

Вау! Пожалуй, если вы хотите создать быстро приложение на Реакте — это лучший выбор. Очень порадовал Flow в консоли и поддержка всех нужных мне фитч, за исключением Sass. В основе лежит webpack, который сложноват в настройке, но крайне продуктивен после. Сторонние пакеты устанавливаются как dev зависимости и доступны через import — каеф!