Gulp src исключения. Gulp
Soldatov NikolayGulp для ускорения разработки
Что такое Gulp, зачем он нужен, его возможности, как установить и как начать использовать в разработке сайтов. Обновление до Gulp 4
Gulp - что это такое и зачем он нужен
Gulp - это инструмент, позволяющий ускорить процесс web-разработки. Gulp автоматически выполняет все самые необходимые часто используемые задачи.
Gulp таск имеет следующий вид:
// Gulp 3 gulp . task (" имя-таска " ,[ " имя-другого-таска " ], function () { таск (и ) }); // Gulp 4 gulp . task (" имя-таска " , gulp . parallel (" имя-другого-таска " ), function () { таск (и ) });["имя-другого-таска"] или gulp.parallel("имя-другого-таска") - это необходимо писать в том случае, если до выполнения нашего таска нужно выполнить другой таск(и).
Создадим простейший task, который будет выводить строку "Привет, Мир!".
gulp . task (" output " , function () { console . log (" Привет, Мир! " ); });"output" - имя таска, оно может быть любым.
Для вызова таска нужно выполнить команду gulp имя-таска (в нашем случае output ). Сделаем это.
Запуск gulp таска по умолчанию
Таск будет выполнять все перечисленные в ней таски одной командой gulp
// Gulp 3 gulp . task (" default " , [ " output " ]); // Gulp 4 gulp . task (" default " , gulp . parallel (" output " ));И теперь чтобы запустить наш таск, достаточно просто написать gulp
В нашем примере указан один таск, но можно перечислить все необходимые задачи следующим образом:
// Gulp 3 gulp . task (" default " , [ " output " , " other-task-1 " , " other-task-2 " ]); // Gulp 4 gulp . task (" default " , gulp . parallel (" output " , " other-task-1 " , " other-task-2 " ));Это был самый простой пример работы Gulp. Для более сложных задач используются дополнительные методы.
Методы gulp
gulp.task - создание таска
gulp.src - какие файлы использовать для обработки плагином
gulp.watch - наблюдение за изменениями в файлах
.pipe(plugin()) - обращение к плагину для обработки файлов
.pipe(gulp.dest("путь")) - куда записать (выгрузить) файл после выполнения задачи
Gulp 4
Если у вас не работает Gulp , возможно вы обновили его с 3 версии до Gulp 4 в пакетном менеджере npm. В связи с этим появились ошибки в gulpfile.js из-за измений в синтаксисе выполнения gulp тасков
Все конструкции с квадратными скобками "[" "]" нужно заменить на gulp.parallel()
// у вас было: gulp . task (" watch " , [ " sass " , " js " , " browser-sync " ], function () { gulp . watch (" sass/**/*.sass " , [ " sass " ]); gulp . watch ([ " libs/**/*.js " , " js/common.js " ], [ " js " ]); gulp . watch (" *.html " , browsersync . reload ) }); gulp . task (" default " , [ " watch " ]); // нужно изменить на: gulp . task (" html " , function () { return gulp . src (" *.html " ) . pipe (browserSync . reload ({ stream : true })) }); gulp . task (" watch " , gulp . parallel (" sass " , " js " , " browser-sync " ), function () { gulp . watch (" sass/**/*.sass " , gulp . parallel (" sass " ); gulp . watch ([ " libs/**/*.js " , " js/common.js " ], gulp . parallel (" js " )); gulp . watch (" *.html " , gulp . parallel (" html " )) }); gulp . task (" default " , gulp . parallel (" watch " ));andew
2016-10-01T17:49:41+00:00
2017-08-15T11:40:42+00:00
4790
Пост описывает установку менеджера задач Gulp в web проект. Использование Gulp в разработческом веб проекте позволяет автоматизировать такие операции как компиляция файлов LASS, SASS, SCSS в CSS файл, оптимизация и объединение нескольких файлов в один, минимизация файлов в min.css или min.js, обработка файлов изображений, создание спрайтов, конвертация форматов файлов, изменение размеров и качества изображений, закачка файлов на хостинг, отслеживание изменений файлов, авто обновление страницы в браузере при изменении файлов и многое другое. При использовании Gulp вам больше не нужно будет искать для разных задач отдельные приложения, потому что практически все необходимое можно выполнить в Gulp при помощи Gulp-plugin дополнений. Гибкость и универсальность Gulp позволяет настроить разные задачи под конкретные нужды в каждом веб проекте. Второстепенным плюсом использования Gulp можно считать получения знаний и опыта в использовании Node.js, т.к. Gulp работает на этой универсальной платформе.
Установка Node.js
- name - имя вашего Node.js проекта/приложения написанное строчными английскими буквами, (допускаются знаки a-z._- ). Задайте в этом параметре любое подходящее имя для вашего проекта Node.js . В примере ниже я указал name: nodeproject . По умолчанию будет предложено имя текущей папки;
- version - версия вашего приложения Node, можно согласиться с значением, предложенным по умолчанию;
- description - краткое описание вашего приложения Node.js для npm search , можете не указывать. В примере ниже я указал как mytest ;
- entry point - точка входа вашего приложения Node, можно согласиться с предложенным по умолчанию, необходимо в случае разработки собственного приложения на Node;
- test command - тестовая команда, можно оставить пустым;
- git repository - адрес git репозитория вашего проекта, можно оставить пустым, т.к. нужно только при публикации;
- keywords - массив строк с ключевыми словами для npm search , можно не заполнять, т.к. нужно только при публикации;
- author - полное имя автора проекта, важно только при публикации;
- license - вид лицензирования вашего проекта в формате массива, можно согласиться с предложенным по умолчанию, т.к. актуально только при публикации.
Ниже представлен пример кода выполнения команды npm init из консоли при первичной инициализации Node.js проекта в локальном каталоге. Так как в примере не планируется разрабатывать и публиковать собственное Node.js приложение, а планируется использовать только Gulp , то часть параметров для файла package.json мною будут проигнорированы или выбраны по умолчанию.
Для запуска консоли в выбранной папке нужно, находясь в ней в проводнике, удерживая клавишу Shift , нажать ПКМ (правую клавишу мыши ) и в контекстовом меню выбрать пункт "Открыть окно команд в текущем каталоге" .
Пример кода из консоли при выполнении команды npm init в каталоге WebDevelopment:
Z:\WebDevelopment> npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm installВ итоге, в папке, где была запущена консоль, будет создан файл манифеста package.json для проекта Node.js с заданными в примере выше параметрами.
ШАГ 3 локальная установка Gulp
Теперь, когда был создан проект Node.js , рассмотрим общий синтаксис команды npm install , которая используется для установки пакетов приложений в Node.js .
Установка пакетов в Node.js
Установка пакетов в проект Node.js из репозитория npm производится при помощи следующих команд:
-общий вариант команды - использую при наличии зависимостей в package.json
npm install-вариант установки через указание имени пакета
npm install- install или i - команда инсталляции пакета;
Имя устанавливаемого пакета; - -S , --save dependencies " в файле package.json
- -D , --save-dev - ключ, указывающей на добавление устанавливаемого пакета как зависимости в параметре "devDependencies " в файле package.json .
По умолчанию с версии npm 5.0+ команда npm install добавляет устанавливаемый модуль сразу в список зависимостей в файле package.json . С более ранними версиями npm , вы должны явно указать параметр --save в команде, что бы npm создал запись о зависимости для устанавливаемого модуля в файле package.json вашего проекта на Node.js .
Подробный синтаксис и примеры по команде смотрите на сайте npm .
Установку Gulp , Gulp-плагинов и других, нужных вам в проекте приложений Node , необходимо выполнять именно с этим ключом --save-dev , что бы в файле package.json была сохранена информация о них в параметре devDependencies . Это позволит вам, на основе только одного файла package.json , при помощи команды npm install заново полностью развернуть ваш Node.js проект со всеми вашими приложениями, информация о которых была записана в параметре "devDependencies " файла package.json.
Команда npm install , запущенная без дополнительных аргументов, будет устанавливать все зависимые пакеты, указанные в вашем файле package.json в параметрах dependencies и devDependencies в каталог node_modules текущей директории командной строки. Таким образом, вы можете при помощи этой команды выполнять загрузку и установку пакетов. Для этого создайте или отредактируйте ваш package.json файл, где в параметре devDependencies укажите необходимые для инсталляции пакеты, например:
"devDependencies": { "browser-sync": "^2.15.0", "gulp": "^3.9.1", "gulp-clean-css": "^2.0.12", "gulp-sass": "^2.3.2" }
И выполните команду npm install без дополнительных параметров и указанные пакеты будут загружены и установлены локально в проект. Таким способом можно как обновить уже установленные локально в проект пакеты (gulp и т.п. ), так и заново установить локально в проект gulp , gulp-clean-css , gulp-sass и другие, необходимые вам пакеты, задав их названия в файле package.json . Вы можете, при необходимости, повторять эту операцию npm install для обновления существующих и установки новых пакетов локально в проект Node.js . Особенно удобен этот подход при повторном развертывании Node.js приложения на основе уже имеющегося и готового package.json файла манифеста. Но вы может эту операцию выполнять и для уже развернутого локального проекта, если захотите обновить в нем все пакеты . Для этого удалите из вашего проекта папку node_modules и выполните npm install . Это приведет к установке в проект заново всех указанных в package.json пакетов в их последних версиях, согласующихся с семантическим контролем версий (см. ниже ).
Для обновления gulp и других компонентов Node.js проекта:
- удалите из проекта папку node_modules ;
- отредактируйте при необходимости файл package.json . Если нужны следующие версии, то укажите в файле package.json нужные вам версии пакетов. Например, у вас был установлен пакет "gulp-clean-css" : "^2.0.12" , но вы хотите уже следующую версию 3.x.x (версия это первая цифра в записи версии ), то укажите в package.json "gulp-clean-css" : "^3.0.0" . Тогда пакет "gulp-clean-css" будет уже установлен в версии 3.x.x . и это может быть как 3.0.0 , так и выше , но все в пределах версии 3.x.x . Детали смотри ниже в описании короля версий .
- выполните npm install без дополнительных параметров, находясь в терминале в каталоге с файлом package.json .
Какая версия пакета будет установлена при вызове команды npm install ?
- Если в проекте нет файла package.json или если он есть, но в нем нет записи о зависимостях для устанавливаемого пакета (GULP и т.п. ), то будет установлена последняя версия пакета;
- Eсли в проекте есть файл package.json
, в котором устанавливаемый пакет уже указан в секции зависимостей, то будет устанавливаться/обновляться та версия пакета, которая будет согласовываться правилу семантического короля версий, а именно:
- если в зависимостях для пакета указано, например, 1 или 1.x или ^1.0.4 , то все обновления будут только в пределах 1 версии (это первая цифра в обозначении версии ). Поэтому обновление произойдет только в пределах указанной версии (1.x.x ) , а обновления на версию 2.x.x уже не произойдет. Связано это с тем, что обновления в пределах одной версии считаются мелкими релизами и являются совместимыми. Обновления с новой версией уже считаются несовместимыми с предыдущей версией, т.е. версия 2.x.x уже будет не совместима с версией 1.x.x ;
- если в зависимостях пакета указано * или х , то это значит, что будут приниматься любые обновления, в том числе и новые версии, которые могут быть не совместимы с предыдущими.
Таким образом, добавляя и изменяя в зависимостях package.json нужные вам пакеты и их версии при помощи команды npm install можно загружать, добавлять, обновлять и удалять пакеты программ локально в проекте Node.js . Однако, нужно заметить, что описанный метод больше удобен при массовом обновлении, инсталяции или развертывании проекта с нуля. Если же нужно добавить, удалить или обновить локально только один, два пакета, то пороше будет воспользоваться напрямую в командной строке командами с указанием имени конкретного пакета:
npm iПакеты приложений под Node.js смотрите и ищите на сайте npm . Так же, доступные для установки пакеты и их краткое описание можно просмотреть или выполнить выборочный поиск при помощи команды :
npm searchКоманды локальной установки Gulp
Применительно к локальной установке Gulp с сохранением информации в параметре devDependencies файла package.json команда npm install будет иметь вид:
npm i gulp --save-dev или npm install gulp --save-devКоманды удаления локальной установки Gulp
Если требуется удалить Gulp (и другие пакеты ) установленный в проекте локально, то воспользуйтесь командами . Например, удаление локального пакета Gulp из проекта Node.js может быть выполнено командой:
npm uninstall gulp --save-devТем самым вы можете удалить локально Gulp из проекта, а затем заново выполнить его локальную установку, поучив таки образом последую версию Gulp в своем проекте Node.js .
Команды для глобальной установки и удаления Gulp .
Приводятся здесь для справки, но в примере не используются.
Удаление глобальной установки Gulp , бывает необходимо, если у вас Gulp был установлен глобально и его нужно обновить, поэтому перед этим нужно выполнить деинсталляцию старой версии Gulp командой:
Npm rm --global gulp или npm rm -g gulp
Полные ключевые слова в команде пишут с двумя знаками (--global ) минус, а сокращения этих слов пишут с одним (-g ) знаком минус.
Глобальная установка Gulp (приводиться для здесь для справки ) выполняется командой:
Npm install -g gulp или npm i -g gulp
Пример кода локальной установки Gulp
Ниже проводиться код из консоли выполнения команды локальной установки Gulp с сохранением зависимостей в параметре devDependencies файла package.json :
Z:\WebDevelopment> npm i gulp --save-dev npm WARN deprecated [email protected]: This package is deprecated. Use Array.isArray. npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp D oS issue npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp D oS issue npm WARN deprecated [email protected]: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0. npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v 7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use "npm ls graceful-fs" to find it in the tree. [email protected] Z:\WebDevelopment `-- [email protected] +-- [email protected] +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | | `-- [email protected] | +-- [email protected] | `-- [email protected] +-- [email protected] +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | `-- [email protected] | | +-- [email protected] | | | `-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | | `-- [email protected] | | | `-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | | `-- [email protected] | | | `-- [email protected] | | | +-- [email protected] | | | | `-- [email protected] | | | `-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | | +-- [email protected] | | | | `-- [email protected] | | | | `-- [email protected] | | | `-- [email protected] | | | +-- [email protected] | | | | +-- [email protected] | | | | +-- [email protected] | | | | | `-- [email protected] | | | | | `-- [email protected] | | | | +-- [email protected] | | | | `-- [email protected] | | | `-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | | `-- [email protected] | | | | `-- [email protected] | | | | `-- [email protected] | | | `-- [email protected] | | `-- [email protected] | +-- [email protected] | | `-- [email protected] | +-- [email protected] | | `-- [email protected] | +-- [email protected] | | `-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | | `-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | `-- [email protected] | | +-- [email protected] | | `-- [email protected] | +-- [email protected] | | `-- [email protected] | | `-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | `-- [email protected] | | `-- [email protected] | `-- [email protected] | +-- [email protected] | `-- [email protected] +-- [email protected] +-- [email protected] | +-- [email protected] | +-- [email protected] | | +-- [email protected] | | | `-- [email protected] | | +-- [email protected] | | | `-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | | `-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | | +-- [email protected] | | | | | `-- [email protected] | | | | | +-- [email protected] | | | | | +-- [email protected] | | | | | | `-- [email protected] | | | | | +-- [email protected] | | | | | `-- [email protected] | | | | +-- [email protected] | | | | `-- [email protected] | | | +-- [email protected] | | | | `-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | | `-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | | +-- [email protected] | | | | | `-- [email protected] | | | | `-- [email protected] | | | +-- [email protected] | | | | +-- [email protected] | | | | | `-- [email protected] | | | | `-- [email protected] | | | `-- [email protected] | | | +-- [email protected] | | | `-- [email protected] | | `-- [email protected] | | `-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | +-- [email protected] | | | | `-- [email protected] | | | `-- [email protected] | | | `-- [email protected] | | `-- [email protected] | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | +-- [email protected] | | `-- [email protected] | | +-- [email protected] | | | +-- [email protected] | | | | `-- [email protected] | | | | `-- [email protected] | | | `-- [email protected] | | +-- [email protected] | | `-- [email protected] | | `-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | `-- [email protected] +-- [email protected] +-- [email protected] | +-- [email protected] | | `-- [email protected] | | `-- [email protected] | +-- [email protected] | `-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] | `-- [email protected] +-- [email protected] | `-- [email protected] `-- [email protected] +-- [email protected] +-- [email protected] | +-- [email protected] | | `-- [email protected] | +-- [email protected] | | `-- [email protected] | +-- [email protected] | | `-- [email protected] | | +-- [email protected] | | `-- [email protected] | +-- [email protected] | +-- [email protected] | | `-- [email protected] | `-- [email protected] +-- [email protected] | `-- [email protected] | `-- [email protected] | +-- [email protected] | | +-- [email protected] | | `-- [email protected] | +-- [email protected] | `-- [email protected] | +-- [email protected] | `-- [email protected] +-- [email protected] | `-- [email protected] +-- [email protected] | `-- [email protected] +-- [email protected] | +-- [email protected] | `-- [email protected] +-- [email protected] | `-- [email protected] | `-- [email protected] `-- [email protected] `-- [email protected] npm WARN [email protected] No repository field. Z:\WebDevelopment>После выполнения такой, локальной установки Gulp с параметром --save-dev в файле package.json будет добавлена информация об этой инсталляции в параметр devDependencies :
//обновленный файл package.json после установки Gulp { "name": "nodeproject", "version": "1.0.0", "description": "mytest", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Andrew", "license": "ISC", "devDependencies ": { "gulp" : "^3.9.1" } }Установка тестовой версии Gulp
Если возникает необходимость установки тестовой версии Gulp , релиз которой еще не вышел и отсутствует в репозиториях mpm , то для таких случаев нужно выполнять установку Gulp из его репозитория git () с сайта github.com .
Для версии Gulp 4.x такая установка будет выполняться следующим образом:
Если в вашем package.json gulp был прописан как dev dependency :
$ npm uninstall gulp --save-dev $ npm install git+https://[email protected]/gulpjs/gulp.git#4.0 --save-dev
Если в вашем package.json gulp был прописан как dependency :
$ npm uninstall gulp --save $ npm install git+https://[email protected]/gulpjs/gulp.git#4.0 --save
ШАГ 4 вызов Gulp
Теперь, после установки Gulp локально , в наш проект, нужно организовать вызов его по имени (gulp ) в консоли из любого места проекта и из любого места файловой системы. Для этого нужно сообщить операционной системе, в каком каталоге ей следует искать исполняемый файл Gulp , когда в консоли мы просто напишем > gulp , т.е. не укажем полный путь до директории с исполняемым файлом Gulp, а обратимся к нему только по имени . Сообщить операционной системе путь до каталога, где расположен исполняемый файл gulp можно через системную переменную PATH , добавив в нее это путь.
Каталог, в котором находиться исполняемый (файл запуска ) файл gulp , для примера из этой статьи будет иметь вид:
- Z:\WebDevelopment - корневой каталог Node.js проекта, у вас он будет свой;
- Z:\WebDevelopment\node_modules - каталог приложений Node.js , этот каталог всегда присутствует в корне Node.js проекта после установки Gulp;
- Z:\WebDevelopment\node_modules\.bin - каталог, где находится файл запуска gulp , завершающий слеш в пути не нужен.
Настройка переменной PATH
Исходя из примера этой статьи, для того, что бы Gulp можно было вызывать в консоли по имени , необходимо в системную переменную PATH добавить Z:\WebDevelopment\node_modules\.bin путь до каталога с файлом запуска Gulp . На Windows это можно сделать при помощи графического интерфейса. Откройте окно свойств системы (WIN+PAUSE ) "Панель управления\Все элементы панели управления\Система " и перейдите в "Дополнительные параметры системы ". Откроется окно "Свойства системы ", в котором нужно выбрать вкладку "Дополнительно " и в ней нажать кнопку "Переменные среды ". Откроется окно "Переменные среды ", где в разделе "Переменные среды пользователя " или в разделе "Системные переменные " нужно выбрать переменную "PATH " и нажать кнопку "Изменить ". Затем, через точку с запятой добавить (дописать в конец строки ) путь к папке с запускаемым файлом Gulp без кавычек. В примере этой статьи нужно добавить путь вида: ;Z:\WebDevelopment\node_modules\.bin . Так как это полный путь , то уже неважно из какого каталога будет вызван Gulp . Теперь обращение к Gulp можно выполнять в любом каталоге файловой системы, но в этом каталоге (в котором выполняется вызов gulp ) обязательно должен присутствовать конфигурационный файл gulpfile.js , иначе возникнет ошибка приложения Gulp .
Вызов задачи Gulp
После выполнения этой настройки переменной PATH уже можно будет вызвать Gulp из его локальной установки, находясь в любом месте файловой системы и просто обратившись к нему по имени , так как если бы он был установлен глобально.
Общий вид команды запуска задачи Gulp
> gulp
Если выполнить вызов Gulp без указания имени задачи, то он будет искать задачу с именем "default ".
ШАГ 5 создание задачи Gulp
На этом шаге показано как написать простую задачу для Gulp и протестировать ее выполнение и работу Gulp в web проекте.
gulpfile.js
Для написания задач необходимо в корне проекта Node.js или в любой другой вложенной папке проекта (например, в каталоге конкретного сайта ) создать конфигурационный файл с задачами для Gulp , который по умолчанию должен называться gulpfile.js . Этот файл можно назвать и по другому, но в таком случае нужно будет указать Gulp , какое имя вы решили использовать вместо дефолтового для конфига Gulp. Файл с задачами gulpfile.js является обычным JavaScript файлом и исполнятся на платформе Node.js , поэтому в нем нужно выполнить подключение Gulp и нужных для работы модулей. После этого уже можно писать все необходимые задачи.
Ниже приводится содержание двух тестовых gulpfile.js файлов из каталогов WebDevelopment и WebDevelopment\Projects\Site1\themes примера этой статьи. Мною намеренно созданы сразу два тестовых файла с разными задачами и расположенные в разных каталогах проекта для того, что бы продемонстрировать их независимую друг от друга работу с использованием одной, локальной инсталляции Gulp .
Первый, корневой gulpfile.js файл из примера:
//файл из каталога Z:\WebDevelopment\gulpfile.js "use strict" ; //подключаем gulp var gulp = require ("gulp" ); //создаем тестовую задачу с именем mytest gulp .task("mytest" , function (){ //выводим в терминале фразу "It works" console.log("It works" ); });Второй, gulpfile.js файл конкретного сайта из примера:
//файл из каталога Z:\WebDevelopment\Projects\Site1\themes\gulpfile.js "use strict" ; //подключаем gulp, также как и в первом файле var gulp = require ("gulp" ); //создаем новую тестовую задачу с именем mytask //предыдущий файл имел задачу с именем mytest gulp .task("mytask" , function (){ //выводим в терминале фразу "Projects\Site1\themes" console.log("Projects\\Site1\\themes" ); });Директива use strict выглядит как строка "use strict"; или "use strict"; и ставится в начале скрипта, тогда этот JS код будет работать по современному стандарту ES5.
Такие gulpfile.js файлы, уже со своими задачами, вы можете размешать не только в корне текущего проекта Node.js (в примере это корневой каталог WebDevelopment ), но в любом другом вложенном в эту директорию каталоге, например, в папке с проектом конкретного сайта.
Запуск задач примера
Теперь давайте проверим работу Gulp задач из этих двух файлов примера.
Пример кода из консоли запуска тестовой задачи из первого gulpfile.js файла:
Z:\WebDevelopment> gulp mytest Using gulpfile Z:\WebDevelopment\gulpfile.js Starting "mytest"... It works Finished "mytest" after 205 μs Z:\WebDevelopment>Пример кода из консоли запуска тестовой задачи из второго gulpfile.js файла:
Z:\WebDevelopment\Projects\Site1\themes> gulp mytask Using gulpfile Z:\WebDevelopment\Projects\Site1\themes\gulpfile.js Starting "mytask"... Projects\Site1\themes Finished "mytask" after 199 μs Z:\WebDevelopment\Projects\Site1\themes>Как мы видим из примера, две задачи из разных gulpfile.js были успешно выполнены.
Для остановки работающих задач Gulp нужно нажать сочетание клавиш Ctrl+C и выполнение задач будет прервано. Этим удобно пользоваться при "зависании" задач.
Скринкаст: Установка Gulp в WEB проект сайта
В скринкасте продемонстрировано выполнение локальной инсталляции Gulp в веб проект. Описаны все шаги процесса - подготовка к установке, создание структуры каталогов, выбор директории для локальной установки Gulp, инициализация Node.js проекта, установка Gulp, настройка вызова Gulp в терминале через редактирование системной переменой PATH, написание задач Gulp в разных каталогах проектов сайтов.
Заключение
В ходе выполнения примера из этой статьи вы получите на выходе полноценную локальную установку Gulp и примеры двух стартовых файлов gulpfile.js с тестовыми задачами в разных каталогах разработческого web проекта. Далее, вы может взять эти файлы и логику их создания за основу и сделать собственные файлы в нужных каталогах. Инструкции по созданию прикладные задач, примеры популярных задач, дополнения и плагины для Gulp смотрите на сайте этого приложения.
Всем привет! В этой статье мы создадим наш проект, инициализируем файл манифеста и установим Gulp локально.
Для начала следует сказать, что путь до папки(в том числе и имя пользователя компьютера) должен быть на английском языке, иначе у вас могут возникнуть ошибки при использовании Gulp . Я создал папку Projects , в которой буду создавать все свои проекты. Для примера я назову наш проект firstProject .
Итак, в прошлой статье мы установили Gulp глобально, теперь же нам нужно установить его локально. В первую очередь мы проведем инициализацию. Напишите в терминале следующую команду:
Cd путь_до_вашего_проекта (cd "user/projects/firstProject")
npm init
Благодаря этой команде мы создадим базовый файл манифества для нашего проекта. В принципе, там все понятно, поэтому пояснять не буду. Если вы не хотите заморачиваться со всеми этими настройками, то просто жмите все время enter , т.к. этот файлик нам понадобится для другого, начальные настройки не так важны.
Если вы все сделали правильно, то в вашей папке с проектом должен появиться файл package.json . Если вы откроете его, то увидите, что там хранится вся та информация, которую вы ввели(или не ввели) при инициализации. Помимо этого, файлик хранит информацию об используемых пакетах и это именно то, что нам нужно. Если вы постоянно используете, например, библиотеку JQuery , то вы можете записать ее в этот файл, и она будет автоматически скачиваться при запуске нового проекта.
Теперь установим Gulp локально в нашу папку.
Npm i gulp --save-dev
Флаг --save-dev нужен для того, чтобы пакет Gulp и его версия автоматически записались в файл package.json . Если вы откроете этот файл после успешной установки пакета, то увидите, что там появилось следующее:
"devDependencies": {
"gulp": "^3.9.1"
}
Думаю, понятно, что тут написано имя пакета и его версия. Стрелочка вверх обозначает, что этот пакет можно обновлять. Также у нас появилась папка node_modules , где теперь хранится Gulp и все его зависимости. Именно сюда будут устанавливаться новые модули.
Итак, на этом сегодня все. Мы рассмотрели, как установить Gulp локально в папку проекта и зачем нужен манифест package.json .
13 января 2014 в 13:42GulpJS - фантастически быстрый сборщик проектов
- Разработка веб-сайтов ,
- JavaScript ,
- Node.JS
В этой статье будет больше практики, мы соберем среду разработки фронтенда используя Jade и Stylus, запустим локальный сервер и подключим Livereload. Проект я выложил на Github , экспериментируйте.
Установка Gulp
У вас должен быть установлен Node.JS и npm.Создадим директорию проекта, создадим структуру каталогов и установим Gulp и необходимые плагины.
Струтура проекта:
|--/assets // Компоненты |--|--/template |--|--/stylus |--|--/js |--|--/img |--/build // Каталог релиза |--/public // Каталог разработки |--package.json |--gulpfile.jsУстановка:
$ mkdir assets public build assets/js assets/img assets/stylus assets/template $ touch gulpfile.js $ sudo npm install gulp -g $ npm init $ npm install gulp gulp-jade gulp-stylus gulp-livereload gulp-myth gulp-csso gulp-imagemin gulp-uglify gulp-concat connect --save-devВ корне проекта есть файл конфигурации gulpfile.js его и будем редактировать.
Иницилизируем плагины:
var lr = require("tiny-lr"), // Минивебсервер для livereload gulp = require("gulp"), // Сообственно Gulp JS jade = require("gulp-jade"), // Плагин для Jade stylus = require("gulp-stylus"), // Плагин для Stylus livereload = require("gulp-livereload"), // Livereload для Gulp myth = require("gulp-myth"), // Плагин для Myth - http://www.myth.io/ csso = require("gulp-csso"), // Минификация CSS imagemin = require("gulp-imagemin"), // Минификация изображений uglify = require("gulp-uglify"), // Минификация JS concat = require("gulp-concat"), // Склейка файлов connect = require("connect"), // Webserver server = lr();Задачи:
Теперь создадим первую задачу// Собираем Stylus gulp.task("stylus", function() { gulp.src("./assets/stylus/screen.styl") .pipe(stylus({ use: ["nib"] })) // собираем stylus .on("error", console.log) // Если есть ошибки, выводим и продолжаем.pipe(myth()) // добавляем префиксы - http://www.myth.io/ .pipe(gulp.dest("./public/css/")) // записываем css .pipe(livereload(server)); // даем команду на перезагрузку css });
В Gulp мы работаем с потоком, поэтому получаем данные из gulp.src и поточно обрабатываем их.
Так же создадим задачи по обработке Jade, изображений и JS
// Собираем html из Jade
gulp.task("jade", function() {
gulp.src(["./assets/template/*.jade", "!./assets/template/_*.jade"])
.pipe(jade({
pretty: true
})) // Собираем Jade только в папке./assets/template/ исключая файлы с _*
.on("error", console.log) // Если есть ошибки, выводим и продолжаем.pipe(gulp.dest("./public/")) // Записываем собранные файлы.pipe(livereload(server)); // даем команду на перезагрузку страницы
});
// Собираем JS
gulp.task("js", function() {
gulp.src(["./assets/js/**/*.js", "!./assets/js/vendor/**/*.js"])
.pipe(concat("index.js")) // Собираем все JS, кроме тех которые находятся в./assets/js/vendor/**
.pipe(gulp.dest("./public/js"))
.pipe(livereload(server)); // даем команду на перезагрузку страницы
});
// Копируем и минимизируем изображения
gulp.task("images", function() {
gulp.src("./assets/img/**/*")
.pipe(imagemin())
.pipe(gulp.dest("./public/img"))
});
Для комфортной разработки создадим локальный сервер
// Локальный сервер для разработки
gulp.task("http-server", function() {
connect()
.use(require("connect-livereload")())
.use(connect.static("./public"))
.listen("9000");
console.log("Server listening on http://localhost:9000");
});
Необходимые нам выше задачи предназначены для разработки и конечно хочется отслеживать изменения файлов и иметь на сервере Livereload
Для этого создадим задачу "watch".
// Запуск сервера разработки gulp watch gulp.task("watch", function() { // Предварительная сборка проекта gulp.run("stylus"); gulp.run("jade"); gulp.run("images"); gulp.run("js"); // Подключаем Livereload server.listen(35729, function(err) { if (err) return console.log(err); gulp.watch("assets/stylus/**/*.styl", function() { gulp.run("stylus"); }); gulp.watch("assets/template/**/*.jade", function() { gulp.run("jade"); }); gulp.watch("assets/img/**/*", function() { gulp.run("images"); }); gulp.watch("assets/js/**/*", function() { gulp.run("js"); }); }); gulp.run("http-server"); });
Теперь можно запустить наш проект и посмотреть, что получилось.
$ gulp watch
Сервер доступен по адресу localhost:9000 Мы создали среду для веб-разработке проектов с помощью Stylus и Jade с Livereload. Теперь нужно собрать оптимизированный проект. Для этого создадим задачу "build"
Чтобы ускорить процесс фронтенд-разработки, мы автоматизируем выполнение некоторых задач с помощью сборщика Gulp.
Для этого нам понадобится пакетный менеджер NPM. Но, чтобы установить NPM, сначала надо установить Node.js.
Шаг 1. Установка Node
Заходим на официальный сайт https://nodejs.org и скачиваем рекомендованную версию.
Инсталлятор запускать с правами администратора.
После установки появятся 2 значка: Node.js и командная консоль Node.js coomand prompt. Нам они не пригодятся, так как мы не используем Node.js, а для запуска консоли есть более удобные варианты:
1. Использовать Командную консоль TotalCommander (Команды - Открыть командную консоль).
2. Зажать Shift и, кликнув правой кнопкой, открыть контекстное меню. В нем появится пункт "Открыть окно команд".
Запуск коммандной строки лучше производить, находясь в директории нужного вам проекта, в консоли сразу отобразится путь к нужной директории, это избавит от необходимости вводить путь вручную.
Для проверки версий node и npm наберите в командной строке
node -v и нажмите Enter
затем npm -v
Версии NPM обновляются обычно чаще, чем версии node, чтобы установить последнюю версию:
npm install npm@latest -g
Комманды npm, которые нам пригодятся
:
npm list
- список всех установленных пакетов
npm -g ls --depth=0
- список глобально установленнных пакетов
npm outdated
проверить, не устарели ли пакеты
npm update gulp
- обновление версий плагинов
npm init
- создать package.json
npm install package_name
- установить пакет (package_name - название нужного пакета)
npm install package_name --save-dev
- установить пакет и вносит запись о нем в package.json в секцию devDependencies
npm uninstall
package_name
- удаление пакета
npm install
- установить все пакеты, перечисленные в package.json
Перед запуском в продакшн npm shrinkwrap
- фиксируем версии пакетов,теперь npm install будет устанавливать именно их и вы будете уверены что все будет работать как надо
Сокращения
-v: --version
-g: --global
-S: --save
-D: --save-dev
-y: --yes
-n: --yes false
Шаг 2. Установка gulp
Сначала gulp надо установить глобально.
Запускаем командную консоль.
Иногда на некоторых ресурсах перед коммандой стоит значок доллара, например
$ npm install --global gulp-cli
Значок доллара не копировать, вставлять только саму комманду
npm install --global gulp-cli
Подсказка: чтобы вставлять скопированный текст в командную строку, открыть ком.строку, нажать ALT + SPACE -> Значения по умолчанию, поставить галочку Выделение мышью. Теперь можно выделить текст мышкой, скопировать, в ком. строке кликнуть правой кнопкой - текст вставится автоматически.
Шаг 3. Работа с gulp в конкретном проекте
3.1
Сначала создадим пакет зависимостей package.json
Файл package.json содержит информацию, которую мы внесем в терминале и список всех пакетов, которые мы используем в проекте.
При установке пакета с ключом --save-dev, пакет автоматически добавляется в package.json. Чтобы не устанавливать в каждом новом проекте все пакеты вручную, мы будем использовать уже готовый package.json с небходимыми нам модулями и зависимостями, расположив его в корне нашего проекта.
package.json генерируется с помощью команды npm init, которая выведет в консоль несколько вопросов для создания файла.
В пункте name по умолчанию отображается название вашего каталога с проектом.
Подсказка:
Вы можете сгенерировать это файл быстрее и проще, используя опцию --yes (автоматический ответ “да” на все вопросы):
npm init --yes
Полезно знать:
Вы можете установить значения по умолчанию, которые будут использоваться при каждом запуске npm init, а значит будут экономить вам время. После установки они сохраняются в.npmrc файлах.
Например:
npm config set init.author.name "Valentina Vladova"
npm config set init.author.email "[email protected]"
npm config set init.author.url "http://simpalmarket.com/"
npm set init-license MIT
npm set init-version 0.0.0
Затем запустить npm init, все указанные значения подтянутся в соответстующие переменные.
Когда npm init спросит про гит-репозиторий, пишите кратко user/repo — npm достаточно умён, чтобы раскрыть строчку в https://github.com/user/repo. npm также сгенерирует поля repository, bugs и homepage в нужном формате.
Итак, заходим в корневую папку проекта, вызываем командную консоль и набираем
npm init --yes
В корне проекта появится файл package.json с примерно таким содержанием
3.2
Установим gulp локально
В папке проекта в консоли вводим:
npm install --save-dev gulp
или сокращенно
npm i gulp --save-dev
В списке будут Warn - игнорируем.
Для проверки версии используем команду
gulp --version
В root-каталоге проекта появилась папка node_modules. В нее автоматически будут загружаться все модули и зависимости, которые мы будем устанавливать в проект. Папок с зависимостями может быть очень много, не смотря на то, даже если самих пакетов установлено не так уж и много. Это связано с тем, что в дополнение к основным пакетам устанавливаются программы, необходимые для корректной работы основного пакета. Ничего чистить и удалять из папки node_modules не нужно.
В файле package.json добавится запись
"devDependencies": {
"gulp": "^3.9.1"
}
Теперь можно устанавливать различные плагины для gulp.
http://gulpjs.com/plugins/
В поле поиска вводите название интересующего плагина.
Плагины можно устанавливать как по одному, например:
npm install --save-dev gulp-plumber
так и списком через пробел, например:
npm install gulp-sass gulp-plumber gulp-autoprefixer gulp-minify-css --save-dev
Плагины для установки и плагины для сборки лучше устанавливать отдельными командами