Gulp rigger как пользоваться

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

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

Если вы часто сталкиваетесь с компиляцией Sass/Less в CCS, минификацией, конкатенацией файлов css/js, обработкой изображений и далее по списку, то наверняка слышали о Gulp. Или использовали аналогичные инструменты, вроде Grunt.

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

Какие задачи решает Gulp:

• Работа с Javascript, HTML и CSS-файлами — минимизация и конкатенация отдельных файлов в один;
• Использование CSS препроцессоров Sass, Less, Stylus, Jade и т.д.;
• Работа с изображениями — оптимизация и сжатие;
• Автоматическая простановка вендорных префиксов для CSS;
• Удаление неиспользуемого CSS (UnCSS);
• Валидация кода и его тестирование.

Без должной подготовки непросто использовать Gulp на постоянной основе. Для начала стоит детально рассмотреть, на каких принципах построен gulp.

Для работы с Gulp нужно установить Node.js. Скачать его можно по ссылке: https://nodejs.org/en/download/. Этот движок занимается процессом чтения и записи данных — потоков. Потоки предлагают удобный интерфейс для асинхронной работы с данными. Node.js вызывает соответствующие колбэки при появлении новой порции данных, возникновении ошибки, окончании потока и т.д. Таким образом, достигается эффективность ввода и вывода при минимальных затратах со стороны программиста.

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

У вас уже должен быть установлен Node.js. Откройте командную строку и введите команду:

Установка Gulp глобально

npm install – это команда, которую использует Node Package Manager для установки Gulp на компьютер.

Флаг -g указывает, что Gulp надо установить на компьютер глобально, для использования в любом месте системы.

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

Команда npm init создает файл package.json, который содержит информацию о проекте (описание проекта и зависимости).

Чтобы добавить gulp в новый проект для разработки, пишем:

Для того, чтобы развернуть имеющийся проект в package.json

Для выполнения каждой задачи в gulp есть свой плагин. Установить основные плагины для разработки вы можете по ссылке: http://gulpjs.com/plugins/

Основные понятия Gulp

gulpfile.js

Файл gulpfile.js находится в корне папки проекта. Он содержит все инструкции — какие модули используются, какие задачи выполняются. В начале файла подключается сам Gulp и его модули, которые будут использованы:

Task

Это команда, которая должна быть описана в gulpfile.js для вызова в последующей работе. Его синтаксис описания:

Task вызывается из консоли как

Выборка файлов для обработки — gulp.src

Он служит для выборки файлов, над которыми будет выполняться task:

Для обработки всех jpg из папки src/img

Для обработки всех jpg из папки src/img, включая подпапки

Для обработки всех jpg и png из папки src/img включая подпапки

Можно задавать несколько условий выборки файлов в виде массива.

Можно задавать исключения, используя “!”. Обработка всех файлов js из папки src/js кроме файла src/js/js.js

Вызов плагина для обработки — .pipe()

Этот метод обрабатывает файл с помощью указанного плагина.

Для последовательной обработки файла несколькими плагинами pipe соединяются в цепочку

Вывод результата — gulp.dest

path_to_files — это папка, в которую надо сохранить результат обработки. Например:

Описание Task

Watch

Позволяет отслеживать изменения файлов и запускать соответствующие таски gulp.watch( path_to_files, [‘task_name’] ); path_to_files — файлы, за которыми следим [‘task_name’] — массив с названиями тасков, которые надо запускать при изменении файлов.

Start

Выполняет запуск задачи

Основные задачи и плагины

CSS и препроцессоры

• С помощью плагина gulp-sass — мы можем компилировать SCSS в CSS.
• gulp-less — компилирует LESS в CSS.
• gulp-autoprefixer — добавляет префиксы браузеров для нестандартных CSS свойств.
• Плагин gulp-cssnano — минифицирует все.

При работе с JS

Используем плагин gulp-uglify.

Сжатие изображений

• для png — imagemin-pngquant

• для jpg — imagemin-jpegoptim, imagemin-mozjpeg

Включение кода другого файла gulp-rigger

Работает любом файле — js, css, scss. Он удобен для сборки в один файл, если нужно учитывать порядок включения файлов.

В дальнейшем заменяется на код файла.

gulp-cache

Обеспечивает кэширование результатов обработки файлов.

Обработка ошибок

Если в процессе обработки файла возникает ошибка, то весь таск прерывается. Дальнейшие файлы не обрабатываются.

Если таск был запущен через watch и запустился после изменения файла, то при ошибке в нем будет прервано и дальнейшее наблюдение за файлами. Чтобы такого не происходило надо отлавливать ошибки. Это делает плагин gulp-util. Его надо подключить в начале gulpfile.js.

Добавить к каждому плагину, у которого возможна ошибка:

Ошибка будет выведена в консоль, но наблюдение и обработка файлов продолжится.

Надеемся, что вам удалось применить Gulp в своей работе. На данный момент он является более эффективным инструментом при сборке проектов и web-приложений.

Есть файл bootstrap-sprockets.js в котором прописаны пути подключения файлов bootstrap

Общая структура проекта

Делаю таск для gulp, чтобы собрать это все в один файл и подключить его к index.html

Пробелы перед require учел и убрал. Что может быть не так?

Установил этот плагин, пытаюсь импортировать файл, в index.html ввожу //= footer.html , но у меня не получается.

Браузер выводит это просто как строку.

Мой gulpfile.js:

Файл package.json:

Когда в консоли вводим команду gulp html , начала появляться ошибка:

/Рабочий стол/project1$ gulp html [22:45:03] Using gulpfile