Установка gulp на windows

Gulp для начинающих

Gulp – это инструмент автоматизации front-end разработки. Он поможет вам автоматизировать рутинные задачи и ускорит вашу работу. Возможно вы уже работали с другой системой сборки Grunt. Сравнение Gulp и Grunt показывает, что Gulp на данный момент более перспективный инструмент и стоит обратить на него внимание.

Основные задачи, которые вам поможет решить Gulp:

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

Ссылки на ресурсы

Официальный сайт Gulp gulpjs.com
Gulp на Github
Каталог плагинов для Gulp http://gulpjs.com/plugins/
Документация Gulp (на английском) ссылка

Установка Gulp

На вашем компьютере должен быть установлен Node.js. Скачать его можно по ссылке. Небольшая инструкция по установке.

После установки Node.js откройте командную строку и введите команду:

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

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

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

Создадим папку project для нашего проекта. Откройте командную строку и перейдите в папку с вашим проектом:

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

Когда файл package.json создан, мы можем установить Gulp с помощью команды:

На этот раз – g не был использован и Gulp локально установится в папку project.

— save — dev вносит в уже существующий файл package.json запись о Gulp в секцию devDependencies.

После выполнения команды вы увидите, что в директории project появилась папка node_modules, внутри которой лежит папка Gulp.

Мы почти готовы начать проект с Gulp. Но перед этим необходимо определиться со структурой проекта.

Определяем файловую структуру

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

В папке app будет находится рабочая версия проекта. В папке dist будет лежат продакшн версия проекта.

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

Создадим первую задачу в файле gulpfile . js , в котором хранится вся конфигурация Gulp.

Пишем первую задачу Gulp

Базовый синтаксис задачи Gulp:

task — name ссылается на имя задачи, которое вы будете использовать для запуска задачи. Задачу можно запустить командой gulp task-name.

Для теста создадим задачу hello, которая выведет Hello Zell!

Запустим команду gulp hello в командной строке.

В командной строке появится сообщение Hello Zell !

Задачи в Gulp обычно намного сложнее. Вот как может выглядеть реальная задача:

Как вы видите, реальная задача содержит два дополнительных метода gulp . src и gulp . dest .

gulp . src говорит, какие файлы использовать для выполнения задачи.

gulp . dest указывает, куда положить файлы после выполнения задачи.

Создадим реальную задачу, где мы скомпилируем Sass файлы в Css.

Препорцессинг с Gulp

Мы можем компилировать Sass в Css с помощью плагина gulp-sass. Для установки gulp-sass надо запустить команду:

В gulpfile . js необходимо записать:

Создадим задачу sass ( )

[/crayon]
Далее нам необходимо создать файл

в папке app/scss и указать путь к этому файлу в gulp.src. Скомпилированный файл styles.css будет лежать в папке app/css. Укажем эту папку в gulp.dest.

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

Если вы запустите команду gulp sass в командной строке, то вы увидите, что в папке app/css появится файл styles . css , в котором будет следующий код:

Теперь мы знаем, как работает задача sass.

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

• * . scss : Символ * — означает, что будут выбраны все файлы с расширением .scss в указанной директории;
• * / * . scss — будут выбраны все файлы с указанным расширением в корневой папке и всех дочерних папках;
• * / * . scss . Символ ! указывает, что данный файл надо исключить из выполнения задачи;
• * . + ( scss | sass ) — позволяет выбрать для выполнения задач файлы с несколькими расширениями. В данном случае будут выбраны все файлы с расширениями . scss и . sass из указанной директории.

