Начало работы со стартовыми пакетами Gulp

Разговор о CodeKit и преимуществах, которые он предлагает для разработчиков интерфейса, также появился сразу после публикации и о преимуществах, которые предлагает что- то вроде Gulp.

Сообщение о разнице между ними, о том, почему вы можете предпочесть одно другому, а также о преимуществах или недостатках каждого из них, может быть его сообщением.

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

Начало работы с глотком

Во-первых, я поклонник Homebrew, поэтому, когда дело доходит до управления пакетами, которые не являются частью Mac App Store, я использую его. Это значительно упрощает установку пакетов, их обновление и удаление.

Если вы не читали мое руководство по Homebrew, сделайте это, так как оставшаяся часть этого поста предполагает, что оно у вас установлено.

1 Установите Глоток

Если у вас установлен Homebrew, убедитесь, что все выглядит хорошо и обновлено, у меня есть полное руководство по настройке Gulp на вашем локальном компьютере.

Поэтому, если у вас еще нет этой настройки, ознакомьтесь с этим постом, чтобы узнать, как это сделать.

2 Напишите свой файл конфигурации Gulp, часть 1

Чтобы инициализировать файл конфигурации Gulp, введите следующую команду в корневом каталоге вашего проекта в терминале:

Легко, не так ли?

Это создаст пустой файл gulpfile.js в корневом каталоге вашего проекта. Далее пришло время отредактировать файл.

В этом посте я буду использовать четыре пакета, которые я описал ранее:

• глоток
• наглый глоток
• gulp-image
• проглотить-уродовать

Каждая из них отвечает за транспиляцию Sass, оптимизацию изображений и минимизацию JavaScript.

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

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

Сасс

gulp.task('sass', function(){
  return gulp.src('assets/styles/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/styles/css'))
});

JavaScript

gulp.task('js', function() {
  return gulp.src('assets/scripts/dev/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('assets/scripts'));
});

Картинки

gulp.task('images', function() {
  return gulp.src('assets/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('assets/images'))
});

Запуск их по отдельности

Выполнение этих задач по отдельности требует, чтобы вы вводили в консоль следующее каждый раз, когда хотите, скажем, транспилировать файлы Sass и минимизировать файлы JavaScript:

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

2 Напишите свой файл конфигурации Gulp, часть 2

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

Смотрите файлы и делайте что-нибудь, когда файл изменяется. Это всегда возвращает EventEmitter, который генерирует change события.

Настроить часы несложно. Это очень похоже на задачу (на самом деле она требует задачи), но также имеет специальные аргументы. Чтобы добавить задачу наблюдения, которая будет обрабатывать Sass, JavaScript и изображения, настройте в файле gulpfile.js следующее:

gulp.task('watch', function() {
    gulp.watch('assets/styles/scss/*.scss', gulp.series('sass'));
    gulp.watch('assets/scripts/dev/*.js', gulp.series('js'));
    gulp.watch('assets/images/*', gulp.series('images'));
});

Затем просто запустите задачу :

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

Примечание о версиях

В более ранних версиях Gulp второй аргумент функции наблюдения принимал массив; однако для последней версии требуется фактическая функция (которую вы можете видеть выше в том, что я объявил series ).

Суть в том, что Gulp 4 допускает последовательное выполнение, которое выполняется через серию, и параллельное выполнение (которое может использовать параллельную функцию). Это выходит за рамки этого поста, так как он предназначен исключительно для того, чтобы помочь вам начать работу.

После этого у вас должно быть намного больше автоматизации в процессе сборки.