Несколько пакетов Gulp для начинающих

Такие программы, как Gulp и другие утилиты, не новы. Для тех, кто не использовал их раньше, может быть немного сложно начать работу (но на самом деле этого не должно быть).

По сравнению с такими инструментами, как CodeKit (который мне до сих пор нравится и который я рекомендую, в зависимости от проекта), у них немного больше накладных расходов, связанных с их установкой, настройкой и подготовкой к работе.

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

Хотя цель поста не в этом. Вместо этого, вот список нескольких пакетов для начинающих.

Думайте о них так: если вы ищете способы работы с Sass, JavaScript и оптимизацией изображений, это хорошие библиотеки.

Пакеты Gulp для начинающих

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

То есть не просто копируйте и вставляйте то, что я предоставил. Используйте его в качестве отправной точки, но также прочитайте документацию. Вы можете не найти ничего нового.

Опять же, вы можете обнаружить, что есть варианты настройки вашего конкретного проекта.

1 Сасс

Вы можете работать с Less (на самом деле я ни здесь, ни там), но я предпочитаю Sass. Поэтому я использую библиотеку gulp-sass специально для компиляции файлов Sass в CSS.

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

В  каталоге стилей у меня есть два подкаталога:

1. scss
2. css

Я храню все свои файлы SCSS в соответствующем каталоге, а затем использую gulp-sass для вывода скомпилированных файлов в CSS.

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

Оттуда я ставлю файлы CSS в очередь, используя необходимую функцию WordPress API.

2 Минификация JavaScript

На данный момент преимущества минимизации файлов JavaScript были доказаны снова и снова, поэтому я не буду останавливаться на этом.

Есть несколько пакетов, которые я пробовал, поскольку они связаны с работой с минификацией JavaScript, и gulp -uglify — это тот, который мне нравится использовать больше всего.

Вспомните из предыдущего раздела, что у меня есть  каталог с ресурсами, а внутри него — подкаталог со сценариями . Этот каталог содержит один собственный подкаталог: dev.

Я беру файлы JavaScript, которые находятся в dev, и вывожу их в корень каталога scripts .

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

Оттуда, как я делал выше, я ставлю их в очередь, используя ту же функцию WordPress API.

3 Оптимизация изображения

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

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

[изображение]

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

• картинка в гифке,
• изображение в jpegtran,
• оптимизация изображения,
• imagein-svgo.

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

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

Обратите внимание на приведенный выше код (и то, что я упоминал ранее), что мой  каталог изображений находится в ресурсах, поэтому, когда я запускаю задачу, как указано выше, она оптимизирует любой из поддерживаемых типов изображений в этом месте.

Файлы пакетов, файлы Gulp и все такое?

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

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