И вот наконец руки дошли до стартовой front-end сборки. Три года работы на старой пролетели очень быстро, а она, между тем, успела здорово устареть. Дополнительной мотивацией сделать стал прессинг от начальства по написанию статьи в блог. Но вместе с интересом попробовать свежий Gulp 4 для производства с нуля стартовой сборки, процесс оказался увлекательным и несложным.
Мой личный профит по итогам: два “убитых зайца” в виде оправданного любопытства и жажды познания нового, а также удовлетворенное лицо шефа :)
Сборка важна
Небольшое отступление для ответа на вопрос “а зачем оно надо?” Для тех, кто никогда не использовал сборки, процесс начала верстки проекта начинается с создания структуры папок и файлов, подключения необходимых библиотек как js так и css. А в финале нужен будет желательно один css/js файл, минифицирован css c префиксами и группировкой селекторов media-запросов. Таким образом, стартовая сборка позволит вам избежать лишней траты времени и значительно упростит жизнь. Мой совет: потратьте один день чтобы сделать себе собственную сборку и в будущем вы сможете использовать её годами, тратя всего несколько минут на развертывание готовой наработки под новые проекты.
И так, для сборки будем использовать Gulp 4-й версии.
Готовимся собирать
Для начала убедитесь, что у вас установлен node.js. Если его нет, отвлекитесь и установите — потом будет труднее. Теперь установим gulp-cli:
npm install gulp-cli -g
Создаем папку проекта и ставим Gulp.
npm install gulp -D
Cоздаем файл package.json. В нем будет хранится вся необходимая информация о проекте и используемых модулях, а также будут указаны модули для автоматической установки при развертывании сборки:
Создать package.json можно с помощью команды:
npm init -y
Далее создаем структуру проекта:
Во избежание вопросов по-поводу scss и отсутствия css заранее предупреждаю, что я влюблен в препроцессор и без него работать не могу. И не буду.
Итак, мы будем работать в папке src. В папке build будет находится готовый проект, который, к слову, и будет видеть браузер в дальнейшем.
Далее создаем в корневом каталоге проекта файл gulpfile.js и подключим в нем наш Gulp: