Как установить gulp linux

Обновлено: 28.06.2024

JavaScript-разработчики уделяют программированию очень мало времени. Большая часть работы включает в себя выполнение рутинных заданий:

генерирование HTML из шаблонов и файлов содержимого;
сжатие изображений;
компиляция Sass в CSS код;
удаление значений console и debugger из скриптов;
объединение и минификация файлов CSS и JavaScript;
развертывание файлов на серверах.

Это очень монотонный, отупляющий процесс. Разве не лучше было бы потратить свое время на более интересную работу? Для этого вам понадобится сборщик проектов.

Звучит сложно!

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

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

Сборщики проектов: варианты

Первым популярным решением подобного рода был Grunt – сборщик проектов, созданный на основе Node.js. Grunt был невероятно популярным. Но низкая скорость работы и сложность настройки были его слабыми местами.

Затем появился Gulp , обладающий следующими преимуществами:

Возможность просмотра файлов.
Плагины для Gulp просты и предназначены для выполнения одной задачи.
Код конфигурации на JavaScript, который легче для понимания.
Gulp быстрее из-за того, что использует потоки Node.js для передачи данных через серию плагинов.

Версии Gulp

Gulp.js 3.9.1 был единственной версией много лет. И хотя был доступен Gulp 4, его нужно было устанавливать с помощью npm install gulp@next . Причина этого заключалась в том, что плагины оставались совместимыми. Но Gulp 4 использовал новый синтаксис конфигурации.

10 декабря 2018 года Gulp.js 4.0 был объявлен единственной версией и появился в менеджере пакетов npm. Любой, кто станет использовать npm install gulp , получит версию 4. Эта версия будет использоваться и в данном руководстве.

Шаг 1: установите Node.js

Примечание: Node.js и Gulp работают в Windows, но некоторые плагины могут работать некорректно, если они зависят от собственных бинарных файлов Linux. Одним из вариантов решения проблемы в Windows 10 является подсистема Windows для Linux .

После установки запустите командную строку и введите следующую команду. Она позволит узнать номер версии:

Вскоре вы станете активно использовать npm – менеджер пакетов Node.js, который необходим для установки модулей. Узнайте номер его версии:

Затем добавьте следующую строку в конце

Шаг 2: установите Gulp глобально

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

Убедитесь, что Gulp установлен, проверив его версию:

Шаг 3: Настройте проект

Примечание: пропустите этот шаг, если у вас уже есть файл конфигурации package.json .

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

Затем нажмите « Return », чтобы принять значения по умолчанию. Файл package.json , в котором хранятся параметры конфигурации npm , будет создан автоматически.

Примечание: Node.js устанавливает модули в папку node_modules . Нужно добавить их в свой файл .gitignore , чтобы убедиться, что они не попадут в репозиторий. При развертывании проекта в другой системе можно будет запустить npm install , чтобы их восстановить.

Предполагается, что ваш проект содержит папки, перечисленные ниже.

Папка src: предварительно обработанные исходники

Содержит следующие подкаталоги:

html ‒ исходные файлы и шаблоны HTML;
images ‒ оригинальные несжатые изображения;
js – предварительно обработанные файлы скриптов;
css – предварительно обработанные файлы Sass ( .scss )

Папка build: скомпилированные/обработанные файлы

Когда понадобится, Gulp создаст файлы и подпапки:

html ‒ скомпилированные статические файлы HTML;
images ‒ сжатые изображения;
js ‒ единственный объединенный и минифицированный файл JavaScript;
css – единственный скомпилированный и минифицированный файл CSS.

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

Шаг 4: Установите Gulp локально

Теперь можно установить Gulp в папку проекта:

Эта команда устанавливает Gulp как зависимость. После чего раздел « devDependencies » в package.json обновляется соответствующим образом. В рамках этого руководства предполагается, что Gulp и все плагины являются зависимостями.

Альтернативные варианты развертывания

Зависимости разработки не устанавливаются, если в операционной системе для переменной среды NODE_ENV задано значение production . Обычно это делается на сервере с помощью команды macOS/Linux:

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

Эта команда устанавливает Gulp как зависимость приложения в разделе « dependencies » файла package.json . Сборщик будет установлен при вводе npm install и может быть запущен везде, где развернут проект.

Шаг 4: Создайте файл конфигурации Gulp

Создайте новый файл конфигурации gulpfile.js в корне папки проекта. Добавьте в него базовый код:

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

gulpfile.js ничего не сделает до того, пока вы не выполните следующий шаг.

Шаг 5: Создайте таск для Gulp

Сам по себе Gulp ничего не делает. Необходимо:

Установить плагины Gulp.
Написать инструкции (таск), которые они должны выполнить.

Большинство заданий (тасков) будут использовать:

Любое количество методов плагина может быть вызвано с помощью .pipe (plugin) между .src и .dest.

Задания для изображений

Создадим инструкцию (таск), которая сжимает изображения и копирует их в соответствующую папку сборки. Поскольку этот процесс может занять некоторое время, будем сжимать только новые и измененные файлы. Для этого понадобятся два плагина: gulp-newer и gulp-imagemin . Установите их с помощью командной строки:

Теперь можно ссылаться на оба модуля в верхней части gulpfile.js :

Затем определите функцию обработки изображений в конце gulpfile.js :

Этот код делает следующее:

Создает новую функцию таска с именем
Определяет папку out , в которой будут находиться файлы сборки.
Читает поток файлов из папки src/images/ . **/* .
Передает все файлы в модуль gulp-newer .
Передает оставшиеся новые или измененные файлы через gulp-imagemin , который устанавливает необязательный аргумент optimisLevel .
Сохраняет сжатые изображения в папку Gulp dest/images/ .
Экспортирует таск images , который вызывает функцию images .

Сохраните gulpfile.js и поместите несколько изображений в папку проекта src/images/ . Затем запустите задание из командной строки:

Все изображения будут сжаты, и вы увидите следующее:

Попробуйте снова запустить gulp images . Файлы не обрабатываются, поскольку ни одно из изображений не было изменено.

Задание для HTML

Создадим таск, который копирует файлы из исходной папки HTML. Мы можем сжать HTML-код, чтобы удалить ненужные пробелы и атрибуты, используя плагин gulp-htmlclean.

Также будет установлен плагин gulp-noop . Он не выполняет никакой операции:

Эти модули загружаются в начале gulpfile.js :

Теперь можно экспортировать функцию для обработки html в конец gulpfile.js :

Мы передаем HTML только через gulp-htmlclean , если NODE_ENV установлен на production . Поэтому HTML остается несжатым во время разработки. Что будет полезно для отладки.
Экспортируемый таск html использует series() для объединения заданий, которые выполняются друг за другом. В этом случае функция images() запускается до функции html(). В результате файлы HTML могут ссылаться на изображения.

Сохраните gulpfile.js и запустите gulp html из командной строки. Будут выполняться оба таска – html и images .

Задание для JavaScript

Обработаем файлы JavaScript, построив сборщик пакетов. Он делает следующее:

Гарантирует, что зависимости будут загружены с помощью плагина gulp-deporder . Анализирует комментарии в верхней части каждого скрипта, чтобы обеспечить правильное упорядочение – например, // requires: defaults.js lib.js .
Объединяет все файлы скриптов в один файл js , используя gulp-concat .
Удаляет значения console и debugging с помощью gulp-strip-debug при работе в режиме разработки.
Минифицирует код с помощью ES6-совместимого gulp-terser .
Добавляет карту источника в режиме разработки с помощью gulp-sourcemaps .

Установите модули плагинов:

Затем загрузите их в начало gulpfile.js :

Примечание: для большей эффективности модули gulp-strip-debug и gulp-sourcemaps загружаются только в режиме разработки.

Экспортируйте новую функцию задания:

Добавьте файлы JavaScript в папку src/js/ . Затем запустите gulp js .

Задание для CSS

Создадим задание (таск), которое будет компилировать файлы Sass ( .scss ) в один файл .css , используя gulp-sass . Это плагин Gulp для node-sass , который связан с LibSass C/C++ . Предполагается, что ваш основной файл Sass scss/main.scss отвечает за загрузку всех файлов.

Инструкция также будет использовать PostCSS через плагин gulp-postcss . PostCSS требуется собственный набор плагинов:

Source Map будет добавлена в файл CSS при повторном запуске в режиме разработки с помощью gulp-sourcemaps .

Установите все модули:

Загрузите их в начало gulpfile.js :

Теперь можно экспортировать новый таск в конец gulpfile.js . Обратите внимание, что задание images установлено как зависимость, потому что плагин postcss-assets может ссылаться на изображения в процессе сборки:

Сохраните файл, добавьте файлы Sass .scss и запустите таск из командной строки:

Шаг 6: Автоматизируйте выполнение заданий

Чтобы запустить все задания в одной команде, экспортируйте таск build в gulpfile.js :

Метод gulp.parallel() выполняет все задания одновременно. Его можно комбинировать с gulp.series() для создания сложных цепочек зависимостей. В этом примере exports.html, exports.css и exports.js запускаются параллельно. Но каждый из них может иметь последовательности зависимостей, включая таск images.

Введите в командной строке gulp build , чтобы выполнить все таски.

Кроме этого Gulp предоставляет метод .watch() , который может запускать соответствующий таск при каждом изменении файла. Он передает набор файлов или папок для мониторинга, любые и функцию таска для запуска (необязательно в методах gulp.series() ли gulp.parallel() ).

Экспортируем новый таск watch в конец gulpfile.js :

Gulp нужно знать, когда будет завершена функция таска. Этого можно добиться, используя JavaScript Promise, транслятор событий, дочерний процесс или функцию обратного вызова. В данном примере мы используем функцию обратного вызова done() , чтобы указать, что все задания watch() были настроены.

Вместо того чтобы запустить gulp watch немедленно, добавим таск по умолчанию. Его можно выполнить, запустив gulp без дополнительных аргументов:

Сохраните gulpfile.js и введите в командной строке gulp . Ваши изображения, HTML, CSS и JavaScript будут обработаны. Затем Gulp продолжит проверку обновлений и будет повторно выполнять задания по мере необходимости. Нажмите Ctrl/Cmd + C , чтобы прервать мониторинг и вернуться в командную строку.

Шаг 7: Пожинаем плоды!

Другие плагины, которые могут быть полезны:

gulp-load-plugins : загружает все модули плагинов Gulp автоматически;
gulp-preprocess : простой препроцессор HTML и JavaScript;
gulp-less : плагин препроцессора Less CSS ;
gulp-stylus : плагин препроцессора Stylus CSS ;
gulp-size : отображает размеры файлов;
gulp-nodemon : использует nodemon для автоматического перезапуска приложений Node.js при их изменении.

Таски Gulp могут запускать любой JavaScript- код или модули Node.js. Они не обязательно должны быть плагинами. Например:

browser-sync : автоматически перезагружает ресурсы, когда происходят изменения;
del : удаляет файлы и папки (может очищать папку build в начале каждого запуска).

множество плагинов ;
конфигурация с использованием pipe легко читаема и понятна;
js можно адаптировать для использования в других проектах;
упрощает развертывание;

домашняя страница Gulp ;
плагины Gulp ;
домашняя страница npm .

После применения описанных выше процессов к простому сайту его общий вес уменьшился более чем на 50%.

Что такое Gulp.js? Gulp – это отличный вариант для автоматического запуска заданий и упрощения процесса разработки.

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

Дайте знать, что вы думаете по данной теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, подписки, лайки, отклики, дизлайки!

Сегодня мы подробно рассмотрим, что такое Gulp и как с его помощью можно автоматизировать работу Front-end разработчика. В результате урока мы соберем серьезное и внушительное рабочее Front-end окружение для веб-разработки с использованием Gulp.

Основные ресурсы урока:

Установка Gulp

Обратите внимание, что при установке Node.js необходимо отметить галочками установку npm и добавление программы в Path:

После того, как Node установлен, можно приступать к установке Gulp. Откройте терминал (Командная строка в Windows) и выполните следующую команду:

Для пользователей Mac и Linux, возможно, придется выполнять команды с правами суперпользователя, sudo.

Из данной команды мы видим, что запускается менеджер пакетов npm (Node Package Manager), который командой install устанавливает Gulp в систему. Ключ -g говорит о том, что пакет установится в систему глобально, то-есть в систему, а не в папку проекта. Без ключа -g пакет устанавливаются в ту папку, в которой выполняются текущие команды, поэтому будьте внимательны.

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

Давайте создадим папку проекта для примера, с которой будем работать, пусть это будет, например, папка myproject.

Очень важно! Не создавайте русскоязычные папки проектов и следите за тем, чтобы путь до папки проекта не содержал кириллических символов, то-есть не был написан на русском языке. В противном случае, у вас могут возникнуть проблемы при работе различных утилит Gulp. Папка вашего пользователя также не должна быть русскоязычной. Всё только латинскими буквами.

Далее выполним инициализацию проекта в той папке, которую создали:

Следуя инструкциям, заполним метаинформацию о нашем проекте:

В результате такой несложной первоначальной настройки нашего нового Gulp проекта в папке myproject нарисуется новый файл package.json.

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

Давайте установим в наш проект Gulp:

Что мы видим из данной строки: npm устанавливает пакет gulp в текущую папку myproject (потому, что нет ключа -g, устанавливающий пакет глобально в систему) и сохраняет название пакета с версией в файл package.json:

Кроме того, у нас появляется папка node_modules, которая теперь содержит установленный пакет gulp и необходимые зависимости. В данную папку автоматически будут сваливаться все модули и зависимости, которые мы будем устанавливать в проект. Папок с зависимостями может быть очень много, не смотря на то, что мы установили не так уж и много пакетов. Это связано с тем, что в дополнение к основным пакетам устанавливаются программы, необходимые для корректной работы основного пакета. Ни чего чистить и удалять из папки node_modules не нужно.

Общепринятая структура каталогов в проектах

Работая с различными плагинами, программами и скриптами, будь то jQuery плагин, модуль для CMS, веб-проект или какое-то другое ПО, вы наверняка замечали, что у всех проектов есть общая структура каталогов, например, большинство проектов имеет папку dist и app. Давайте создадим первоначальную структуру нашего учебного проекта по всем правилам хорошего тона веб-разработки. В результате мы должны создать следующую структуру в нашем проекте myproject (все файлы, которых не было, пока создаем пустыми):

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

Папка dist/ будет содержать уже готовый продукт, оптимизированный, сжатый, причесанный. Это папка продакшена.

gulpfile.js

Теперь давайте откроем в редакторе кода gulpfile.js и напишем в него:

Данной строчкой мы подключаем Gulp к нашему проекту, посредством функции require. Данная функция подключает пакеты из папки node_modules в наш проект, присваивая их переменной. В данном случае, мы создаем переменную gulp.

Далее мы уже можем работать с этой переменной и создавать таски (инструкции).

gulpfile.js:

Результат выполнения команды gulp mytask:

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

Это база Gulp, теперь можно создавать инструкции. Для начала давайте создадим обработчик, который будет компилировать Sass файлы в CSS (CSS препроцессинг).

Gulp Sass

Давайте установим пакет gulp-sass в наш проект с сохранением версии и названия в package.json.

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

Далее подключим gulp-sass в файле gulpfile.js. Обратите внимание, что переменные для подключения пакетов можно перечислять через запятую:

gulpfile.js:

После этого, логичным будет выполнить в терминале наш новый таск sass:

В результате выполения данной команды в папке app/css появится файл main.css.

От таки чудеса, друзя. Как видим, все просто 🙂

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

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

Самые распространенные шаблоны выборки

Давайте внесем некоторые изменения в таск sass и сделаем его более универсальным:

Дело в том, что брать напрямую один отдельный файл не всегда удобно, так как в папке sass могут появиться и другие файлы с расширением sass, которые могут использоваться в проекте.

Обратите внимание, что файлы sass, которые предназначены для импорта в другие файлы, как части одного общего, начинаются с нижнего подчеркивания _part-1.sass. Такие файлы не учавствуют в компиляции, как отдельные файлы, а добавляются через @import в основные файлы.

Наблюдение за изменениями в файлах (Gulp Watch)

Gulp поддерживает метод watch для проверки сохраняемых файлов и имеет следующий синтаксис:

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

Что мы видим: Gulp наблюдает за всеми sass файлами и при сохранении выполняет таск sass, который автоматически компилирует их в css файлы.

Также, мы можем создать отдельный таск для наблюдения за всеми необходимыми файлами

Если мы запустим в консоли gulp watch, то Gulp будет автоматически следить за всеми измененями в файлах sass при сохранении и компилировать их в css.

Было бы неплохо в дополнение к этой красоте сделать автоматическую перезагрузку страницы при изменениях в файлах. Для этой задачи нам подойдет Browser Sync.

Автоматическое обновление страниц с использованием Bbrowser Sync

Мы уже умеем устанавливать дополнения для Gulp, поэтому давайте установим Browser Sync в наш проект:

И, конечно-же, подключим в файле gulpfile.js, как мы это делали ранее с пакетом gulp-sass.

Создаем таск для Browser Sync:

Отлично! Наш сервер для работы и автоматического релоада готов. Теперь давайте последим за изменениями в Sass. Если файл Sass обновляется, автоматически инжектим в HTML измененный CSS файл:

Расположим таск watch после всех других тасков и в результате получим такой gulpfile.js:

Для того, чтобы следить за изменениями в браузере, сделаем соответствующую разметку в файле index.html директории app с подключением файла стилей main.css:

Давайте разберемся, что у нас происходит в консоли:

И эта задача нам по плечу:

Здесь мы используем функцию browserSync.reload, которую нам любезно предоставил пакет Browser Sync. Обратите внимание на выборку файлов для слежения.

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

Оптимизация JavaScript

Давайте рассмотрим, как можно оптимизировать JS файлы проекта. Чаще всего, в оптимизации нуждаются библиотеки и сторонние jQuery и JavaScript плагины. Давайте создадим в папке app паку libs, которая будет содержать необходимые проекту библиотеки. Все библиотеки будем размещать в отдельных папках. Для установки новых библиотек я советую использовать Bower.

Обратите внимание, что для работы Bower необходим установленный Git.

Теперь в папке проекта создадим файл .bowerrc, в который напишем:

Если вы пользователь ОС Windows, у вас не получится создать файл, начинающийся с точки. Воспользуйтесь FileZilla или каким-нибудь файловым менеджером для этой задачи.

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

Установим jQuery и Magnific Popup, для примера:

code
source

bower i jquery magnific-popup

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

Давайте создадим таск scripts, который будет собирать все JS файлы библиотек в один и минифицировать файл. Для этого установим 2 пакета: gulp-concat и gulp-uglifyjs.

Подключим новые библиотеки в gulpfile.js:

Создаем задачу для сборки и сжатия всех библиотек (перед watch):

Давайте проверим, как работает наш новый таск scripts, выполнив в терминале:

Выполнение таска scripts можно запустить перед выполнением watch:

Внимание! В новых версиях gulp-sass для импорта CSS файлов в Sass необходимо указывать расширение .css

На выходе, в папке app/css мы получаем дополнительно к main.css файл libs.css, который содержит стили всех библиотек. Файл main.css нет особого смысла минифицировать, так как он содержит кастомные (пользовательские) стили. А вот файл libs.css мы с удовольствием минифицируем.

Для минификации CSS установим пакеты gulp-cssnano и gulp-rename:

И подключим их в нашем gulpfile.js:

И создадим соответствующий таск css-libs. Сразу добавим данный таск в watch для того, чтобы библиотеки собирались в процессе запуска проекта. Таск sass лучше вызвать до запуска css-libs, чтобы нам было что минифицировать:

Подготовка к продакшену

Для продакшена (сборки в папку dist) мы создадим отдельный таск build в конце gulpfile.js. В данной инструкции мы осуществим сборку Sass, JS и выгрузку того, что у нас готово в папку dist.

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

Установим и подключим пакет del:

Создаем таск очистки clean и добавляем его выполнение перед выполнение build:

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

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

В папке app/img есть 3 изображения, которые нам необходимо перенести в папку продакшена, оптимизируя.

Для оптимизации изображений установим 2 пакета (gulp-imagemin, imagemin-pngquant) и подключим их:

Далее создадим таск img для сжатия изображений на продакшен и вызовем его после очистки:

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

Установи м подключим gulp-cache:

Модифицируем таск img:

Автоматическое создание префиксов CSS с помощью Gulp

Вендорные префиксы необходимы для обеспечения максимальной совместимости со всеми современными браузерами. Было бы логично сделать автоматическое добавление префиксов, чтобы написав в CSS или Sass:

Мы получили на выходе:

code
source

display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;

Установим пакет gulp-autoprefixer и подключим его в gulpfile.js:

И модифицируем наш таск sass:

Дефолтный таск Gulp

Также, необходимо создать автономный таск для очистки кеша Gulp, чтобы его можно было вызывать простой командой gulp clear:

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

В результате, у нас должен получиться такой gulpfile.js:

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

Где-нибудь создать папку, к примеру к корне диска С, называем gulp, и в ней папка myproject. Главное, чтобы в пути к ней не было русских букв.

В окне команд пишем:

там нужно будет ответить на несколько вопросов:

это установка зависимостей пакетов, которые работают вместе с gulp. В нашей папке появилась папка _node_modules.

Устанавливаем проверку обновлений пакетов в gulp

Нужно установить проверку обновлений всех пакетов, которые мы наустанавливаем в галп:

Поэтому надо написать:

В нашей папке myproject надо создать такую структуру папок:

В корне создаем папки app и dist

Внутри app:

Не забыть создать файл index.html.

Создаем файл gulpfile.js в корневой папке.

Проверяем работу gulp. Открываем этот файл и пишем в него:

ОБЯЗАТЕЛЬНО ТОЧКУ С ЗАПЯТОЙ В КОНЦЕ!! Иначе не заработает.

Шаблон для создания любой задачи (task) в gulp:

Т.е. откуда брать файл, что с ним сделать и куда отгрузить.

РЕАЛЬНО ЖЕ в него пишем следующее, все с самого начала:

Заходим в папку app>sass и создаем там файл main.sass.

Пишем в него хотя бы что-нибудь, чтобы проверить работу:

Возвращаемся в файл gulpfile.js и пишем в него (добавляем строки):

Теперь в командной строке запускаем gulp sass .

В итоге создастся файл main.css в папке app>css, скомпилированный и оптимизированный уже.

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

Дополнительно

В папке sass можно создать файл с именем, начинающимся с нижнего подчеркивания, например _part.sass. Такие файлы не участвуют в комплияции как отдельные файлы. Их надо просто импортировать командой @import в основной файл. Т.е.:

В файл main.sass в самое начало добавляем импорт и получаем:

В итоге этот фрагмент будет в начале того файла, куда импортируешь. То есть если в main.sass написать, то этот фрагмент будет в итоговом скомпилированном main.css.

Автоматическая компиляция файлов sass при сохранении

Используется метод watch. Синтаксис такой:

Чтобы выйти из этого режима слежения нужно нажать Cntrl+С ДВА РАЗА .

LiveReload

Останавливаем режим слежения (если запущен) Cntrl+С ДВА РАЗА и устанавливаем эту штуку:

Установить установили, а теперь нужно подключить его в gulpfile.js.

добавляем эту строку

то есть теперь начало в файле получается таким:

теперь надо написать таск (выполнение задачи) для браузер-синка:

Чтобы автоматически отражались не только css, но и html и js, нужно добавить пару строк в таск watch:

Создаем папку libs в папке app. Туда мы будем сваливать все какие-то библиотеки, jquery плагины и другие плагины.

Bower

Для установки новых библиотек лучше использовать Bower (используется для установки новых плагинов)

устанавливаем его npm i -g bower

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

В корневой папке myproject создаем файл .bowerrc (начинающийся с точки).

сохраняем. Так, он говорит менеджеру пакетов куда устанавливать новые плагины.

Теперь для примера установим два плагина, в командной строке пишем:

появятся две папки jquery и magnific-popup в папке app>libs.

Установить два пакета для сбора всех файлов js и минизации:

npm i gulp-concat gulp-uglifyjs --save-dev

После установки любой приблуды, надо не забывать подключать ее в файле gulpfile.js, поэтому добавляем там строки:

Создаем таск для этой утилиты:

Подключаем jquery в html.

В конце тега body добавляем строки:

т.е. общую сжатую библиотеку и ручной (common.js), он обычно не сжимается, т.к. весит немного.

В папке app>sass создаем файл libs.sass, куда будем сваливать все css библиотеки.

Устанавливаем утилиты, которые будут сжимать css и добавлять в название суффикс mini:

И опять после установки их нужно подключить в основном файле gulpfile.js. последние 2 строчки это они:

пишем таск для них:

Подключаем css стили в html документ:

Сваливаем готовое в папку dist

Для этого создаем таск

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

Для этого устанавливаем утилиту для удаления файлов, пишем в командной строке:

После успешной установки, ее надо подключить в файл gulpfile.js, как обычно:

Оптимизация изображений в gulp

Устанавливаем пакет для оптимизации изображений

Подключаем его в gulpfile.js

Пишем таск для них.

И вставляем вызов этого таск в таск build, т.е. добавляем

теперь при запуске таска build будут все эти таски выполняться последовательно, которые в него запихали.

Если изображений много, то надо установить кеш

потом подключаем его в начале файла gulpfile.js:

И немного модифицируем после этого таск img:

Если мы поменяем папку для изображений или файлы, которые хотим оптимизировать, то у нас не будет работать минификация изображений из-за кеша.

Поэтому надо написать новый таск для очистки кеша:

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

Автоматическое создание вендорных префиксов в gulp

Для этого сначала устанавливаем пакет:

Как всегда теперь подключаем его в начале файла.

И добавляем новый пайп в таск sass:

Резюме

Итоговое содержание файла gulpfile.js

Итоговое содержание файла package.json

Структура папок

п.с. статья построена на базе видосика канала webdesigner master:

В этой статье будем знакомиться с новым менеджером задач (task manager) под названием Gulp. Постепенно вместе с вами я пройду весь процесс - от установки Gulp до установки плагинов, создания задач, отслеживания ошибок и еще многое другое.

Но для начала узнаем, что такое Gulp. Это точно такой менеджер задач, как и Grunt. Оба они являются модулями под Node.js и устанавливаются с помощью пакетного менеждера npm .

Отличие от Grunt в том, что Gulp является переработкой Grunt. Как говорят его разработчики, цель создания была в том, чтобы выбросить из Grunt все лишнее. Кроме того, настройка Gulp значительно упростилась:

На сегодня однозначным преимуществом Gulp перед Grunt является скорость обработки файлов - она в разы выше, чем у старенького Grunt.

Установка Gulp

Установка будет производиться под операционной системой Linux Mint 17 Cinnamon. Поэтому, пользователи Mac OS найдут все нижеприведенные команды абсолютно идентичными для себя. Подразумевается, что в системе уже установлен Node.js и менеджер пакетов npm.

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

Затем создадим тестовую директорию с именем gulp_test , в которой будет производить наше знакомство:

В этой директории создадим файл package.json и пропишем в нем имя проекта и его версию:

Этого будет достаточно. Теперь установим Gulp внутри директории gulp_test . При этом воспользуемся ключом --save-dev , который будет “говорить” менеджеру пакетов npm вносить в файл package.json все устанавливаемые им пакеты в качестве зависимостей проекта:

Теперь снова посмотрим на содержимое файла package.json и увидим, что npm добавил Gulp в качестве зависмости:

Установка завершена и можно переходить к использованию этого менеждера задач.

Первый запуск Gulp

Менеджер задач - само слово говорит за себя, это программа для управления задачами. В Gulp все задачи прописываются в одном единственном файле gulpfile.js . Первоначально этого файла не существует и его нужно создать самостоятельно, вручную:

Затем в нем пропишем первую задачу. Все задачи деляться на два неравнозначных типа: задача по умолчанию (default task) и именованные задачи (named tasks). Разница между ними в том, что задача по умолчанию имеет имя default , которое можно и не указывать. Кроме того, задача по умолчанию запускается в консоли всего одной командой:

В то время как именованная задача (named task) может иметь произвольное имя. Запуск такой задачи в консоли выполняется с указанием имени конкретной задачи:

Еще один важный момент заключается в том, что этот менеджер задач является потоковым. Что это значит? Не знаю, получиться ли у меня достаточно точно объяснить данный вопрос, но вот линуксоиды, хорошо знакомые с командной строкой, меня должны понять. В консоли Linux (Unix) есть такое понятие, как pipe.

Например, простая команда:

… выполняет следующее: результат команды ls -l перенаправляется для обработки в программу less . Редактор less автоматически открывается в консоли с уже готовым для чтения текстом внутри себя.

Чисто схематично такой пример можно усложнить и представить в таком виде:

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

Принцип работы Gulp точно такой же. Только вместо программ в нем используются плагины (я не забыл сказать, что он имеет модульную структуру?):

Отлично! С теорией закончили и можно снова возвращаться к практике, к нашему файлу настроек gulpfile.js . Откроем его и пропишем в нем такие строки:

Первая строка var gulp = require('gulp'); создает переменную gulp , в которую помещается сам Gulp. Это необходимо для Node.js, который будет читать файл gulpfile.js и работать с Gulp в виде переменной gulp .

Вторая строка, начинающаяся с gulp.task - это не что иное, как задача. Именно так создаются задачи в этом менеджере. Здесь 'default' - это имя задачи (в данном случае это задача по умолчанию, как вы помните). Функция function() имеет в своем теле неограниченное количество инструкций. Так как мы еще не умеем работать с плагинами под Gulp, то в качестве инструкции пропишем вывод в консоль обычной текстовой строки - console.log('Hello from Gulp!') .

Давайте попробуем запустить наш менеджер задач, чтобы посмотреть, а работает ли он вообще? И как он работает? Для этого переходим в консоль и вводим в ней одну единственную команду gulp :

Вот это да! А что означают все эти строки в консоли? Означают они только хорошее! Строка Using gulpfile

/Projects/gulp_test/gulpfile.js говорит о том, что Gulp для своей работы воспользовался файлом настроек gulpfile по указанному пути. Затем было запущено выполнение задачи с именем default - Starting 'default'. . Результатом выполнения этой задачи был вывод в консоль строки - Hello from Gulp! . И задача с именем default благополучно завершилась - Finished 'default' after 169 μs , причем на ее выполнение ушло 169 миллисекунд.

Можно поздравить самих себя - мы только что создали и запустили на выполнение свою первую задачу под Gulp!

TypeScript - размеченные объединения

> Пользовательское объединение типов - что это и как можно использоватьПомимо объединения **примитивных** типов данных (например):

Читайте также: