Как установить gulp mac os
Обновлено: 03.07.2024
Gulp — это таск-менеджер для автоматического выполнения часто используемых задач (например, минификации, тестирования, объединения файлов), написанный на языке программирования JavaScript.
Программное обеспечение использует командную строку для запуска задач, определённых в файле Gulpfile.
Создан как ответвление от проекта Grunt, чтоб взять из него лучшие практики. Распространяется через менеджер пакетов NPM под MIT лицензией.
Если Вы будете копировать код с этой страницы - имейте в виду, что я ставлю кое-где лишние проблелы - исключительно для того, чтобы текст лучше помещался на экран. Смело удаляйте их.
Это основная статья об использовании Gulp. В данный момент Вы можете помимо этой прочитать также статьи:
Установка
Рассмотрим установку с помощью npm. Подразумевается, что nodejs Вы уже установили.
О том как установить npm читайте в моей статье Установка npm
О том как установить более старую версию Gulp - Установка архивной версии Gulp
$ npm install gulp-cli --global
C:\Users\ao\AppData\Roaming\npm\gulp -> C:\Users\ao\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js + gulp-cli@2.2.0 updated 7 packages in 7.386s
Проверить версию gulp
CLI version: 2.2.0 Local version: Unknown
Про установку не последней, а какой-то определённой версии Gulp читайте здесь
Затем переходим непосредственно к установке gulp в текущий проект
$ npm install gulp --save-dev
Добавив ключ --save-dev мы указали, что теперь сохраняем в ветку dev, так как Gulp это пакет, которым мы будем пользоваться в разработке, но на хостинг выкладывать его не будем, так как на сайте он ничего делать не будет. Вся работа Gulp будет на стороне разработчика.
Посмотрим, как изменился наш файл package.json
Подробнее о том, зачем этот файл нужне читайте в статье npm
Появился раздел devDependencies, в который в будущем я добавлю ещё довольно много пакетов.
Если теперь посмотреть содержимое папки node_modules можно увидеть, что установка Gulp добавила не одну папку, как, например, сделал бы jquery а несколько десятков.
Старые версии npm создавали всегда одну папку и размещали все зависимости туда.
Новые версии npm сохраняют зависимости в родительскую папку node_modules.
Установка более старой версии
Иногда бывает нужно установить не текущую, а более ранню версию Gulp.
Особенно это касается версии 3.9.1 , которая сильно отличается от 4 и выше.
npm install gulp@3.9.1 --save-dev
npm install gulp-cli@1.2.1 --save-dev
Список версий Gulp находится здесь , Gulp-cli - здесь . Нужно открыть вкладку Versions
Если Вы хотите сперва удалить Вашу версию Gulp а уже потом установить другую - сделать это можно командой uninstall
npm uninstall gulp
Gulpfile.js
После установки Gulp нужно в корневой директории проекта (в моём случае - heiheiru) создать файл gulpfile.js в который мы будем записывать инструкции для Gulp.
Первым делом запишем туда
Начиная с верси 4.0 можно пользоваться новым синтаксисом JavaScript (ES2015+)
Но для этого нужно устанавливать babel и следить чтобы не было ошибок. Я видел на форумах жалобы, сам пока не пробовал.
После того как файл gulpfile.js создан можно запустить Gulp
[11:22:35] Using gulpfile
\Desktop\Sites\heihei\gulpfile.js [11:22:35] Task never defined: default [11:22:35] To list available tasks, try running: gulp --tasks
Gulp жалуется на то, что не определно задание по умолчанию - default task
Нужно его определить
default запустится но теперь Gulp пожалуется на непонятное закрытие.
[11:31:44] Using gulpfile
Эту ошибку можно устранить несколькими способами. Подробности здесь. Я пользуюсь следующим:
Организация файлов
Чтобы не создавать каши из файлов и папок организуем всё правильно с самого начала.
Корневая папка носит называние проекта. В моё случае heihei или heiheiru
В этой папке мы инициализируем GIT и npm.
npm создаст папку node_modules и файлы package.json , package-lock.json.
Для GIT мы сами рано или поздно создадим файл gitignore
Так как мы будем пользоваться Gulp появится и файл gulpfile.js
С ростом числа заданий, которые будет выполнять Gulp нам станет неудобно хранить их все в одном файле.
В gulpfile.js мы будем только импортировать другие .js файлы по принципу - на каждое задание один файл.
Чтобы хранить эти файлы нам будет нужна папка, назовём её gulp и создадим в корневой. Внутри неё создадим подпапку tasks
Так будет выглядить дерево папок в редакоторе Sublime
Примеры использования Gulp
Обработка файлов стилей
При разработке удобно пользоваться метаязыками, например, SASS.
Установим его с помощью npm
npm install gulp-sass --save-dev
Теперь можно объявить переменную sass и пользоваться этим препроцессором
const и let - были введены в JavaScript начиная с ES6 и для современного JavaScript являются более предпочтительным вариантом чем var
gulp-watch
gulp-watch это название плагина для Gulp, который отслеживает изменение файлов. Начиная с четвёртой версии Gulp gulp-watch включен в основной пакет и не требует отдельной установки.
Начнём с простого - делаем функцию, которая при каждом изменении файла index.html в папке app будет выводить предупреждение.
Как это выглядит в Gulp 4
Чтобы запустить мониторинг пишем
[20:12:19] Using gulpfile
Теперь вносим изменения в файл index.html и сохраняем
Как это выглядело в Gulp 3
Создадим папку /app/assets/styles/ , в которой будут файлы .css для разработки
Напишем функцию, которая будет собирать все файлы .css из этой папки, обрабатывать их с помощью sass и соединять в один файл /app/temp/styles/style.css
Мы уже писали такую функцию выше, просто немного изменим её.
Добавим мониторинг файлов CSS gulp.watch( "./app/assets/styles/**/*.css", style);
Теперь как только мы отредактируем один из файлов стилей watch заметит это изменение, пропустит его через sass, соберет все файлы в один.
Зачем нужен SASS:
чтобы пользоваться css переменными. Создать переменную, которую потом вставлять в .css пропускать через sass compiler и когда вдруг везде нужно будет изменить значение этой переменной, например, на сайте изменится основной цвет, всё что нам нужно будет сделать - это поменять одну переменную в одном файле.
чтобы делать вложения в стилях (nested css)
чтобы использовать mixins
PostCSS
До этого Вы уже прочитали про препроцессор SASS, который наряду с LESS и Stylus является стандартом для многих проектов.
Я не пользуюсь ими, а предпочитаю более современный PostCSS, который имеет более модульную структуру, и соответственно более гибкий в настройке и быстрый
Подробнее про PostCSS Вы можете прочитать в статье PostCSS.
Советую разобраться с PostCSS и возвращаться в эту статью либо в одну из следующих, более продвинутых глав.
Я не стал размещать описание работы с PostCSS здесь, потому что его можно запускать не только с помощью Gulp
Видеоуроки Gulp
Видео много весят, поэтому я выделил для них отдельную страницу - Видеоуроки Gulp
Ошибки
SKIPPING OPTIONAL DEPENDENCY: fsevents
Ошибка при установке gulp. Вы выполняете
$ npm install gulp --save-dev
npm WARN heihei No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted (current: )
+ gulp@4.0.2
added 314 packages from 217 contributors and audited 6490 packages in 30.037s
found 0 vulnerabilities
Скорее всего Вы не инициализировали npm. Нужно выполнить
Ввести нужные данные (либо просто нажимать Enter), после чего создастся файл package.json и можно будет вернуться к установке gulp
Может быть вызвана, например, несуществующей переменной. Допустим Вы добавили цвет как переменную, но нигде её не задали.
Unexpected identifier
Если Вы запустили Gulp
И получили что-то похожее
SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at execute (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18)
at Liftoff.handleArguments (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\index.js:201:24)
at Liftoff.execute (C:\Users\ao\AppData\Roaming\npm\
node_modules\gulp-cli\node_modules\liftoff\index.js:201:12)
Скорее всего Вы пытаетесь использовать синтаксис ES2015+ и не установили babel или он работает но с ошибкой.
Здесь два выхода - разобраться и настроить либо перейти к старому синтаксису с require
Did you forget to signal async completion?
Причина в том, что начиная с Gulp 4 нужно указывать окончание выполнения асинхронного кода. Третий Gulp при отстутствии такого сигнала просто решил бы, что код синхронный. В четвёртом так не получится.
Эту ошибку можно устранить несколькими способами. Я пользуюсь самым простым - в таске использую не анонимную функцию а называю функцию, например cb (от слова callback), а в конце таска вызваю её без аргументов:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted (current: )
Это предупреждение о несовместимости пакета fsevents с Windows, как Вы можете убедиться здесь fsevents нужен для работы с iOS поэтому можно просто проигнорировать.
Где-нибудь создать папку, к примеру к корне диска С, называем 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:
От автора: Gulp – инструментарий, облегчающий жизнь веб-разработчика, с его помощью можно задавать различные задачи. Часто используется для таких front-end задач как: поднятие сервера, автоматическое обновление страницы браузера в любой момент сохранения файла, использование препроцессоров как Sass или LESS, оптимизация CSS, JavaScript и изображений.
Это далеко не полный список возможностей Gulp. Если постараться, то можно даже создать генератор статических сайтов (я делал!). Так что да, Gulp это очень мощный инструмент. Однако, если вы хотите в нем разобраться, придется потратить время на изучение Gulp.
Именно для этого и написана данная статья. В статье так хорошо расписаны основы, что после нее вы сможете уже сами продолжить изучать этот таск раннер. Прежде чем мы перейдем к подробностям, поговорим о том, почему вы предпочтете Gulp другим схожим инструментам.
Почему Gulp?
Приложения на подобие Gulp относятся к так называемым «таск раннерам», так как они используются для запуска задач по сайтостроению. Два саммых популярных менеджера задач на сегодня это Gulp и Grunt. Но кроме названных, конечно, существуют и другие. Broccoli больше используется для компиляции ресурсов, одна из наиболее распространенных задач в таск раннерах.
Существует уже масса статей по поводу различий между Grunt и Gulp, и почему одно приложение стоит использовать, а другое нет. Brunch по типу задач тоже очень похожа на описанные выше программы, также выполняет такие задачи связанные с сервером или проверкой файлов.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Все отличие в том, как вы организуете рабочий процесс в этих программах. Если сравнивать с Grunt, то Gulp намного быстрее и проще настроить, плюс он еще и запускается быстрее. А теперь давайте, собственно, разберемся, как начать работу с Gulp.
Что необходимо настроить
К концу это статьи у вас будет настроенная программа, которая будет способна выполнять описанные в начале статьи задачи:
Компиляция Sass в CSS
Обновление браузера при любом сохранении файлов
Оптимизация всех ресурсов (CSS, JS, шрифты и изображения)
Также вы узнаете, как связать две разные задачи набором простых команд. Начнем с установки Gulp на ваш компьютер.
Первые шаги в разработке могут быть сложными – ведь вы еще не знаете об инструментах и средствах, которые могут облегчить вашу задачу. О них – эта статья от преподавателя GeekBrains Артема Шашкова. Здесь состоится ваше знакомство со средой разработки, с Node.js и NPM, а также Gulp. Интересно? Тогда загляните и в вебинар Артема Шашкова «Настройка среды разработки Frontend-разработчика» – чтобы увидеть, как применить на практике материал статьи.
Выбираем среду разработки
IDE – Integrated Development Environment, или интегрированная среда разработки – это система программных средств, предназначенная для создания ПО. Сред существует много: от бесплатных, с минимально достаточным функционалом, до мощных платных программ с внушительной ценой. Рекомендация новичкам – бесплатный Visual Studio или Brackets. Если цена для вас – не преграда, то попробуйте продукт от JetBrains.
Выбираем IDE, устанавливаем и запускаем ее, и создаем пока пустой проект. Еще немного теории – и начнем писать «магические заклинания», которые помогут в разработке.
Таск-менеджер и Ко
Чтобы «творить магию», потребуется таск-менеджер, предназначенный для автоматического выполнения часто возникающих задач. Наиболее популярны Grunt, Webpack и Gulp. Первый уже устарел и не блещет скоростью, второй быстро новичку не поддастся – сложноват в освоении. А Gulp – то, что нужно: быстрый и простой.
Gulp написан на JavaScript. Для работы с ним используется командная строка, а задачи описываются в специальном файле – gulpfile. Для работы с Gulp понадобятся Node.js и NPM.
Node или Node.js – это программная платформа. Она основана на движке V8, который транслирует JavaScript в машинный код. Node.js превращает JavaScript из узкоспециализированного – в язык общего назначения. Берем платформу отсюда и ставим LTS-версию, так как она протестирована и стабильна.
NPM (Node.js Package Manager) – это менеджер пакетов, входящий в состав Node.js. С его помощью будем устанавливать все необходимое для работы.
Устанавливаем и настраиваем инструментарий
Работать будем в консоли (терминале), так что открываем ее либо в IDE, либо отдельно. Создаем в IDE новый проект (например, «frontend»). Проверяем, успешно ли установился Node.js: набираем в консоли:
Если все сделано правильно, в консоли увидим версию ПО. Если нет – пробуем перезапустить консоль или переустановить Node.
Node установилась, NPM на месте – можно инициализировать проект. Переходим в консоли в корневую папку проекта и пишем там же:
На все вопросы отвечаем утвердительно – нажимаем «Enter» (эти настройки пока нам не интересны). По завершении в корне проекта получаем файл package.json – это своего рода «инструкция по сборке». В нем хранится информация о всех зависимостях, задействованных в проекте.
Устанавливаем Gulp: сначала глобально, а далее уже локально – в каждом проекте, где планируется его использовать. Будем работать с четвертой версией, где есть интересные и полезные новые фишки.
Пишем в консоли:
Первая команда ставит Gulp глобально, а вторая – непосредственно в наш проект.
Процесс может занять некоторое время – ждем.
После успешной установки в проекте появится папка node_modules, а в файле package.json – следующие строки:
Это наша новая зависимость! В больших проектах таких могут быть десятки.
Теперь все готово для того, чтобы создать первую задачу.
Пишем первый таск
Создадим в корне проекта отдельный файл для описания и назовем его gulpfile.js. Открываем его и пишем первый таск (задачу):
В первой строке подключаем Gulp (далее будем действовать аналогично с остальными необходимыми модулями).
Любой таск в Gulp создается методом .task(), который принимает два аргумента – название задачи и функцию-обработчик. Отметим, что в Gulp задачи асинхронны: надо дать знать, что задача выполнена, и ее выполняет callback() (в данном таске это просто функция-пустышка, так как нам нечего возвращать). Если этого не сделать, то в консоли мы увидим:
Первый таск создан: можно запускать его в консоли! Пишем команду:
Здесь gulp – это вызов собственно gulp, а hello – название таска, который хотим выполнить. Все очень просто.
Усложняемся – работаем с препроцессором
Создадим что-то более сложное и функциональное, а попутно познакомимся с оставшимися методами Gulp.
Выстраиваем структуру папок. При разработке принято хранить исходники и сборку в разных папках. Создаем их: src для исходных материалов и build для готовой сборки.
Чтобы усложнить задачу, добавим в разработку препроцессор pcss (CSS-препроцессор). Это надстройка, которая с помощью новых синтаксических конструкций добавляет CSS ранее недоступные возможности. Происходит преобразование кода, написанного с использованием препроцессорного языка, в чистый и валидный CSS-код.
Установим препроцессор и несколько вспомогательных библиотек для работы с css.
Ставим сам препроцессор:
Далее устанавливаем autoprefixer, cssnext и precss
В файле package.json появляются следующие строки:
Понимаете, для чего это нужно? Скоро сами удивитесь, как это полезно.
Подключаем препроцессор и дополнительные модули (в начале файла):
Создадим в src папку pcss, где будем хранить стили. Добавим файл style.pcss и опишем несколько стилей в синтаксисе pcss:
Файл готов! Создадим «таск», который будет переписывать pcss в css и класть в папку build/css. Для удобства работы с директориями добавим в gulpfile объект конфигурации:
Теперь напишем сам таск и назовем его «css»:
Разберемся, что тут происходит:
Задан массив с дополнительными модулями для нашего postcss. Далее идет возврат (return) «цепочки» потоков (.pipe в каждом таком потоке выполняются какие-то задачи).
Метод .src у gulp указывает, откуда брать файлы для обработки (/**/*.pcss говорит о том, что нужно сканировать текущую и все вложенные папки на наличие файлов с расширением pcss).
Gulp.dest задает, куда положить результат обработки. Postcss вызывает обработку .pcss-файлов с параметрами из processors. dest (не путать с gulp.dest), дает возможность задать расширение выходного файла (в нашем случае – .css) и папку, в которую нужно положить файл.
Задача написана – протестируем ее! Набираем в консоли:
Переходим в build и видим, что там появилась папка css, а в ней – файл style.css с таким содержанием:
Перед нами привычный CSS-код, который можно подключить html-файлу.
Собираем js
Будем используем ES6-синтаксис – понадобится соответствующий плагин, чтобы сохранить кроссбраузерность приложения. Ставим Babel (занимается преобразованием ES6 в ES5):
Напишем задачу ‘js’, которая будет обрабатывать js-файлы:
Все аналогично задаче css, только вместо postcss в дело вступает babel.
Напишем простенький js-файл с ES6-кодом (пусть это будет script.js, размещенный в папке src/js). Испытаем работу таска:
Результатом будет файл script.js в папке build/js со следующим содержанием:
В результате работы Babel код немного усложнился по сравнению с исходным.
С одним файлом все хорошо, но что произойдет, если их будет 2, 3, 10 и больше? Совсем неудобно все это подключать к странице. Эту проблему поможет решить модуль gulp-concat.
Доработаем таск js:
Теперь concat(‘main.js’) объединяет все файлы в один – main.js, который удобно подключать к странице (попробуйте создать несколько файлов и понаблюдайте за результатом).
Научившись обрабатывать стили, JavaScript-код, вы все еще каждый раз набираете gulp ‘task’ в консоли. Это не очень удобно. Можно ли объединить все в одной задаче?
Да, и прежде чем это сделать, напишем еще пару вспомогательных тасков для очистки папки сборки и переноса остальных файлов (html, картинок, шрифтов и т.д.).
Напишем задачи ‘clr’ и ‘assets’. Первая будет вычищать папку build перед сборкой, а вторая – просто переносить файлы.
Создадим отдельный таск для html:
Теперь можем вычищать нашу директорию сборки и переносить остальные файлы. Но при разработке изменения происходят во многих файлах, и каждый раз нужно пересобирать проект вручную. Чтобы избавиться от этой рутины, воспользуемся методом gulp.watch.
Напишем задачу ‘watch’, которая будет отслеживать изменения в нужных файлах и при необходимости запускать соответствующие таски:
В данной задаче мы следим за изменениями в файлах стилей, скриптов и html.
Осталось написать задачу для первичной сборки – назовем ее ‘build’, а также задачу ‘default’, которая позволит, просто набрав команду ‘gulp’, собрать проект и запустить «вотчеры».
Используем метод .parallel, чтобы ускорить процесс и запустить все задачи в параллельных потоках.
Метод .series запускает задачи последовательно: сначала выполнится ‘build’, а далее параллельно стартуют ‘watch’ и ‘server’.
Пишем задачу ‘server’
Стоп, что за задача ‘server’ – откуда, зачем? Это для «полного фэншуя» в разработке. Она «поднимает» виртуальный сервер, перезагружает браузеры и синхронизирует их в случае изменений. И все это – при помощи одной команды ‘gulp’, введенной перед началом работы. Далее все происходит автоматически. Magic!
Ставим модуль ‘browser-sync’ для задачи ‘server’:
И пишем таск ‘server’:
Запускаем сервер, в настройках которого указываем базовую директорию (config.build) и индекс-файл, который будет открываться в браузере.
Остается набрать в консоли gulp и наслаждаться разработкой.
Сжимаем код
В заключение – небольшой бонус. Минифицируем JavaScript-код, чтобы уменьшить конечный размер файла.
Дорабатываем таск ‘js’:
Перезапускаем и снова выполняем ‘gulp’ (остановить предыдущий можно нажатием ctrl+c), чтобы применились изменения. Код в main.js теперь сжат: читаемость стала хуже, но функциональность сохранилась.
P.S. Помните, мы говорили про зависимости и package.json? Попробуйте удалить папку build и node_ modules, а затем выполнить задачи. Оп, ничего не работает. А теперь – еще немного магии. В консоли в корне проекта пишем команду npm i и дожидаемся ее выполнения. Пробуем выполнить задачи теперь. Бинго!
Так вы можете легко развернуть ваш проект на любой другой машине. Помните: никогда не переносите проект полностью, то есть с папкой node_modules и папкой со сборкой. Ведь на разных операционных системах различные модули могут работать некорректно – их нужно ставить под конкретную ОС. Перенося проект, который разрабатывался на Win, на машину с MacOS, вы рискуете – может и «не завестись». Скорее всего, вам придется частично или полностью переустанавливать модули.
Читайте также: