Заказать проект
Оставьте заявку для получения коммерческого предложения.
Заполните форму и мы вышлем Вам предложение в котором решим,
чем можем вам помочь.
Три шага к Gulp

Три шага к Gulp

13 Июня 2019
Николай Гоцалюк
Frontend TeamLead
Николай Гоцалюк
следующая статья

И вот наконец руки дошли до стартовой 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:

const gulp = require('gulp');

А теперь я объясню всю соль Gulp на примере простейшего таска:

			 const gulp = require('gulp');

function htmlBuild() {
  return gulp.src('src/*.html')
              .pipe(gulp.dest('buld/'));
}

gulp.task('html', htmlBuild);

Если теперь написать в консоле команду gulp html, мы запустим функцию htmlBuild, которая переложит все html-файлы из папки src в папку build и на данном этапе начинается вся магия Gulp’a. Все преобразования мы будем делать в промежутке между  gulp.src() и gulp.dest() при помощи .pipe() — он будет нам позволять вставлять промежуточные обработчики в поток (подобный функционал реализован в RxJS).

Три шага

Итак, это надо продемонстрировать наглядно на примере модуля gulp-concat. Для начала смотрим документацию и делаем эти 3 шага:

1-й шаг — установка:

npm install --save-dev gulp-concat

К слову, так будут ставится все Gulp-модули. После установки обратите внимание на package.json:

Модуль (и все последующие модули) прописался в зависимостях именно отсюда. В дальнейшем при развертывании проекта будут проставляться все нужные модули и писать каждый раз npm install --save-dev gulp-concat будет не нужно.

2-й шаг — подключение:

3-й шаг — использование:

Модуль предназначен для слияния многих файлов в один и в данном случае мы соберем все js-файли в папке plugins в один файл lib.js

			 const concat = require('gulp-concat');

gulp.task('scripts', function() {
  return gulp.src('src/js/plugins/*.js')
      .pipe(concat('lib.js'))
      .pipe(gulp.dest('build/js/'));
});

Так как мы зарегистрировали новый таск scripts, можем вызвать его из консоли:

gulp scripts

И увидим результат (я специально набросаю плагинов для примера):

Далее давайте создадим таск build, который будет исполнять оба наших таска. Так сказать, пришло время комбинировать:

			 gulp.task('build', gulp.parallel('html', 'scripts'));

С помощью .parallel() (это фича нового Gulp) мы запустим два асинхронных потока, в которых будут исполнятся наши таски.

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

npm install del --save-dev

Подключение:

del = require('del')

Использование:

			 gulp.task('clearBuild', function() {
  return del(['build/*'])
});

Чистку мы не можем проводить асинхронно, потому что она может отработать после таска, который помещает нужные файли в build. Поэтому будем запускать по очереди,  для чего воспользуемся другой фичей нового Gulp .series() и поправим  таск build:

			 gulp.task('build',
  gulp.series(
      'clearBuild',
      gulp.parallel('html', 'scripts')
  )
);

Теперь у нас сначала очиститься папка build и только потом запустятся асинхроные потоки.

Следующим шагом добавим обработку стилей. Я буду использовать gulp-sass; делаем все те же три шага:

Установка:  

npm install node-sass gulp-sass --save-dev

Подключение:

const sass = require('gulp-sass');

Используем:

			 gulp.task(css, function() {
  return gulp.src('src/scss/**/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(concat('lib.css'))
      .pipe(autoprefix({
        browsers: ['> 0.1%'],
        cascade: false
      }))
      .pipe(gulp.dest('build/css/'));
});

Кроме препроцессора соберем весь css в один файл с помощью concat(). Кроме того я использовал gulp-autoprefixer()  для автоматической подстановки префиксов.

Следующим действием добавим таски обработки для картинок и шрифтов. Сразу же отредактируем таск build. В данной статье для экономии времени я не буду использовать модули минификации изображений типа  gulp-imagemin.

			 gulp.task('img', function() {
  return gulp.src('src/img/**/*.*')
      .pipe(gulp.dest('build/img/'));
});
gulp.task('fonts', function() {
  return gulp.src('src/fonts/**/*.*')
      .pipe(gulp.dest('build/fonts/'));
});

gulp.task('build',
  gulp.series(
      'clearBuild',
      gulp.parallel('html', 'scripts', 'scriptsDev', ‘css’, 'fonts', 'img' )
  )
);

Почти готово

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

			 gulp.task('watch', function() {
 gulp.watch('src/scss/*.scss', gulp.series('css'));
 gulp.watch('src/js/plugins/*.js', gulp.series('scripts'));
 gulp.watch('src/*.html',  gulp.series('html'));
});

Watch() принимает два параметра: первый — источник за которым будет наблюдать вотчер; второй — в старом Gulp 3-й версии имя вызываемого  таска, но в Gulp 4-й версии тут нужна функция, так что воспользуемся gulp.series с именем таска.

Настроим дефолтный таск, который будет вызываться при команде gulp в консоле:

			 gulp.task('default', gulp.series('build', 'watch'));

После запуска дефолтного таска консоль перешла в режим ожидания:

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

Но и еще больше упростит жизнь browser-sync! Он развернет виртуальный узел для работы в браузере и заставит браузер реагировать на нужные нам изменения. Также есть синхронизация работы разных браузеров. Если у вас открыт проект в двух разных браузерах, вы сможете заметить, что при скроле или клике в одном из них ивенты передаются на другой. Это сторонняя библиотека, поэтому внимательно смотрим документацию для Gulp 4. Три шага:  

Установка:

npm install browser-sync gulp --save-dev

Подключение:

const browserSync = require('browser-sync').create();

Для инициализации нам потребуется конфиг:

			 const config = {
  server: {
      baseDir: "./build"
  },
  tunnel: false,
  host: 'localhost',
  port: 3333
};

Инициализировать будем в вотчере, так как это самая удобная и логичная точка.

А также заставим обновляться браузер при изменении html разметки:

			 gulp.task('watch', function() {
  browserSync.init(config);
  gulp.watch('src/scss/*.scss', gulp.series('css'));
  gulp.watch('src/js/plugins/*.js', gulp.series('scripts'));
  gulp.watch('src/*.html',  gulp.series('html')).on('change', browserSync.reload);
});

И обновлять поток для стилей и скриптов:

Запускаем новую сборку!

Давайте наконец запустим нашу сборку с помощью команды gulp:

Теперь у нас развернут локальный сервер и  открылся браузер на вкладке с адресом http://localhost:3333. Можно работать!

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

Далее для развертывания проекта вам достаточно будет написать команду npm install и все зависимости проставляться автоматически.

Need help?

Ask a question.

Chat Now
Записаться На Консультацию
Записаться На Консультацию
Мы свяжемся
с вами
в течении
10 минут
laptop
Мы свяжемся с вами в течении 10 минут