Теперь мы можем заменить app/scss/styles.scss на scss/ **/*.scss.

Любой файл с расширением .scss находящийся в папке app/scss будет скомпилирован. Например, если добавить print.scss, то мы увидим, что в папке app/css появится скомпилированный файл print.css.

Компилируем Sass «на лету»

С помощью метода watch можно отслеживать изменения в файлах. Синтаксис метода:

Источник

GulpJS — фантастически быстрый сборщик проектов

Gulp.js это потоковый сборщик проектов на JS. Он использует Stream и действительно является очень быстрым. Для примера у меня есть проект где около тысячи stylus файлов, GruntJS нужно примерно 2.5 секунды на сборку и 2 секунды на обработку autoprefixer’ом. Gulp все это делает за 0.5 секунды выигрывая у GruntJS минимум в 4 раза.

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

В этой статье будет больше практики, мы соберем среду разработки фронтенда используя Jade и Stylus, запустим локальный сервер и подключим Livereload. Проект я выложил на Github, экспериментируйте.

Установка Gulp

У вас должен быть установлен Node.JS и npm.
Создадим директорию проекта, создадим структуру каталогов и установим Gulp и необходимые плагины.

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

Установка:

В корне проекта есть файл конфигурации gulpfile.js его и будем редактировать.

Иницилизируем плагины:

Задачи:

Теперь создадим первую задачу

В Gulp мы работаем с потоком, поэтому получаем данные из gulp.src и поточно обрабатываем их.

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

Необходимые нам выше задачи предназначены для разработки и конечно хочется отслеживать изменения файлов и иметь на сервере Livereload
Для этого создадим задачу ‘watch’.

Теперь можно запустить наш проект и посмотреть, что получилось.

Сервер доступен по адресу localhost:9000 Мы создали среду для веб-разработке проектов с помощью Stylus и Jade с Livereload. Теперь нужно собрать оптимизированный проект. Для этого создадим задачу ‘build’

Запускаем и получаем готовый проект в папке build

Попробуйте GulpJS и начните уже использовать по-настоящему быстрые вещи в своих проектах.

Источник

Запускаем Gulp с вотчерами на обычном хостинге через админпанель

У тебя есть сайт с админпанелью и ты используешь или только собираешься использовать Gulp в этом проекте? Хочешь максимально работать с сайтом через админпанель, включая контроль над генератором ресурсов Gulp? Тогда под катом я покажу тебе простой способ управления Gulp’ом с вотчерами на сервере прямо из админпанели.

Это небольшой туториал по настройке и запуску Gulp’а на сервере средствами любой админпанели на PHP. Подразумевается, что запускается Gulp не для единовременной сборки ресурсов, а в режиме с вотчерами. Отлично подходит, если ты работаешь с проектом через Deployment Tools и локально он у тебя не запущен. При этом каждый раз билдить, например, SCSS локально и заливать результат уже надоело.

1. Тонкости хостинга

Так уж получилось, на моём хостинге не было поддержки Node. Пришлось поставить её отдельно в свою папку рядом с сайтами. Какую версию ставить, не принципиально, я использовал Node.js v5.12.0. Для установки просто распакуй архив куда-нибудь к себе на хостинг и добавь NodeJS bin в Path (подробнее ниже).

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

2. Настройка Node и Gulp

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

2.1 Настраиваем Node

Если ты уже пользовался npm’ом на хостинге и у тебя там уже стоит Node, то пол дела сделано и можешь сразу переходить к пункту 2.2.

Для установки на сервере Gulp и всего необходимого для его запуска тебе нужно будет в корне проекта создать файл package.json . Искренне надеюсь, что корень проекта у тебя лежит чуть выше папки public_html .

Примерное содержимое файла package.json :

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

Далее, заблаговременно подключившись к серверу по SSH, ты должен настроить Path, чтобы установленная вручную Node попала в директории запуска (это, кстати, вовсе не гарантирует, что процесс сайта будет видеть эту Node или вообще хоть что-то. Там своё окружение со своим Path. Его настроишь уже через PHP.).

Установи Gulp и его компоненты из директории, где лежит package.json :

У тебя появится в этой директории папка node_modules , в которой будет всё что нужно для запуска Gulp.

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

2.2 Настраиваем Gulp под проект

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

Для этого создай файл gulpfile.js рядом с файлом package.json с примерным наполнением:

Я покажу на примере генерации только CSS, ты же можешь настроить Gulp как хочешь.
Подразумевается, что рядом с gulpfile.js лежит папка scss , в которой полная структура всех SCSS файлов. Если что, то найти и поменять путь к SCSS файлам в gulpfile.js не сложно, их всего два:

1. Место, куда смотрит таск генерации CSS gulp.src(‘./scss/**/*.scss’)
2. Место, куда смотрит Watcher gulp.watch(‘./scss/**/*.scss’, [‘scss’]);

2.3 Проверка готовности инструментов

Если всё сделано правильно, то уже сейчас можно, подключившись по SSH, перейти в папку с gulpfile.js и выполнить там:

При этом увидим какой-то дебаг от Gulp, либо предупреждения, которые тебе предстоит разрулить до перехода к следующему пункту. Сразу скажу, что проблема может быть в конфигурировании переменной Path для текущего подключенного пользователя, в ней обязательно должна быть папка bin от Node и папка /node_modules/.bin , которую должен устанавливать в Path сам NPM.

Другого рода проблемы, скорее будут относиться к неверной настройке gulpfile.js .

3 Подготовка PHP для работы с Gulp

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

Алгоритм следующий:

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

Вроде просто, теперь, какие средства PHP тебе понадобятся.

Самое первое и простое, это класс ExecProcess где-то из обсуждения exec на сайте PHP. Я его немного модифицировал и использую вот такой:

И класс, который будет запускать именно Gulp и контролировать его состояние, GulpProcess :

Вроде всё лаконично и понятно. Осталось привязать это всё к админпанели.

4. Настройка экшенов админпанели

Какую систему ты используешь и как работаешь с экшенами известно лишь тебе одному. Я приведу пример своих экшенов, но уже всё должно быть очевидно:

Как было сказано в пункте 3, можно также получить текущий output от процесса Gulp, но для этого сначала надо модифицировать класс ExecProcess , чтобы писал он весь output не в /dev/null , а в конкретный файл.

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

Все эти наработки можно красиво обернуть в Composer плагин и подшлифовать для конкретной системы (например, Yii2). Этим я обязательно займусь, когда переведу CMS на неё.

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

Возможные проблемы и попытки решения

Всё просто, качаем NodeJS в виде архива и заливаем на хостинг. Далее обязательно прописываем его в Path (Это поможет корректно работать NPM и Gulp при запуске через SSH).

После запуска через админпанель может так получиться, что процесс запустится и сразу же выключится. Это связано с какими-то проблемами запуска Gulp, которые, к сожалению, ты не увидишь. Всё ведь посылается в /dev/null . Надо настроить класс ExecProcess так, чтобы output сохранялся в файл, и уже в нём искать проблему.

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

Ну тут ты уже накосячил с gulpfile.js , в теории, пример из статьи должен работать (я его, конечно, немного модифицировал, и он отличается от настоящего, рабочего в проекте, но правки были незначительные), попробуй оставить в нём минимум тасков и логики.

Отличная это штука, скажу я тебе, но мне так и не удалось её запустить. Всё дело в том, что она работает на определённых портах, используя Node, но на многих хостингах доступ к портам заблокирован. Если хочешь пользоваться BrowserSync’ом, придётся раскошелиться на VDS.

Вообще это контролирует класс GulpProcess , он настраивает класс ExecProcess таким образом, что контроль текущего процесса идёт по его PID. Как только процесс был создан, система получает его PID и дальше всегда работает с ним, при попытке создать новый процесс, при рабочем старом, система этого не позволит.

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

Ищи тот, что называется gulp, это и будет твой фоновый процесс.

Источник