Строительство / 29.04.2024

Установка и использование Gulp. Gulp для самых маленьких - подробное руководство Gulp для самых маленьких

Установка Gulp довольно простая. Для начала установите пакет Gulp глобально:

Npm install -g gulp

Затем установите его в свой проект:

Npm install --save-dev gulp

Использование Gulp

Давайте создадим задачу Gulp для минимизации одного из наших файлов JavaScript. Создайте файл с именем gulpfile.js. В нём будут определяться ваши задачи, которые запускаются с помощью команды gulp.

Добавьте следующие команды в ваш файл gulpfile.js:

Var gulp = require("gulp"), uglify = require("gulp-uglify"); gulp.task("minify", function () { gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build")) });

Установите gulp-uglify через npm выполнив npm install --save-dev gulp-uglify , а затем запустите задачу через gulp minify . Предположим, у вас есть файл с именем app.js в папке js, новый app.js будет создан в папке build и содержать сжатую версию js/app.js.

Что на самом деле здесь происходит?

Мы делаем несколько вещей в нашем файле gulpfile.js. Вначале мы загружаем модули gulp и gulp-uglify:

Var gulp = require("gulp"), uglify = require("gulp-uglify");

Затем определяем задачу с именем minify, которая при запуске вызывает функцию, заданную в качестве второго аргумента:

Gulp.task("minify", function () { });

В конце, и это самое сложное, мы определяем, что наша задача должна делать:

Gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build"))

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

Потоки

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

В приведённом выше примере функция gulp.src() получает строку, которая соответствует файлу или набору файлов, и создаёт поток объектов представляющих эти файлы. Затем они переходят (или перетекают) в функцию uglify() , которая принимает объекты файлов и возвращает новые объекты файлов с минимизированным исходником. Этот результат затем перетекает в функцию gulp.dest() , которая сохраняет изменённые файлы.

Вот что происходит в виде схемы:

Когда есть только одна задача, функция ничего не делает. Тем не менее, рассмотрим следующий код:

Gulp.task("js", function () { return gulp.src("js/*.js") .pipe(jshint()) .pipe(jshint.reporter("default")) .pipe(uglify()) .pipe(concat("app.js")) .pipe(gulp.dest("build")); });

Чтобы запустить это самостоятельно, установите gulp, gulp-jshint, gulp-uglify и gulp-concat.

Эта задача берёт все файлы соответствующие js/*.js (иными словами все файлы JavaScript из папки js), запускает для них JSHint, выводит отчёт, минимизирует каждый файл, а затем объединяет их, сохраняя их в build/app.js. В виде схемы:

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

Для лучшего понимания потоков прочтите Stream Handbook .

gulp.src()

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

Два других плагина понятнее: функция uglify() минимизирует код, а функция concat("app.js") объединяет все файлы в один с именем app.js.

gulp-load-plugin

Модуль, который я нахожу весьма полезным называется gulp-load-plugins, он автоматически загружает любые плагины Gulp из файла package.json и присоединяет их к объекту. Основное применение следующее:

Var gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins();

Вы можете записать всё в одну строку (var plugins = require("gulp-load-plugins")(); ), но я не большой поклонник однострочного вызова require.

После запуска этого кода объект plugins будет содержать ваши плагины с именами в CamelCase-стиле (к примеру, gulp-ruby-sass будет загружен как plugins.rubySass ). Вы можете использовать их обычным путём. Например, наша задача js сократится так:

Var gulp = require("gulp"), gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins(); gulp.task("js", function () { return gulp.src("js/*.js") .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter("default")) .pipe(plugins.uglify()) .pipe(plugins.concat("app.js")) .pipe(gulp.dest("build")); });

К этому прилагается файл package.json, который содержит нечто похожее:

{ "devDependencies": { "gulp-concat": "~2.2.0", "gulp-uglify": "~0.2.1", "gulp-jshint": "~1.5.1", "gulp": "~3.5.6" } }

Данный пример на самом деле не намного короче. Однако для объёмных и сложных Gulp-файлов, это сократит блок с загрузкой файлов до одной или двух строк.

Версия 0.4.0 gulp-load-plugins выпущенная в начале марта добавила отложенную загрузку плагина, которая улучшает производительность. Плагины не загружаются, пока их не вызовем, это значит, что вам не придётся беспокоиться о неиспользованных плагинах в package.json влияющих на производительность (хотя их, вероятно, следует убрать в любом случае). Другими словами, если вы запустите задачу, которая требует только два плагина, она не станет загружать все плагины, которые необходимы для других задач.

Отслеживание файлов

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

Для слежения за файлом или файлами используйте функцию gulp.watch() , которая принимает шаблон файлов или их массив (такой как gulp.src() ), либо массив задач для их запуска или выполнения функции обратного вызова.

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

Gulp.task("watch", function () { gulp.watch("templates/*.tmpl.html", ["build"]); });

Теперь при изменении файла шаблона будет запущена задача build, которая создаст HTML.

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

Gulp.watch("templates/*.tmpl.html", function (event) { console.log("Event type: " + event.type); // добавлено, изменено или удалено console.log("Event path: " + event.path); // путь к файлу });

Другой отличительной особенностью gulp.watch() является то, что она возвращает watcher . Используйте его для прослушивания дополнительных событий или для добавления файлов в watch. Например, чтобы одновременно запустить список задач и вызвать функцию, вы можете добавить слушателя в событие change при возвращении watcher :

Var watcher = gulp.watch("templates/*.tmpl.html", ["build"]); watcher.on("change", function (event) { console.log("Event type: " + event.type); // добавлено, изменено или удалено console.log("Event path: " + event.path); // путь к файлу });

В дополнение к событию change вы можете прослушивать ряд других событий:

end
Срабатывает, когда watcher завершается (это означает, что задачи и функции обратного вызова не будут больше вызываться при изменении файлов).
error
Срабатывает, когда происходит ошибка.
ready
Срабатывает, когда файлы были найдены и готовы к отслеживанию.
nomatch
Срабатывает, когда запросу не соответствует ни один файл.

Объект watcher также содержит некоторые методы, которые можно вызывать:

watcher.end()
Останавливает watcher (при этом задачи или функции обратных вызовов не будут больше вызываться).
watcher.files()
Возвращает список файлов за которыми следит watcher .
watcher.add(glob)
Добавляет файлы в watcher , которые соответствуют указанному шаблону glob (также принимает необязательную функцию обратного вызова в качестве второго аргумента).
watcher.remove(filepath)
Удаляет определённый файл из watcher .

Npm init

От вас потребуется:

Указать название проекта
Версию проекта
Описание проекта
Точку входа
Команду
Git репазиторий
Ключевые слова
Имя автора
Лицензия

Npm i –g gulp

Название задачи

Gulp test

Задача работает.

Gulp serve

Npm i gulp-sass --save-dev

Компилирование sass в css
Добавление префиксов
Сохранение файла в src/css

Создание задачи в gulp

Вывод.

https://gulpjs.com/plugins/

Открываем терминал и переходим в папку с проектом. Первое, что нам необходимо сделать это инициализировать npm для этого выполняем команду:

Npm init

От вас потребуется:

Указать название проекта
Версию проекта
Описание проекта
Точку входа
Команду
Git репазиторий
Ключевые слова
Имя автора
Лицензия

Все можно оставить по умолчанию (если вы не хотите выкладывать проект в общий доступ)

Затем подтверждаем введенную информацию.

Отлично. NPM инициализировали. Теперь в корне появился файл packages.json – файл конфигурации менеджера пакетов.

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

Npm i –g gulp

Теперь установим gulp для проекта:

Npm install --save-dev gulp

Все gulp для проекта установлен.

Давайте проверим. Создадим файл gulpfile.js и создадим в нем одну задачу test, которая будет выводить в консоль «Я работаю».

Var gulp = require("gulp"); gulp.task("test", function() { console.log("Я работаю"); });

Первое мы подключаем gulp, и второе мы вызываем функцию task у gulp, которая принимает два параметра:

Название задачи
Анонимная функция в которой описывается наша задача

Теперь в консоли выполните следующую команду

Gulp test

Задача работает.

Теперь давайте установим и подключим пакеты, которые помогают при верстке.

Browsersync, пакет который позволяет при изменении файлов обновлять страницу автоматически

Для установки в консоли выполняем следующую команду:

Npm i browser-sync --save-dev

Теперь давайте создадим задачу, которая будет запускать browser-sync и отслеживать изменения файлов.

Gulp.task("serve", ["sass"], function() { browserSync.init({ server: "src/" }); gulp.watch("src/css/*.css")on("change", browserSync.reload); gulp.watch("src/*.html").on("change", browserSync.reload); });

Задача называется serve. И browser-sync будет обновлять страницу браузера автоматически, если изменились файлы с расширением css (которые расположены в папке src/css) и с расширением html (которые расположены в папке src).

Для запуска данной задачи выполняем команду

Gulp serve

Для верстки я использую sass. Поэтому для компиляции из sass в css я использую пакет gulp-sass.

Установка и настройка gulp-sass

Для установки gulp-sass в консоли выполняем команду:

Npm i gulp-sass --save-dev

Теперь создадим задачу sass, которая будет компилировать sass в css. И изменим задачу serve, чтобы наш browser-sync отслеживал вместо css файлы sass.

Var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); gulp.task("serve", ["sass"], function() { browserSync.init({ server: "src/" }); gulp.watch("src/sass/*.sass", ["sass"]); gulp.watch("src/*.html").on("change", browserSync.reload); }); gulp.task("sass", function() { return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); });

Теперь при запуске задачи serve, будет запускаться задача sass.

Установка и настройка gulp-autoprefixer

Для установки gulp-autoprefixer выполним команду:

Npm i gulp-autoprefixer --save-dev

И добавим в задачу sass добавление префикса.

Var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); gulp.task("serve", ["sass"], function() { browserSync.init({ server: "src/" }); gulp.watch("src/sass/*.sass", ["sass"]); gulp.watch("src/*.html").on("change", browserSync.reload); }); gulp.task("sass", function() { return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer({ browsers: ["last 2 versions"], cascade: false })) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); });

Теперь при запуске задачи sass у на с будет:

Компилирование sass в css
Добавление префиксов
Сохранение файла в src/css

Следующий пакет объединяет все css файлы в один.

Установка и настройка contactCss

Для установки contactCss используем следующую команду:

Npm i gulp-concat-css --save-dev

И добавим выполнение данного пакета в задачу sass. (Будем все файлы css объединять в style.css)

Var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); gulp.task("serve", ["sass"], function() { browserSync.init({ server: "src/" }); gulp.watch("src/sass/*.sass", ["sass"]); gulp.watch("src/*.html").on("change", browserSync.reload); }); gulp.task("sass", function() { return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer({ browsers: ["last 2 versions"], cascade: false })) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); });

Отлично. Теперь добавим пакет, который переименовывает файлы. (Он нам понадобится, кода мы будем минимизировать css, и js файлы)

Установка и настройка gulp-rename

Для установки gulp-rename выполним следующую команду:

Npm i gulp-rename --save-dev

Пока данный пакет не будем добавлять ни в какие задачи.

Установка и настройка пакета для минимизации CSS файлов – clean-css

Для установки clean-css выполним следующую команду:

Npm i gulp-clean-css --save-dev

Теперь давайте создадим задачу mincss, которая будет добавлять к имени файла суффикс «.min», минимизировать css файл и сохранять в app/css

Var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); gulp.task("serve", ["sass"], function() { browserSync.init({ server: "src/" }); gulp.watch("src/sass/*.sass", ["sass"]); gulp.watch("src/*.html").on("change", browserSync.reload); }); gulp.task("sass", function() { return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer({ browsers: ["last 2 versions"], cascade: false })) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); }); gulp.task("mincss", function() { return gulp.src("src/css/*.css") .pipe(rename({suffix: ".min"})) .pipe(cleanCSS()) .pipe(gulp.dest("app/css")); })

Отлично, давайте установим gulp пакет, который будет минимизировать js файлы.

Установка и настройка пакета gulp для минимизации js файлов —gulp-uglify

Для установки gulp-uglify выполним следующую команду:

Npm i gulp-uglify --save-dev

Теперь создадим задачу, которая будет добавлять к файлу суффикс «.min», минимизировать файл js и сохранять в app/js

Var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); var uglify = require("gulp-uglify"); gulp.task("serve", ["sass"], function() { browserSync.init({ server: "src/" }); gulp.watch("src/sass/*.sass", ["sass"]); gulp.watch("src/*.html").on("change", browserSync.reload); }); gulp.task("sass", function() { return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer({ browsers: ["last 2 versions"], cascade: false })) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); }); gulp.task("mincss", function() { return gulp.src("src/css/*.css") .pipe(rename({suffix: ".min"})) .pipe(cleanCSS()) .pipe(gulp.dest("app/css")); }) gulp.task("minjs", function() { return gulp.src("src/js/*.js") .pipe(rename({suffix: ".min"})) .pipe(uglify()) .pipe(gulp.dest("app/js")); })

Мы создали основные задачи. Но две последние должны выполняться при выкладывании проекта в продакшен. И выполняться должны вместе. Давайте создадим задачу, которая будет выполнять задачу mincss, а потом minjs

Создание задачи в gulp

Создадим задачу min, которая будет запускать задачи mincss и minjs

Var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); var uglify = require("gulp-uglify"); gulp.task("serve", ["sass"], function() { browserSync.init({ server: "src/" }); gulp.watch("src/sass/*.sass", ["sass"]); gulp.watch("src/*.html").on("change", browserSync.reload); }); gulp.task("sass", function() { return gulp.src("src/sass/*.sass") .pipe(sass().on("error", sass.logError)) .pipe(autoprefixer({ browsers: ["last 2 versions"], cascade: false })) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); }); gulp.task("mincss", function() { return gulp.src("src/css/*.css") .pipe(rename({suffix: ".min"})) .pipe(cleanCSS()) .pipe(gulp.dest("app/css")); }) gulp.task("minjs", function() { return gulp.src("src/js/*.js") .pipe(rename({suffix: ".min"})) .pipe(uglify()) .pipe(gulp.dest("app/js")); }) gulp.task("min",["mincss", "minjs"]);

Все. Давайте еще зададим задачу по умолчанию.

Задание задачи по умолчанию gulp

gulp.task("default", ["serve"]);

Вывод.

Мы с вами рассмотрели для чего нужен gulp, как его установить. Установили дополнительные пакеты, которые необходимы для верстки и задали задачи.

Вы можете самостоятельно находить необходимые пакеты на сайте https://gulpjs.com/plugins/ и устанавливать их. А затем создавать задачи для оптимизации процесса разработки.

Всем привет. Если вы связаны хоть как-то с JS, вы наверняка слышали о таком приложении как gulp . А возможно даже и использовали. По своему опыту могу сказать, что «въехать» в то, как с ним работать бывает сложно, хотя ключ к пониманию лежит на поверхности. Поэтому и публикую этот материал, надеясь, что он станет полезным.

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

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

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

Зайдем издалека. В экосистеме nodejs, существует такое понятие, как потоки , или stream. Из-за сложности перевода, потоками так же называются нити или threads многопоточной программы. В нашем же случае, поток - это объект, представляющий потоковые данные, и является совершенно иным понятием.

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

Const fs = require("fs"); const input = fs.createReadStream("myfile"); input.on("data", (chunk) => { console.log(chunk); }); input.on("end", () => { console.log("file is read"); });
Потоками в nodejs может быть практически все, начиная от файлов или строк заканчивая сокетами. Например, в известном фреймворке Express, HTTP запрос и ответ являются ни чем иным, как потоками. Потоки могут быть только на чтение, только на запись или и то и другое.

Есть у потоков одна полезная функция: их можно складывать между собой у цепочку, которая называется pipe. Таким образом, мы можем объединить несколько потоков между собой, и управлять им как одним целым. Выход одного потока идет на вход следующему и так до конца. Как можно догадаться из перевода слова pipe, это очень похоже на трубопровод.

Это позволяет определить нужный поток данных (опять сложность перевода. Здесь имеется в виду flow, или течение) прямо здесь и сейчас не дожидаясь, когда данные станут доступны.

Например, вот так вот мы можем определить, что мы хотим отдать как результат, а “как” отдавать уже занимается сам движок.

Const fs = require("fs"); const express = require("express"); var app = express(); app.get("/", function (req, res) { fs.createReadStream("myfile") .pipe(res); }); app.listen(3000);
Обратите внимание, что обработчик запроса завершается до того, как файл даже откроется - остальное берет на себя движок ноды.

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

Если вы когда-нибудь слышали о vinyl - это как раз и есть реализация потоков, которые используют в gulp. Если мы возьмем стандартную задачу для галпа, и посмотрим что там внутри, то обнаружим, что на каждый вызов события data к нам приходит объект file, который и содержит всю необходимую информацию: имя файла, путь к файлу, рабочая директория и конечно же, его содержимое.

Const gulp = require("gulp"); gulp.task("default", function() { gulp.src("./*.js") .on("data", function(file) { console.log("data callback"); console.log(file.inspect()); /* It outputs: * data callback * > * data callback * > */ }) .pipe(gulp.dest("dist/")); });
Содержимое может быть представлено в двух форматах: в виде уже прочитанного буфера, или же в виде родного нодовского потока. Каждая ступень галповского пайпа берет на вход такие вот файлы, делает некую трансформацию и передает на выход следующей цепочке. Последняя цепочка обычно просто сохраняет их на диск.

Pipe(gulp.dest("dist/"));
Осознание факта того, что потоки в gulp другие ведет к просветлению и пониманию, поскольку это объясняет большинство проблем и ошибок.

Рассмотрим реальный пример. Вы хотите использовать browserify для склейки ваших JS файлов. Вы идете, и находите плагин gulp-browserify . Но видите приписку, которая говорит, что плагин deprecated, т.е. Устарел.

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

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

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

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 Save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. (Crtl+C для выхода) name : (WebDevelopment) Sorry, name can no longer contain capital letters. name : (WebDevelopment) nodeproject version : (1.0.0) description : mytest entry point : (index.js) test command : git repository : keywords : author : Andrew license : (ISC) About to write to Z:\WebDevelopment\package.json : { "name": "nodeproject", "version": "1.0.0", "description": "mytest", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Andrew", "license": "ISC" } Is this ok? (yes) Z:\WebDevelopment>

В итоге, в папке, где была запущена консоль, будет создан файл манифеста package.json для проекта Node.js с заданными в примере выше параметрами.

ШАГ 3 локальная установка Gulp

Теперь, когда был создан проект Node.js , рассмотрим общий синтаксис команды npm install , которая используется для установки пакетов приложений в Node.js .

Установка пакетов в Node.js

Установка пакетов в проект Node.js из репозитория npm производится при помощи следующих команд:

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

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 Save-dev для локальной установки пакета npm uninstall Save-dev для локального удаления пакета

Пакеты приложений под 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 :

После выполнения такой, локальной установки 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 для самых маленьких - подробное руководство Gulp для самых маленьких