Такие инструменты, как Gulp, часто называются «инструментами сборки», потому что они являются инструментами для выполнения задач по созданию веб-сайта. Два самых популярных инструмента для сборки — это Gulp и Grunt. (У Криса Койера есть статья о работе с Grunt). Конечно же, существуют и другие инструменты сборки. К примеру, Broccoli фокусируется на компиляции ресурсов, это одна из наиболее распространённых задач инструмента сборки.
Уже есть несколько статей, поясняющих разницу между Grunt и Gulp и почему вы должны использовать то или иное (если интересно, то можете прочесть эту статью, эту или эту). Brunch аналогично фокусируется на ресурсах и выполняет некоторые типовые задачи, вроде отслеживания файлов.
Основное различие состоит в том, как вы настраиваете с помощью этих инструментов рабочий процесс. Конфигурация Gulp, как правило, намного короче и проще по сравнению с Grunt. Gulp также обычно работает быстрее.
К концу руководства у вас будет рабочий процесс, выполняющий задачи, которые мы описали в самом начале:
- запуск веб-сервера;
- компиляция Sass в CSS;
- автоматическая перезагрузка браузера при сохранении файла;
- оптимизация всех ресурсов (CSS, JS, шрифты и изображения).
Вы также узнаете, как объединить разные задачи в простые команды, которые легко понять и выполнить.
Давайте начнём с установки Gulp на ваш компьютер.