Урок 2. Работа с файлами

Здравствуй, друг! 🙂 В этом уроке рассматривается работа с файлами в Gulp, который должен быть установлен в проекте. Это продолжение, начало в первом уроке.

1. Создаем в корне проекта папку srs

И уже в ней:

1.1. Папку js с файлами index.js и class.js

1.2. Папку css с файлом index.css

1.3. Файл index.html

2. Ставим задачу: перенести все файлы в новую папку tmp

gulp.src — указываем путь к исходникам

** — любая вложенность папок

* — любые файлы

pipe — следующая задача

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

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

2.1. Команда: gulp

2.2. Появляется папка tmp со всеми исходниками из src

Когда указываем расширение файла, Gulp вытаскивает файлы только с указанным расширением, например, .css (см. скрин)

Это мы рассмотрели вариант, когда в строковом формате передаются исходники для Gulp.

Другой способ — передача массива.

3. Например, перенесем только css и js файлы:

с помощью записи

return gulp.src(['src/**/*.css', 'src/**/*.js']);

Файлы собираются строго по указанному порядку, у нас первым идет css, потом js.

На практике это полезно для модификации файлов в процессе сборки.

3.1. Добавляем прослушку .on на обрабатываемый файл и выводим его название в консоли:

Видим, что обрабатываются файлы index.css, class.css, index.js и выводятся их названия вместе с родительской папкой по порядку в консоли.

4. Функция dest

dest — от destination — назначение

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

Наблюдаем в консоли: выполняется задание после команды gulp; создается папку dest и перемещаются указанные файлы.

Документация: https://gulpjs.com/docs/en/api/dest#dest

5. Функция src принимает в себя также второй входной параметр, который является объектом.

Можно указывать различные опции, например, как правильно считывать файлы.

read: false указывает на то, что нам не нужно читать содержимое

Такая настройка существенно сокращает время работы скрипта. В данном случае создаются папки без вложенных файлов.

Документация: https://gulpjs.com/docs/en/api/src#src

Документация по всем функциям gulp https://gulpjs.com/docs/en/api/concepts

При написании статьи использовались материалы WebForMySelf.com

Готовлю 3-ий конспект 🙂