В наше время сборка front-end’a является уже неким стандартом в разработке сайтов и веб-приложений. Есть множество вариантов сборки ресурсов сайта и каждый разработчик выбирает для себя сам, какие инструменты для этого использовать. Я же хочу поведать о процессе сборке с помощью менеджера задач, которому отдал предпочтение, а именно GULP.

В двух слова о Gulp

Gulp — это менеджер задач (как grunt) для сборки ресурсов и выполнения рутинных задач. Он прост в использовании. Это крайне полезный швейцарский нож и может выполнять множество функций. А самое главное он быстр.

Установка Gulp

Прежде всего для работы gulp необходимо установить node.js

Находясь в корне проекта инициализируем проект для npm.

Npm init

Установим gulp и добавим его в зависимости проекта

Npm install --save-dev gulp

Теперь необходимо создать файл в корне проекта gulpfile.js и создадим пустую задачу для примера.

Var gulp = require("gulp"); gulp.task("default", function() { // место для кода, который будет выполняться в задаче });

Собственно так и будут выглядеть задачи в gulp. Практически для каждой задачи, которую может понадобиться выполнить для сборки вашего front-end’a есть плагины. Об установке и использовании плагинов далее.

Сборка css

Думаю в наши дни уже все используют css препроцессоры. Если вы еще не используете какой-либо css препроцессор, вам срочно необходимо ознакомиться с или и начать использовать sass или less в работе.

Я предпочитаю использовать sass, поэтому покажу на примере плагина sass.

Установка плагина

Npm install gulp-sass --save-dev

Две простейших задачи для сборки и live сборки sass файлов при их изменении.

Var gulp = require("gulp"); var sass = require("gulp-sass"); //Задача для сборки gulp.task("sass", function () { return gulp.src("./sass/**/*.scss") .pipe(sass().on("error", sass.logError)) .pipe(gulp.dest("./css")); }); //Задача, после запуска которой, gulp будет следить за изменениями файлов gulp.task("watch", function () { gulp.watch("./sass/**/*.scss", ["sass"]); });

Теперь прописав в консоли gulp sass , gulp соберет все ваши sass файлы в указанной директории.
А выполнив gulp watch запустится процесс, который будет следить за изменением sass файлов, и при изменении сразу их компилировать.

Для остановки процесса достаточно нажать на клавиатуре Ctrl + C.

Объединение JavaScript файлов

Для этого необходимо установить плагин gulp-concat .

Npm install --save-dev gulp-concat

Теперь добавим задачу в наш gulpfile.js .

Var gulp = require("gulp"); var sass = require("gulp-sass"); var concat = require("gulp-concat"); gulp.task("sass", function () { return gulp.src("./sass/**/*.scss") .pipe(sass().on("error", sass.logError)) .pipe(gulp.dest("dist/css")); }); gulp.task("scripts", function() { return gulp.src("src/**/*.js") .pipe(concat("app.js")) .pipe(gulp.dest("dist/js")); }); gulp.task("watch", ["sass", "scripts"], function() { gulp.watch("css/**/*.sass", ["sass"]); gulp.watch("src/**/*.js", ["scripts"]); });

Обратите внимание, что задачи sass и scripts находятся в зависимостях у задачи watch.

Теперь скрипты будут объединяться по команде gulp scripts или же при gulp watch .

Минификация ресурсов

Для минификации JavaScript файлов необходимо установить плагин uglify , а для минификации sass файлов необходимо добавить опцию {outputStyle: "compressed"} .

Var gulp = require("gulp"); var sass = require("gulp-sass"); var concat = require("gulp-concat"); var uglify = require("gulp-uglify"); gulp.task("sass", function () { return gulp.src("./sass/**/*.scss") .pipe(sass({outputStyle: "compressed"}).on("error", sass.logError)) .pipe(gulp.dest("dist/css")); }); gulp.task("scripts", function() { return gulp.src("src/**/*.js") .pipe(concat("app.js")) .pipe(uglify()) .pipe(gulp.dest("dist/js")); }); gulp.task("watch", ["sass", "scripts"], function() { gulp.watch("css/**/*.sass", ["sass"]); gulp.watch("src/**/*.js", ["scripts"]); });

Версионность ресурсов

Версионность ресурсов необходима для контроля кешированных файлов в браузерах посетителей. Если вы работаете с html файлами, то имена создаваемым файлам и пути к ним можно генерировать с помощью плагина gulp-rev или gulp-rev-all . С помощью них выходят файлы файлы с именами такого типа: app-ef62e7.js .
Но когда вы работаете с движками сайтов и вам нужно в определенном файле (любого формата), в определенном месте прописать необходимые пути, то реализовать это можно таким способом.

В первую очередь установим плагины gulp-html-replace и gulp-rename .

Npm install gulp-html-replace --save-dev npm install gulp-rename --save-dev

gulp-rename — будет называть файлы, а gulp-html-replace будет прописывать пути в указанных файлах.

Имена файлов

Теперь дополним наш gulpfile новыми строками:

Var gulp = require("gulp"); var sass = require("gulp-sass"); var concat = require("gulp-concat"); var uglify = require("gulp-uglify"); var htmlreplace = require("gulp-html-replace"); var rename = require("gulp-rename"); var time = Date.now(); gulp.task("path", function () { gulp.src("/assets_tpl.php") .pipe(htmlreplace({ "js": [ "/dist/js/app-"+time+".js" ], "css": [ "/dist/css/bundle-"+time+".css" ] })) .pipe(rename("assets.php")) .pipe(gulp.dest("/")); }); gulp.task("sass",["path"], function () { return gulp.src("./sass/**/*.scss") .pipe(sass({outputStyle: "compressed"}).on("error", sass.logError)) .pipe(concat("bundle-"+time+".css")) .pipe(gulp.dest("dist/css")); }); gulp.task("scripts",["path"], function() { return gulp.src("src/**/*.js") .pipe(concat("app-"+time+".js")) .pipe(uglify()) .pipe(gulp.dest("dist/js")); }); gulp.task("watch", ["sass", "scripts"], function() { gulp.watch("css/**/*.sass", ["sass"]); gulp.watch("src/**/*.js", ["scripts"]); });

Переменная time создана для генерации уникального числа в момент инициализации gulp скрипта. В данном случае это простой timestamp. Он и будет прописываться в имя файла.

Пути к файлам

Также создана новая задача path , которая по файлу-шаблону assets_tpl.php сгенерирует файл assets.php с боевыми путями к файлам.

Вот как выглядит файл-шаблон assets_tpl.php:

Вместо указанных тегов в сгенерированном файле будут прописаны пути к файлу.

Так же стоит обратить внимание, что задача path добавлена как зависимость для задач sass и scripts .

Но теперь у нас при каждом выполнении любой из задач будут создаваться новые файлы, а старые будут оставаться. Для того, что бы хранились только свежие файлы, необходимо чистить папку с скомпилированными ресурсами. Для этого необходимо установить плагин gulp-clean .

Npm install --save-dev gulp-clean

Затем добавим задачу с флагом {read: false} , для ускоренного удаления.

Var clean = require("gulp-clean"); gulp.task("clean", function () { return gulp.src("dist", {read: false}) .pipe(clean()); });

И создадим задачу build , которая будет выполнять чистку, а затем собирать все наши ресурсы.

Gulp.task("build",["clean","sass","scripts","path"], function () {});

Таким образом выполнив в консоли команду gulp build , gulp полностью автоматически соберет весь front-end для проекта. Данную команду также можно повесить на хук после деплоя проекта на сервер / хостинг.

Заключение

В данной статье показан пример для ознакомления, как можно собирать файлы стилей и скриптов для ваших проектов. Вариантов и плагинов множество и выбрать каждый может под себя сам.

Если вам полезен данный материал, подписывайтесь на мой блог, чтобы получать уведомления о новых публикациях на темы: верстки, javascript и разработки кроссплатформенных мобильных приложений.

В этой статье мы подробно разберем процесс сборки фронтенд проекта, который прижился в моей повседневной работе и очень облегчил рутину.Статья не претендует на истину в последней инстанции, так как сегодня существует большое количество различных сборщиков и подходов к сборке, и каждый выбирает по вкусу. Я лишь поделюсь своими мыслями по этой теме и покажу свой workflow.

Мы будем использовать сборщик Gulp. Соответственно у вас в системе должен быть установлен Node js. Установку ноды под конкретную платформу мы рассматривать не будем, т.к. это гуглится за пару минут.И для начала отвечу на вопрос - почему Gulp? Из более или менее сносных альтернатив мы имеем Grunt и Brunch.Когда я только начал приобщаться к сборщикам - на рынке уже были и Grunt и Gulp. Первый появился раньше и по этому имеет более большое коммьюнити и разнообразие плагинов. По данным с npm: Grunt - 11171 пакетGulp - 4371 пакет

Но Grunt мне показался через чур многословным. И после прочтения нескольких статей-сравнений - я предпочел Gulp за его простоту и наглядность.Brunch - это сравнительно молодой проект, со всеми вытекающими из этого плюсами и минусами. Я с интересом наблюдаю за ним, но в работе пока не использовал.

Приступим: Создадим папку под наш проект, например «habr». Откроем ее в консоли и выполним команду npm init Можно просто нажать Enter на все вопросы установщика, т.к. сейчас это не принципиально.В итоге в папке с проектом у нас сгенерируется файл package.json, примерно такого содержания { «name»: «habr», «version»:»1.0.0», «description»:», «main»: «index.js», «scripts»: { «test»: «echo \«Error: no test specified\» && exit 1» }, «author»:», «license»: «ISC» } Немного видоизменим его под наши нужды: { «name»: «habr», «version»:»1.0.0», «description»:», «author»:», «license»: «ISC», «devDependencies»: { «gulp»:»^3.8.1» } } в блоке devDependencies мы указали что нам нужен gulp и тут же будем прописывать все наши плагины.Плагины: gulp-autoprefixer - автоматически добавляет вендорные префиксы к CSS свойствам (пару лет назад я бы убил за такую тулзу:))gulp-cssmin - нужен для сжатия CSS кодаgulp-connect - с помощью этого плагина мы можем легко развернуть локальный dev сервер с блэкджеком и livereloadgulp-imagemin - для сжатия картинокimagemin-pngquant - дополнения к предыдущему плагину, для работы с PNGgulp-uglify - будет сжимать наш JSgulp-sass - для компиляции нашего SCSS кодаНе холивара ради Я очень долгое время использовал в своей работе LESS. Мне очень импонировал этот препроцессор за его скорость и простоту изучения. Даже делал доклад по нему на одном Ростовском хакатоне. И в частности в этом докладе я не очень лестно отзывался о SASS.Но прошло время, я стал старше и мудрее:) и теперь я приобщился к этому препроцессору.Основой моего недовольства SASS - было то что я не пишу на руби. И когда то для компиляции SASS/SCSS кода - надо было тащить в проект руби, с нужными бандлами - что меня очень огорчало.Но все изменилось с появлением такой штуки как LibSass. Это С/C++ порт компилятора для SASS. Плагин gulp-sass использует именно его. Теперь мы можем использовать SASS в нативном node окружении - что меня безгранично радует. gulp-sourcemaps - возьмем для генерации css sourscemaps, которые будут помогать нам при отладке кодаgulp-rigger - это просто киллер фича. Плагин позволяет импортировать один файл в другой простой конструкцией //= footer.html и эта строка при компиляции будет заменена на содержимое файла footer.htmlgulp-watch - Будет нужен для наблюдения за изменениями файлов. Знаю что в Gulp есть встроенный watch, но у меня возникли с ним некоторые проблемы, в частности он не видел вновь созданные файлы, и приходилось его перезапускать. Этот плагин решил проблему (надеюсь в следующих версиях gulp это поправят).opn - маленькая приятность, позволяющая открыть какую-нибудь ссылку в браузере командой из node jsrimraf - rm -rf для нодыПропишем все наши плагины в package.json

{ «name»: «habr», «version»:»1.0.0», «description»:», «author»:», «license»: «ISC», «devDependencies»: { «gulp»:»^3.8.1», «gulp-autoprefixer»:»*», «gulp-connect»:»*», «gulp-cssmin»:»*», «gulp-imagemin»:»*», «gulp-sass»:»*», «gulp-sourcemaps»:»*», «gulp-rigger»:»*», «gulp-uglify»:»*», «gulp-watch»:»*», «imagemin-pngquant»:»*», «opn»:»*», «rimraf»:»*» } } и запустим в консоли команду

npm install Bower Я уже не мыслю своей работы без пакетного менеджера Bower и надеюсь вы тоже. Если нет, то почитать о том что это и с чем его едят можно тут.Давайте добавим его к нашему проекту. Для этого выполним в консоли команду bower init Можно так же Enter на все вопросы.В конце мы получаем примерно такой файл bower.json { «name»: «habr», «version»:»0.0.0», «authors»: [ «Insayt

В последнее время Gulp набирает большую популярность, и понятно почему. Он быстрее, красивее и проще чем Grunt . Мне приходилось часто с ним работать, но я всегда брал готовые решения и не до конца понимал как же он все это делает. На этих выходных я решил разобрать и закрыть эту небольшую проблему. Об этом и поговорим сегодня.

Что такое Gulp?

Gulp - это инструмент сборки front-a. Он позволяет автоматизировать повторяющиеся задачи (сборка и минификация CSS- и JS-файлов, запуск тестов, перезагрузка браузера и другие). Тем самым Gulp ускоряет и оптимизирует процесс веб-разработки.

Установка Gulp

Установить Gulp достаточно легко. Если у вас что-то не получится, пишите в комментариях или загуглите вашу проблему. Итак для установки нужно сделать 3 шага:

Установить Gulp глобально
Установить Gulp как devDependencies (зависимости для разработки)
Создать файл gulpfile.js

Первый шаг - устанавливаем глобально Gulp. Открываем терминал и пишем:

npm install --global gulp

После этого вам нужно установить Gulp как devDependencies для вашего проекта. Убедитесь в том, что у вас есть файл package.json . Если его нет, то создайте его написав в консоль npm init . Теперь можно установить Gulp как devDependencies:

npm install --save-dev gulp

И наконец, вам нужно создать gulpfile.js в корне вашего проекта, который будет содержать ваши задачи (tasks). В качестве промежуточного шага, мы установим плагин gulp-util . Чтобы показать как устанавливаются плагины:

npm install --save-dev gulp-util

Теперь настало время написать нашу первую задачку. Открываем только что созданный файл gulpfile.js и пишем в него следующее:

/* File: gulpfile.js */ // собираем все наши плагины var gulp = require (" gulp " ), gutil = require (" gulp-util " ); // создаем задачку, которая будет выполняться по умолчанию gulp . task (" default " , function () { return gutil . log (" Gulp is running! " ) });

И теперь нам остается запустить gulp в терминале и мы увидим нечто похожее на это:

> gulp [ 12:32:08] Using gulpfile ~/Projects/gulp-scotch-io/gulpfile.js [ 12:32:08] Starting "default" ... [ 12:32:08] Gulp is running! [ 12:32:08] Finished "default" after 1 ms

Обзор

Сам по себе Gulp очень скуден на возможности. Но все, что вам нужно вынесено в отдельные плагины. Они совместно с Gulp творят чудеса.

Api у gulp очень маленькое, и содержит всего 4 функции высшего порядка:

gulp.task
gulp.src
gulp.dest
gulp.watch

gulp.task определяет наши задачи. В качестве аргументов принимает название, зависимости (массив) и функцию (основные действия). Зависимостей может и не быть:

gulp . task (" mytask " , function () { //сделать что-то }); gulp . task (" dependenttask " , [ " mytask " ], function () { //сделать что-то после того, как "mytask" будет выполнен });

gulp.src указывает на файлы, которые мы хотим использовать. Он использует.pipe доступа к файлам через плагины.

gulp.dest указывает на папку, в которую мы хотим сохранить измененные файлы.

gulp.src и gulp.dest используется для простой копии файлов:

gulp . task (" copyHtml " , function () { // скопировать все html файлы из source/ в public/ gulp . src (" source/*.html " ). pipe (gulp . dest (" public " )); });

В gulp встроена система реагирования на изменения файлов (gulp.watch). Вы можете использовать эту задачу для запуска других необходимых вам задач при изменении файлов.

Приветствую. Если вы занимаетесь frontend разработкой, то могли заметить, что часто приходится выполнять одни и те же задачи. Было бы здорово все это автоматизировать и свести объем рутины к минимуму. В этом вам могут помочь таск-менеджеры и сборщики проектов, такие как Gulp и Grunt.

Gulp – это ответвление от проекта Grunt. От своего родителя он взял лучшие практики. Код инструкций пишется на JavaScript. Работает быстрее, чем Grunt в несколько раз.

Gulp предоставляет по-настоящему широкие возможности. Он облегчит и ускорит frontend разработку. Перечислю основные задачи, которые сборщик проектов вам поможет решить.

Создание веб-сервера для отладки
Автоматическая перезагрузка страниц при внесении изменений (LiveReload)
Слежение за изменениями в файлах проекта
Использование препроцессоров HTML, CSS, JS
Объединение файлов и их минификация
Автоматическое создание вендорных префиксов для браузеров (Autoprefixer)
Автоматизация управления файлами и директориями
Запуск и контроль внешних команд операционной системы
Запуск и контроль приложений
Оптимизация изображений (сжатие, изменение размеров и т.д.)
Выгрузка проекта на внешний сервер с помощью FTP, SFTP, Git и т.д.
Подключение и использование дополнительных плагинов (сегодня их уже 3570 штук; решение можно
найти практически для всех повседневных рутинных задач и не только)
Автоматизация ручного труда

Установка

Для работы Gulp требуется Node.js. Скачать его можно на официальном сайте . Советую ставить LTS версию программной платформы. После инсталляции Node.js можно переходить к установке Gulp. Для этого откройте консоль операционной системы и выполните следующую команду:

Мы используем параметр -g , который позволяет установить Gulp глобально в операционной системе, без привязки к конкретному проекту.

Важно, чтобы в пути к директории установки не было русских символов. Из-за этого некоторые плагины gulp могут работать некорректно.

Окей, пришло время создать проект, в котором мы будем использовать Gulp. Перейдите в директорию проекта и выполните команду:

Это запустит скрипт, который задаст вам несколько вопросов о проекте. В результате будет сконфигурирован файл для npm package.json . Это манифест проекта. Он содержит список пакетов, которые используются в проекте и другую информацию. На этом этапе я внес следующие данные, адаптируйте под свой проект.

name: (bybtc-landing) version: (1.0.0) description: Landing Page for byBTC entry point: (index.js) test command: git repository: https://github.com/Neuropassenger/bybtc-landing.git keywords: landing

Если какой-то вопрос хотите пропустить, то просто нажимайте Enter. Будет использовано значение по умолчанию. Теперь можно установить Gulp для нашего проекта. Выполните команду:

npm i --save-dev gulp

Gulp будет установлен в директорию проекта, а параметр –save-dev добавит его в зависимости package.json. Это позволит другому разработчику, открывшему ваш проект, быстро развернуть его на своей машине (с помощью команды npm i ).

Если все прошло хорошо, то в папке проекта должен появиться каталог node_modules . Он содержит установленный пакет gulp и все зависимости, необходимые для его работы.

Настало время создать базовую структуру проекта. Я придерживаюсь тех же названий каталогов, что и многие разработчики. Советую это делать и вам, чтобы другой человек мог быстро разобраться в структуре вашего проекта. Впрочем, никто не запрещает вам использовать такие названия, какие вам хочется.

Создаем две папки в корне проекта:

/src/ – исходный код проекта во время разработки, здесь вы будете редактировать файлы
/dist/ – файлы и папки проекта после сборки, готовый продукт

Каталог /dist/ будет заполняться автоматически при сборке проекта. Займемся пока что /src/ . Создайте внутри следующие папки:

/css/ – для каскадных таблиц стилей
/js/ – для JavaScript-сценариев
/img/ – для изображений
/fonts/ – для шрифтов
/sass/ – для файлов препроцессора SASS (если используете SASS)
/libs/ – для сторонних библиотек

Если все готово, то пора перейти к созданию файла gulpfile.js в корне проекта, который поможет настроить Gulp. Именно здесь вы можете создать инструкции Gulp, которые помогут автоматизировать часть рутинных задач.

Инструкции Gulp

Любая инструкция создается в gulpfile.js с помощью функции gulp.task() . Первый параметр – это название инструкции. Затем идет массив из названий инструкций, которые нужно выполнить до запуска определяемой инструкции. Последний параметр – это функция, тело которой определяет то, что делает данная инструкция.

gulp.task("название_инструкции", ["инструкция_выполняющаяся_перед_текущей", "еще_одна_инструкция"], function() { // Какие-то действия });

Для вызова инструкции необходимо использовать в консоли следующую команду:

gulp название_команды

Компиляция SASS в CSS

Начнем с компиляции SASS в CSS. Установим пакет gulp-sass:

npm i --save-dev gulp-sass

Сначала необходимо подключить используемые пакеты в gulpfile.js . Сделаем это:

var gulp = require("gulp"), sass = require("gulp-sass");

Теперь создадим инструкцию, которая будет выполнять компиляцию SASS в CSS:

gulp.task("sass", function() { return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(gulp.dest("src/css")); });

В первой строке инструкции указываем исходные файлы для компиляции. В конкретном примере будут взяты все файлы с расширением .sass , находящиеся внутри папки /src/sass/ и ее подпапках. Можно выбирать и конкретные файлы. Вот примерный список того, как вы можете задавать пути к исходным файлам.

src/sass/main.sass – выбор файла main.sass
src/sass/*.sass – выбор всех файлов с расширением sass
src/sass/**/*.sass – выбор всех файлов с расширением sass во всех вложенных папках в папке sass
!src/sass/main.sass – исключение файла main.sass
[‘!src/sass/main.sass’, ‘src/sass/second.sass’] – исключение массива файлов main.sass и second.sass
src/sass/**/*.+(scss|sass) – выбрать все файлы scss и sass во всех вложенных папках в sass

Теперь создаем в папке /src/sass/ файл main.sass и определим в нем немного стилей:

body color: red font-size: 20px

Сохраняем файл. Теперь мы можем проверить, как работает компиляция. В консоли выполняем команду:

Проверяем каталог /src/css/ . В нем должен находится только что скомпилированный CSS файл. Видите? Отлично! Двигаемся дальше.

Автообновление страниц (LiveReload)

Перейдем к автоматизации обновления страниц при их изменении, т.е. настроим LiveReload . Это одна из самых популярных задач, стоящих перед . Нам понадобится пакет npm Browsersync для автоматического обновления браузера. Установим его:

npm i --save-dev browser-sync

Подключим browser-sync пакет в начале gulpfile.js , как мы это делали ранее с пакетами gulp и gulp-sass :

browserSync = require("browser-sync");

Создадим инструкцию для запуска Browsersync:

gulp.task("browser-sync", function() { browserSync({ server: { baseDir: "src" } }); });

Все, что мы сделали – это вызвали запуск Browsersync и указали директорию проекта с исходными файлами. Есть и другие настройки для Browsersync . Можете узнать о них в документации.

Добавим еще один pipe к инструкции sass , с помощью которого будет происходить обновление стилей при компиляции CSS файлов. Указываем параметр stream: true . Это позволит обновлять стили потоково , без полной перезагрузки страницы.

Pipe(browserSync.reload({ stream: true; }))

Затем создадим инструкцию, которая будет следить за изменениями в файлах и перезагружать страницу при необходимости.

gulp.task("watch", ["browser-sync"], function() { gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src/js/**/*.js", browserSync.reload); gulp.watch("src/**/*.html", browserSync.reload); });

Поясню. Перед запуском выполняется инструкция browser-sync , т.е. стартует веб-сервер для отладки проекта. После этого выполняется сама инструкция watch . Для слежения за изменениями в файлах используем gulp.watch() .

Внутри анонимной функции мы выполняем 3 раза gulp.watch с двумя параметрами. Первый параметр – файлы, за которыми нужно следить, второй – действия, которые нужно выполнить при изменении файлов, т.е. выполнить инструкцию sass или обновить страницу.

Обратите внимание на первый gulp.watch . Вместо browserSync.reload мы передаем в массиве инструкцию sass , которую нужно выполнить, если файлы были изменены. В ней, как вы помните, мы потоково обновляем стили на странице.

Минификация и объединение файлов

Почти в любом проекте приходится использовать сторонние библиотеки. Их количество может составлять от 5 и до бесконечности. Соответственно, все они должны быть включены в готовый продукт. Все это дело было бы неплохо оптимизировать, а именно:

минифицировать (сжать) используемые библиотеки
уменьшить количество запросов к серверу, объединив библиотеки в единый файл

Добавим в исходные файлы проекта несколько библиотек. Для этого я использую Bower , пакет для NPM . Установим Bower:

Создаем файл конфигурации .bowerrc в корне проекта для Bower, где укажем ему, куда сохранять библиотеки:

{ "directory": "src/libs/" }

Установим, для примера, библиотеку jQuery и слайдер slick :

bower i jquery slick-carousel

Теперь можем заняться конкатенацией и сжатием библиотек. Для этого будем использовать пакеты gulp-concat и gulp-uglifyjs касательно JavaScript-файлов. Установим их:

npm i --save-dev gulp-concat gulp-uglifyjs

Касательно CSS – пакет gulp-cssnano . Устанавливаем:

npm i --save-dev gulp-cssnano

Минифицированные файлы обычно имеют суффикс .min . Добавить его нам поможет пакет gulp-rename . Устанавливаем:

npm i --save-dev gulp-rename

Начнем с подключения установленных плагинов в gulpfile.js :

concat = require("gulp-concat"), uglifyJs = require("gulp-uglifyjs"), cssNano = require("gulp-cssnano"), rename = require("gulp-rename");

JavaScript

Создадим инструкцию, которая позволит нам сжимать и объединять JavaScript-файлы:

gulp.task("min-js", function() { return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min.js" ]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); });

Внутри анонимной функции инструкции min-js мы сначала указываем пути на JavaScript-файлы библиотек в виде массива. Затем с помощью concat объединяем библиотеки в единый файл libs.min.js uglifyJs . И, наконец, сохраняем результат в папку /src/js/ .

Инструкцию можно проверить с помощью команды в консоли:

В папке /src/js/ появится файл libs.min.js , в котором объединены и сжаты используемые в проекте JavaScript-файлы библиотек.

CSS

Создадим в каталоге /src/css/ файл libs.sass . Будем в него импортировать CSS-файлы библиотек. Для примера с помощью Bower я скачал библиотеку Bootstrap :

bower i bootstrap

Откроем файл libs.sass и импортируем в него CSS-файл Bootstrap:

@import "src/libs/bootstrap/dist/css/bootstrap"

Таким образом, мы соберем все CSS-файлы библиотек в одном месте, а именно в файле libs.sass с помощью импорта. Теперь создадим инструкцию для сжатия:

gulp.task("min-css", ["sass"] , function() { return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(rename({ suffix: ".min" })) .pipe(gulp.dest("src/css")); });

Перед сжатием мы компилируем CSS из SASS с помощью инструкции sass , которую мы указали в массиве после имени инструкции min-css .

В первой строке мы берем конкретный файл, libs.css . Далее сжимаем его с помощью cssNano . Затем с помощью rename добавляем суффикс .min . Результат сохраняем в папке /src/css/ .

Проверяем инструкцию:

Если вы все сделали правильно, то в папке /src/css/ должно появиться два файла. libs.css и libs.min.css . Сравните их размеры.

Автоматическое добавление вендорных префиксов (Autoprefixer)

При использовании свежих возможностей CSS необходимо расставлять вендорные префиксы для правильной работы стилей. Делать такие вещи вручную – неблагодарное занятие. Поэтому заставим Gulp это сделать за нас.

Для начала установим gulp-autoprefixer :

npm i --save-dev gulp-autoprefixer

Подключим установленный пакет в gulpfile.js :

autoprefixer = require("gulp-autoprefixer");

Окей, теперь мы можем использовать autoprefixer в инструкции sass . Сделаем это после вызова .pipe(sass()) , т.к. вендорные префиксы нужно расставить после того, как SASS будет преобразован в CSS. Добавим новый pipe :

Pipe(autoprefixer([ "last 10 versions" ], { cascade: true }))

Первым параметром autoprefixer мы передаем массив, в котором указываем, что хотим включить поддержку последних 10 версий браузеров. Второй параметр – это настройки, где мы указываем, что хотим видеть красивый код на выходе, т.е. включаем каскадность.

Проверяем, добавляя в main.sass новое свойство flex . Запускаем инструкцию sass :

В main.css должны появиться вендорные префиксы. Очень просто, все работает в автоматическом режиме. Замечательно!

Финальная сборка проекта

Последнее, чего хотелось бы коснуться в этом гайде для новичков по Gulp – это финальная сборка проекта. Для этого нам понадобится папка /dist/ , которую мы создали в самом начале. Перед каждой сборкой ее необходимо очищать. Для этого будем использовать пакет NPM del . Установим его:

npm i --save-dev del

Подключим пакет del в gulpfile.js :

del = require("del");

Создадим инструкцию clean для очистки каталога / dist/ перед сборкой:

gulp.task("clean", function() { return del.sync("dist"); });

Теперь можно заняться непосредственно сборкой проекта. Создадим инструкцию build :

gulp.task("build", ["clean", "min-css", "min-js"], function() { var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]) .pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest("dist/fonts")); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src("src/*.html") .pipe(gulp.dest("dist")); });

Перед вызовом инструкции build мы очищаем папку /dist/ на тот случай, если сборка уже проводилась до этого. Затем сжимаем и объединяем JavaScript и CSS файлы с помощью инструкций min-js и min-css соответственно . Попутно компилируем SASS в CSS, т.к. перед выполнением инструкции min-css выполняется инструкция sass .

Внутри тела инструкции мы копируем подготовленные файлы проекта в каталог с готовым продуктом /dist/ . Проверяем работу инструкции:

Все отлично работает! В папке /dist/ теперь находится готовый продукт после сборки, который можно выгружать на рабочий сервер.

Заключение

На этом закончу гайд для новичков по сборке проектов в Gulp. Как видите, все довольно просто. Со временем опубликую еще несколько постов, касающихся Gulp и его плагинов, как только сам хорошенько в них разберусь. А пока пользуйтесь и автоматизируйте свои рутинные задачи во frontend разработке согласно приведенной инструкции. Если появятся вопросы – задавайте в комментариях к посту.

{ "name": "bybtc-landing", "version": "1.0.0", "description": "Landing Page for byBTC", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/Neuropassenger/bybtc-landing.git" }, "keywords": [ "landing" ], "author": "Oleg Sokolov", "license": "ISC", "bugs": { "url": "https://github.com/Neuropassenger/bybtc-landing/issues" }, "homepage": "https://github.com/Neuropassenger/bybtc-landing#readme", "devDependencies": { "browser-sync": "^2.18.13", "del": "^3.0.0", "gulp": "^3.9.1", "gulp-autoprefixer": "^4.0.0", "gulp-concat": "^2.6.1", "gulp-cssnano": "^2.1.2", "gulp-rename": "^1.2.2", "gulp-sass": "^3.1.0", "gulp-uglifyjs": "^0.6.2" } }

В этой статье рассмотрим пример Gulp окружения, которое можно использовать для комфортной фронтенд разработки веб-проекта. Данный пример по умолчанию сконфигурирован для создания сайтов и веб-приложений, в основу которых положен фреймворк Bootstrap 4.

Проект, рассматриваемый в рамках этой статьи расположен на Github по адресу: https://github.com/itchief/gulp-project-bootstrap-4

Видео к этой статье:

Инструкция по установке Gulp окружения

Для создания окружения необходимо иметь следующие установленные программы:

"Node.js" (загрузить установщик "Node.js" для своей операционной системы можно c этой страницы ; для проекта требуется версия программы не ниже 10 );
"Gulp" (установить Gulp можно посредством выполнения в консоли следующей команды: npm install -g gulp-cli).

Следующий этап – это установка npm пакетов и их зависимостей. Для этого в консоли (должны находиться в корневой директории проекта) необходимо выполнить команду:

Npm install

Данная команда установит все пакеты, которые нужны как для работы самого окружения, так и для фронтенда. Выполняет npm эти действия в соответствии с инструкциями, написанными в файле "package.json".

При использовании первой версии проекта (1.0.0), в которой используется менеджер пакетов Bower, необходимо выполнить ещё команду:

Bower install

Данная программа установит фронтенд пакеты, указанные в файле "bower.json".

Как использовать Gulp окружение?

Открыть командную строку (путь должен указывать на корневую папку проекта) и ввести gulp (обычный режим):

После ввода этой команды запустится задача по умолчанию, т.е. "default". Эта задача в свою очередь запустит серию других задач: "build", "webserver" и "watch".

Задача "build" выполнит сборку проекта для продакшена (т.е. она запустит "clean:build", "html:build", "css:build", "js:build", "fonts:build" и "image:build"). Эти задачи поместят в папку "assets/build" результирующие файлы проекта.

Задача "webserver" предназначена для запуска локального веб-сервера с «живой перезагрузкой» страниц в браузере. С помощью него можно очень просто посмотреть проект и выполнить его тестирование.

Задача "watch" используется для отслеживания изменения исходных файлов в папке "assets/src" и выполнение если это призошло различных задач. Другими словами, она позволяет автоматически запускать необходимые задачи и поддерживать результирующие файлы (содержимое папки "assets/build") в актуальном состоянии.

Кроме этого можно выполнять выборочную (самостоятельную) сборку той или иной части проекта.

Например, для сборки только CSS части сайта достаточно ввести команду:

Gulp css:build

Список других задач:

Gulp clean:build // для очистки каталога "assets/build" gulp html:build // для сборки HTML файлов gulp js:build // для сборки JS файлов gulp fonts:build // для сборки шрифтов gulp image:build // для сборки изображения

Описание Gulp окружения

В этом разделе разберём:

основные инструменты и файловую структуру Gulp окружения;
как осуществляется подключение исходников Bootstrap к проекту и их настройка;
как самостоятельно (с нуля) выполнить инициализацию Gulp проекта и установку зависимостей (без использования готового package.json)
как с нуля выполнить инициализацию Bower и установку фронтенд пакетов (без использования готового "bower.json")*;
содержимое файла сборщика проекта Gulp (gulpfile.js)

* Менеджер пакетов Bower не используется в проекте, начиная с версии 2.0.0.

Список инструментов

Окружение, предназначенное для разработки фронтенд проекта (сайта), построено на базе следующих инструментов:

Node.js (среды, в которой будет выполняться окружение);
npm (пакетного менеджера, входящего в Node.js; будет использоваться для загрузки Gulp, плагинов и фронтенд пакетов);
jQuery, Popover, Bootstrap (пакеты, которые будут использоваться для сборки css и js частей сайта);
Gulp и его плагины (будут использоваться для сборки проекта и выполнения других веб задач).

В первых версиях проекта дополнительно ещё использовался пакетный менеджер Bower. Он применялся за загрузки библиотек jQuery, Popover и Bootstrap. В версиях проекта, начиная с 2.0.0, загрузка данных библиотек выполняется посредством npm.

Файловая структура Gulp проекта

Файловую структуру проекта можно организовать по-разному. Это может зависеть как от предпочтений конкретного разработчика, так и от проекта, для которого она создаётся.

В данной статье будем придерживаться следующей структуры:

В корне проекта расположена папка "assets" и файлы "gulpfile.js", "package.json". Файл "gulpfile.js" будет содержать задачи для сборщика проекта Gulp.

В первой версии проекта также использовались файлы ".bowerrc" и "bower.json". Файл "bower.json" - это конфигурационный файл менеджера Bower, на основании которого определялись необходимые для загрузки фронтенд пакеты. В данном проекте он использовался для загрузки Bootstrap, jQuery и Popper.

В папке "assets" находятся две папки: "src" (для исходных файлов) и "build" (для готовых файлов; в эту папку их будет помещать сборщик Gulp). В папке "src" расположены каталоги "fonts" (для шрифтов), "img" (для исходных изображений), "js" (для js-файлов), "style" (для стилей) и "template" (для HTML фрагментов) и файл "index.html".

В первой версии проекта в папке "src" ещё находилась директория "bower_components". Она предназначалась для компонентов, загрузка которых выполнялась с помощью Bower. В текущей версии её нет.

В каталоге "js" распологаются два файла: "main.js" и "my.js". Файл "my.js" используется для написания своих скриптов, а "main.js" – для определения списка файлов, содержимое которых необходимо будет включить в итоговый js-файл. Под итоговым понимается файл, который должен получиться на выходе (в каталоге "build").

Директория "style" отведена под стили. В данной директории находятся три файла: "main.scss" (содержит список файлов, содержимое которых необходимо включить в итоговый файл стилей), "my.scss" (используется для написания своих стилей) и "variables.scss" (содержит SCSS переменные, с помощью которых будем изменять стили Bootstrap 4, а также использовать его для создания своих переменных).

Файл "index.html" - это главная страница создаваемого проекта. Кроме "index.html" в данную директорию можно поместить и другие html страницы.

Директория "template" предназначена для помещения в неё фрагментов HTML страниц. Например, в данной директории можно создать файлы "head.html" и "footer.html", и импортировать их содержимое (используя синтаксис //= путь_к_файлу) сразу в несколько страниц. Это позволит более просто создавать и редактировать html страницы, т.к. отдельные части страниц уже будут находиться в отдельных файлах.

Подключение исходников Bootstrap 4 к проекту и их настройка

Существуют разные способы подключения фреймворка Bootstrap 4 к проекту, а также варианты работы с ним.

Наиболее гибкий вариант заключается в использовании исходных кодов. В этом случае можно не только очень просто изменять дефолтные стили Bootstrap , но и подключать к проекту только те классы и компоненты, которые в нём будут использоваться .

Исходные коды CSS стилей Bootstrap 4 написаны на языке SCSS и представлены посредством большого количества небольших файлов.

Список SCSS файлов (расположены в каталоге "node_modules/bootstrap/scss/"): "functions.scss", "variables.scss", "mixins.scss", "variables.scss", "print.scss", "reboot.scss", "type.scss", "images.scss", "code.scss", "grid.scss", "tables.scss", "forms.scss", "buttons.scss", "transitions.scss", "dropdown.scss" и др.

Каждой такой файл выполняет либо определённую служебную задачу, либо отвечает за стилизацию какой-то определённой функции фреймворка или компонента. Файлы SCSS имеют краткие и понятные имена. Используя только их можно достаточно точно понять назначение каждого из них.

Настройка или изменение дефолтных стилей Bootstrap 4 осуществляется посредством переопределения значений переменных SCSS . Все SCSS переменные для удобства собраны в одном месте (в файле "variables.scss"). Но, переопределять их значения желательно, конечно же, не в этом файле, а в своём (например, имеющим такое же имя "variables.scss", но находящемся в "assets/style/variables.scss").

Например, изменение цвета тем success и danger , осуществляется посредством изменения значений переменных $green и $red:

// Переопределение дефолтных значений переменных Bootstrap 4 $red: #cc2eaa; $green: #2ecc71;

Обратите внимание , что после копирования переменных Bootstrap 4 в свой файл CSS ("assets/style/variables.scss"), у них необходимо убрать метку!default .

Метка!default предназначена для установления SCSS переменной значения по умолчанию. Если же у SCSS переменной уже есть значение, то новое значение, если оно указано с ключом!default , установлено не будет.

Указать какие исходные SCSS файлы Bootstrap 4 должны участвовать при компиляции в CSS, а какие нет, выполняется посредством SCSS файла "assets/style/main.scss". Другими словами именно содержимое этого файла и будем определять тот набор стилей, который после компиляции будет подключен к веб-странице.

Кроме этого, к этому файлу также подключёны файлы "assets/style/variables.scss" (для переопределения переменных Bootstrap) и "assets/style/my.scss" (для создания своих стилей).

Содержимое файла "main.scss" (пример):

// Переопределение дефолтных значений переменных Bootstrap 4 и определение своих @import "variables"; // Подключение нужных SCSS исходников Bootstrap 4 @import "../../../node_modules/bootstrap/scss/_functions"; @import "../../../node_modules/bootstrap/scss/_variables"; @import "../../../node_modules/bootstrap/scss/_mixins"; @import "../../../node_modules/bootstrap/scss/_root"; @import "../../../node_modules/bootstrap/scss/_reboot"; @import "../../../node_modules/bootstrap/scss/_type"; @import "../../../node_modules/bootstrap/scss/_images"; @import "../../../node_modules/bootstrap/scss/_code"; @import "../../../node_modules/bootstrap/scss/_grid"; @import "../../../node_modules/bootstrap/scss/_tables"; @import "../../../node_modules/bootstrap/scss/_forms"; @import "../../../node_modules/bootstrap/scss/_buttons"; @import "../../../node_modules/bootstrap/scss/_transitions"; @import "../../../node_modules/bootstrap/scss/_dropdown"; @import "../../../node_modules/bootstrap/scss/_button-group"; @import "../../../node_modules/bootstrap/scss/_input-group"; @import "../../../node_modules/bootstrap/scss/_custom-forms"; @import "../../../node_modules/bootstrap/scss/_nav"; @import "../../../node_modules/bootstrap/scss/_navbar"; @import "../../../node_modules/bootstrap/scss/_card"; @import "../../../node_modules/bootstrap/scss/_breadcrumb"; @import "../../../node_modules/bootstrap/scss/_pagination"; @import "../../../node_modules/bootstrap/scss/_badge"; @import "../../../node_modules/bootstrap/scss/_jumbotron"; @import "../../../node_modules/bootstrap/scss/_alert"; @import "../../../node_modules/bootstrap/scss/_progress"; @import "../../../node_modules/bootstrap/scss/_media"; @import "../../../node_modules/bootstrap/scss/_list-group"; @import "../../../node_modules/bootstrap/scss/_close"; @import "../../../node_modules/bootstrap/scss/_toasts"; @import "../../../node_modules/bootstrap/scss/_modal"; @import "../../../node_modules/bootstrap/scss/_tooltip"; @import "../../../node_modules/bootstrap/scss/_popover"; @import "../../../node_modules/bootstrap/scss/_carousel"; @import "../../../node_modules/bootstrap/scss/_spinners"; @import "../../../node_modules/bootstrap/scss/_utilities"; @import "../../../node_modules/bootstrap/scss/_print"; // Подключение своих SCSS файлов @import "my";

Кроме этого, для работы некоторых компонентов Bootstrap 4 нужен ещё JavaScript код.

Список js-файлов Bootstrap 4 (находятся в каталоге "node_modules/bootstrap/js/dist/"): "util.js", "alert.js", "button.js", "carousel.js", "collapse.js", "dropdown.js", "modal.js", "tooltip.js", "popover.js", "scrollspy.js", "tab.js" и "toast.js".

Определение какие js-файлы фреймворка Bootstrap 4 необходимо включить в итоговый js-файл проекта, а какие нет, выполняется посредством "main.js".

Импортирование нужных файлов в результирующий build/main.js осуществляется посредством следующей конструкции:

//= путь_к_файлу

Выполняет это действие будет Gulp плагин "gulp-rigger". Как его установить и подключить будет описано ниже.

В данный файл можно также импортировать jQuery, Popper (необходим для работы компонентов Dropdown, Tooltip и Popover) и при необходимости свои js-файлы.

Содержимое файла "main.js" (пример):

// Импортируем jQuery //= ../../../node_modules/jquery/dist/jquery.js // Импортируем Popper //= ../../../node_modules/popper.js/dist/umd/popper.js // Импортируем необходимые js-файлы Bootstrap 4 //= ../../../node_modules/bootstrap/js/dist/util.js //= ../../../node_modules/bootstrap/js/dist/alert.js //= ../../../node_modules/bootstrap/js/dist/button.js //= ../../../node_modules/bootstrap/js/dist/carousel.js //= ../../../node_modules/bootstrap/js/dist/collapse.js //= ../../../node_modules/bootstrap/js/dist/dropdown.js //= ../../../node_modules/bootstrap/js/dist/modal.js //= ../../../node_modules/bootstrap/js/dist/tooltip.js //= ../../../node_modules/bootstrap/js/dist/popover.js //= ../../../node_modules/bootstrap/js/dist/scrollspy.js //= ../../../node_modules/bootstrap/js/dist/tab.js //= ../../../node_modules/bootstrap/js/dist/toast.js // Импортируем другие js-файлы //= my.js

Как с нуля выполнить инициализацию Gulp проекта и установку зависимостей?

Начинается разработка проекта обычно с создания файла "package.json" (манифеста).

Файл "package.json" будет содержать общую информацию о проекте (название, версию, описание, имя автора и др.), а также данные о пакетах, от которых этот проект зависит.

Для создания манифеста, необходимо перейти в корневую папку проекта и ввести команду:

Npm init

После ввода команды необходимо ответить на следующие вопросы:

имя проекта (name) – "bootstrap-4";
номер версии (version) – "2.0.0";
описание (description) – "Start project with use Bootstrap 4";
автор (author) – "сайт";
git репозиторий (git repository) - "";
точка входа (entry point), тестовая команда (test command), лицензия (license), ключевые слова (keywords) – значения по умолчанию.

На вопрос «Is this ok?» ответим "yes" или нажмём Enter .

В результате в корневой папке проекта появится файл "package.json".

Теперь установим пакеты, которые будем использовать в проекте с помощью следующей команды:

Npm install название_пакета --save-dev // установка пакета, при этом информация о нём, автоматически прописывается в секцию "devDependencies" файла "package.json" npm install название_пакета --save-prod // установка пакета, при этом информация о нём, автоматически прописывается в секцию "dependencies" файла "package.json"

Ключ "--save-dev" или "--save-prod" определяет в какую секцию файла "package.json" попадёт информация о нём.

Список пакетов, которые будут использоваться в проекте:

Npm install gulp --save-dev // установка gulp npm install browser-sync --save-dev // установка browser-sync npm install gulp-autoprefixer --save-dev // установка gulp-autoprefixer npm install gulp-cache --save-dev // установка gulp-cache npm install gulp-clean-css --save-dev // установка gulp-clean-css npm install gulp-rimraf --save-dev // установка gulp-clean-css npm install gulp-imagemin --save-dev // установка gulp-imagemin npm install gulp-plumber --save-dev // установка gulp-plumber npm install gulp-rigger --save-dev // установка gulp-rigger npm install gulp-sass --save-dev // установка gulp-sass npm install gulp-sourcemaps --save-dev // установка gulp-sourcemaps npm install gulp-uglify --save-dev // установка gulp-uglify npm install imagemin-jpeg-recompress --save-dev // установка imagemin-jpeg-recompress npm install imagemin-pngquant --save-dev // установка imagemin-pngquant npm install gulp-rename --save-dev // установка imagemin-pngquant npm install jquery --save-prod npm install popper.js --save-prod npm install bootstrap --save-prod

После установки всех зависимостей, файл package.json будет иметь следующее содержимое:

{ "name": "bootstrap-4", "version": "2.0..com/itchief/gulp-project-bootstrap-4.git" }, "dependencies": { "jquery": "^3.4.1", "popper.js": "^1.14.7", "bootstrap": "^4.3.1" }, "devDependencies": { "browser-sync": "^2.26.7", "gulp": "^4.0.2", "gulp-autoprefixer": "^6.1.0", "gulp-cache": "^1.1.2", "gulp-clean-css": "^4.2.0", "gulp-rimraf": "^0.2.2", "gulp-imagemin": "^6.0.0", "gulp-plumber": "^1.2.1", "gulp-rigger": "^0.5.8", "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-uglify": "^3.0.2", "imagemin-jpeg-recompress": "^6.0.0", "imagemin-pngquant": "^8.0.0", "gulp-rename": "^1.4.0" } }

Как с нуля выполнить инициализацию Bower и установку фронтенд пакетов?

Определим папку, в которую Bower будет загружать пакеты. Для этого создадим файл.bowerrc и введём в него следующее:

{ "directory" : "assets/src/bower_components/" }

Сохраним файл.bowerrc . Теперь все компоненты будут загружаться в каталог bower_components , находящийся в assets/src/ .

Выполним инициализацию Bower (создадим файл-манифест bower.json). Создание файла bower.json можно осуществить с помощью команды (в корневой папке проекта):

Bower init Инициализация Bower

После этого необходимо ответить на следующие вопросы:

имя проекта (name) – bootstrap-4;
описание (description) – Start project on Bootstrap 4 - сайт;
автор (author) – сайт;
установить установленные компоненты как зависимости (set currently installed components as dependencies) – Y (Да);
хотите вы отметить этот пакет как приватный, это предотвратит его случайную публикацию в реестре Bower (would you like to mark this package as private which prevents it from being accidentally published to the registry) – Y (Да);
на остальные вопросы оставим ответы, предлагаемые программой по умолчанию;

В результате этих действий будет создан файл bower.json .

Загрузим Bootstrap 4 и пакеты от которых он зависит (Popper и jQuery) в наш проект с помощью Bower.

Для этого в консоли необходимо ввести следующую команду:

Bower install bootstrap#v4.0.0-beta --save

Ключ -save необходим для того, чтобы информацию о пакете записать в секцию dependencies файла bower.json .

В результате bower.json будет иметь следующее содержимое:

{ "name": "bootstrap-4", "description": "Start project on Bootstrap 4 - сайт", "authors": [ "сайт" ], "license": "ISC", "keywords": , "homepage": "", "ignore": [ "**/.*", "node_modules", "bower_components", "assets/src/bower_components/", "test", "tests" ], "dependencies": { "jquery": "^3.2.1", "bootstrap": "^v4.0.0-beta" } }

Если вы не хотите инициализировать Bower (bower.json) с помощью команды bower init и устанавливать пакеты вручную, то можете просто создать файл bower.json (например, с помощью файлового менеджера) и вставить в него вышепредставленное текстовое содержимое. Для установки зависимостей в проект достаточно будет ввести следующую команду:

Bower install

Описание файла сборщика проекта Gulp (gulpfile.js)

Все действия, выполненные до этого, были подготовительными. Весь функционал, который будет выполнять создаваемое окружение, будет определяться файлом "gulpfile.js".

Файл "gulpfile.js" представляет собой список задач.

Основные задачи которые будут выполнять этот файл:

сбор нескольких файлов стилей в один, компиляция полученного SCSS в CSS, добавление автопрефиксов, минимизация CSS и создание source map;
импорт всех необходимых js-файлов в один, минимизация этого файла и создание source map;
сбор html файла, перенос шрифтов, обработка (сжатие) картинок и автоматическое обновление страниц посредством Browser Sync.

Кроме этого чтобы эти задачи не запускать при изменении исходных файлов вручную, создадим ещё одну задачу "watch". Она будет отслеживать изменения файлов, и запускать определённые задачи автоматически.

Код файла "gulpfile.js" (при использовании Gulp 4):

"use strict"; /* пути к исходным файлам (src), к готовым файлам (build), а также к тем, за изменениями которых нужно наблюдать (watch) */ var path = { build: { html: "assets/build/", js: "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", fonts: "assets/build/fonts/" }, src: { html: "assets/src/*.html", js: "assets/src/js/main.js", style: "assets/src/style/main.scss", img: "assets/src/img/**/*.*", fonts: "assets/src/fonts/**/*.*" }, watch: { html: "assets/src/**/*.html", js: "assets/src/js/**/*.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", fonts: "assets/srs/fonts/**/*.*" }, clean: "./assets/build/*" }; /* настройки сервера */ var config = { server: { baseDir: "./assets/build" }, notify: false }; /* подключаем gulp и плагины */ var gulp = require("gulp"), // подключаем Gulp webserver = require("browser-sync"), // сервер для работы и автоматического обновления страниц plumber = require("gulp-plumber"), // модуль для отслеживания ошибок rigger = require("gulp-rigger"), // модуль для импорта содержимого одного файла в другой sourcemaps = require("gulp-sourcemaps"), // модуль для генерации карты исходных файлов sass = require("gulp-sass"), // модуль для компиляции SASS (SCSS) в CSS autoprefixer = require("gulp-autoprefixer"), // модуль для автоматической установки автопрефиксов cleanCSS = require("gulp-clean-css"), // плагин для минимизации CSS uglify = require("gulp-uglify"), // модуль для минимизации JavaScript cache = require("gulp-cache"), // модуль для кэширования imagemin = require("gulp-imagemin"), // плагин для сжатия PNG, JPEG, GIF и SVG изображений jpegrecompress = require("imagemin-jpeg-recompress"), // плагин для сжатия jpeg pngquant = require("imagemin-pngquant"), // плагин для сжатия png rimraf = require("gulp-rimraf"), // плагин для удаления файлов и каталогов rename = require("gulp-rename"); /* задачи */ // запуск сервера gulp.task("webserver", function () { webserver(config); }); // сбор html gulp.task("html:build", function () { return gulp.src(path.src.html) // выбор всех html файлов по указанному пути.pipe(plumber()) // отслеживание ошибок.pipe(rigger()) // импорт вложений.pipe(gulp.dest(path.build.html)) // выкладывание готовых файлов.pipe(webserver.reload({ stream: true })); // перезагрузка сервера }); // сбор стилей gulp.task("css:build", function () { return gulp.src(path.src.style) // получим main.scss .pipe(plumber()) // для отслеживания ошибок.pipe(sourcemaps.init()) // инициализируем sourcemap .pipe(sass()) // scss -> css .pipe(autoprefixer()) // добавим префиксы.pipe(gulp.dest(path.build.css)) .pipe(rename({ suffix: ".min" })) .pipe(cleanCSS()) // минимизируем CSS .pipe(sourcemaps.write("./")) // записываем sourcemap .pipe(gulp.dest(path.build.css)) // выгружаем в build .pipe(webserver.reload({ stream: true })); // перезагрузим сервер }); // сбор js gulp.task("js:build", function () { return gulp.src(path.src.js) // получим файл main.js .pipe(plumber()) // для отслеживания ошибок.pipe(rigger()) // импортируем все указанные файлы в main.js .pipe(gulp.dest(path.build.js)) .pipe(rename({ suffix: ".min" })) .pipe(sourcemaps.init()) //инициализируем sourcemap .pipe(uglify()) // минимизируем js .pipe(sourcemaps.write("./")) // записываем sourcemap .pipe(gulp.dest(path.build.js)) // положим готовый файл.pipe(webserver.reload({ stream: true })); // перезагрузим сервер }); // перенос шрифтов gulp.task("fonts:build", function () { return gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)); }); // обработка картинок gulp.task("image:build", function () { return gulp.src(path.src.img) // путь с исходниками картинок.pipe(cache(imagemin([ // сжатие изображений imagemin.gifsicle({ interlaced: true }), jpegrecompress({ progressive: true, max: 90, min: 80 }), pngquant(), imagemin.svgo({ plugins: [{ removeViewBox: false }] }) ]))) .pipe(gulp.dest(path.build.img)); // выгрузка готовых файлов }); // удаление каталога build gulp.task("clean:build", function () { return gulp.src(path.clean, { read: false }) .pipe(rimraf()); }); // очистка кэша gulp.task("cache:clear", function () { cache.clearAll(); }); // сборка gulp.task("build", gulp.series("clean:build", gulp.parallel("html:build", "css:build", "js:build", "fonts:build", "image:build"))); // запуск задач при изменении файлов gulp.task("watch", function () { gulp.watch(path.watch.html, gulp.series("html:build")); gulp.watch(path.watch.css, gulp.series("css:build")); gulp.watch(path.watch.js, gulp.series("js:build")); gulp.watch(path.watch.img, gulp.series("image:build")); gulp.watch(path.watch.fonts, gulp.series("fonts:build")); }); // задача по умолчанию gulp.task("default", gulp.series("build", gulp.parallel("webserver","watch")));

Код файла "gulpfile.js" содержит комментарии. С помощью них поясняется что выполняет тот или иной фрагмент инструкций.

Создание задачи в Gulp выполняется очень просто:

// создание gulp задачи (nametask – название задачи) gulp.task("nametask", function() { // действия, которые должна выполнить задача... });

Задачи в gulp построены очень просто. Их каркас действий в большинстве случаев можно представить так:

получить данные из исходных файлов;
обработать исходные данные посредством gulp плагинов;
сохранить полученный результат (файлы) в каталог "build".

Если используете Gulp 3, то содержимое файла "gulpfile.js" должно быть следующим:

"use strict"; /* параметры для gulp-autoprefixer */ var autoprefixerList = [ "Chrome >= 45", "Firefox ESR", "Edge >= 12", "Explorer >= 10", "iOS >= 9", "Safari >= 9", "Android >= 4.4", "Opera >= 30" ]; /* пути к исходным файлам (src), к готовым файлам (build), а также к тем, за изменениями которых нужно наблюдать (watch) */ var path = { build: { html: "assets/build/", js: "assets/build/js/", css: "assets/build/css/", img: "assets/build/img/", fonts: "assets/build/fonts/" }, src: { html: "assets/src/*.html", js: "assets/src/js/main.js", style: "assets/src/style/main.scss", img: "assets/src/img/**/*.*", fonts: "assets/src/fonts/**/*.*" }, watch: { html: "assets/src/**/*.html", js: "assets/src/js/**/*.js", css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", fonts: "assets/srs/fonts/**/*.*" }, clean: "./assets/build/*" }; /* настройки сервера */ var config = { server: { baseDir: "./assets/build" }, notify: false }; /* подключаем gulp и плагины */ var gulp = require("gulp"), // подключаем Gulp webserver = require("browser-sync"), // сервер для работы и автоматического обновления страниц plumber = require("gulp-plumber"), // модуль для отслеживания ошибок rigger = require("gulp-rigger"), // модуль для импорта содержимого одного файла в другой sourcemaps = require("gulp-sourcemaps"), // модуль для генерации карты исходных файлов sass = require("gulp-sass"), // модуль для компиляции SASS (SCSS) в CSS autoprefixer = require("gulp-autoprefixer"), // модуль для автоматической установки автопрефиксов cleanCSS = require("gulp-clean-css"), // плагин для минимизации CSS uglify = require("gulp-uglify"), // модуль для минимизации JavaScript cache = require("gulp-cache"), // модуль для кэширования imagemin = require("gulp-imagemin"), // плагин для сжатия PNG, JPEG, GIF и SVG изображений jpegrecompress = require("imagemin-jpeg-recompress"), // плагин для сжатия jpeg pngquant = require("imagemin-pngquant"), // плагин для сжатия png rimraf = require("gulp-rimraf"), // плагин для удаления файлов и каталогов rename = require("gulp-rename"); /* задачи */ // запуск сервера gulp.task("webserver", function () { webserver(config); }); // сбор html gulp.task("html:build", function () { return gulp.src(path.src.html) // выбор всех html файлов по указанному пути.pipe(plumber()) // отслеживание ошибок.pipe(rigger()) // импорт вложений.pipe(gulp.dest(path.build.html)) // выкладывание готовых файлов.pipe(webserver.reload({ stream: true })); // перезагрузка сервера }); // сбор стилей gulp.task("css:build", function () { return gulp.src(path.src.style) // получим main.scss .pipe(plumber()) // для отслеживания ошибок.pipe(sourcemaps.init()) // инициализируем sourcemap .pipe(sass()) // scss -> css .pipe(autoprefixer({ // добавим префиксы browsers: autoprefixerList })) .pipe(gulp.dest(path.build.css)) .pipe(rename({ suffix: ".min" })) .pipe(cleanCSS()) // минимизируем CSS .pipe(sourcemaps.write("./")) // записываем sourcemap .pipe(gulp.dest(path.build.css)) // выгружаем в build .pipe(webserver.reload({ stream: true })); // перезагрузим сервер }); // сбор js gulp.task("js:build", function () { return gulp.src(path.src.js) // получим файл main.js .pipe(plumber()) // для отслеживания ошибок.pipe(rigger()) // импортируем все указанные файлы в main.js .pipe(gulp.dest(path.build.js)) .pipe(rename({ suffix: ".min" })) .pipe(sourcemaps.init()) //инициализируем sourcemap .pipe(uglify()) // минимизируем js .pipe(sourcemaps.write("./")) // записываем sourcemap .pipe(gulp.dest(path.build.js)) // положим готовый файл.pipe(webserver.reload({ stream: true })); // перезагрузим сервер }); // перенос шрифтов gulp.task("fonts:build", function () { return gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)); }); // обработка картинок gulp.task("image:build", function () { return gulp.src(path.src.img) // путь с исходниками картинок.pipe(cache(imagemin([ // сжатие изображений imagemin.gifsicle({ interlaced: true }), jpegrecompress({ progressive: true, max: 90, min: 80 }), pngquant(), imagemin.svgo({ plugins: [{ removeViewBox: false }] }) ]))) .pipe(gulp.dest(path.build.img)); // выгрузка готовых файлов }); // удаление каталога build gulp.task("clean:build", function () { return gulp.src(path.clean, { read: false }) .pipe(rimraf()); }); // очистка кэша gulp.task("cache:clear", function () { cache.clearAll(); }); // сборка gulp.task("build", [ "clean:build", "html:build", "css:build", "js:build", "fonts:build", "image:build" ]); // запуск задач при изменении файлов gulp.task("watch", function () { gulp.watch(path.watch.html, ["html:build"]); gulp.watch(path.watch.css, ["css:build"]); gulp.watch(path.watch.js, ["js:build"]); gulp.watch(path.watch.img, ["image:build"]); gulp.watch(path.watch.fonts, ["fonts:build"]); }); // задача по умолчанию gulp.task("default", [ "build", "webserver", "watch" ]);

Online-сервисы