Gulp примеры. Установка и использование Gulp
Приветствую. Если вы занимаетесь frontend разработкой, то могли заметить, что часто приходится выполнять одни и те же задачи. Было бы здорово все это автоматизировать и свести объем рутины к минимуму. В этом вам могут помочь таск-менеджеры и сборщики проектов, такие как Gulp и Grunt.
Gulp – это ответвление от проекта Grunt. От своего родителя он взял лучшие практики. Код инструкций пишется на JavaScript. Работает быстрее, чем Grunt в несколько раз.
Gulp предоставляет по-настоящему широкие возможности. Он облегчит и ускорит frontend разработку. Перечислю основные задачи, которые сборщик проектов вам поможет решить.
- Создание веб-сервера для отладки
- Автоматическая перезагрузка страниц при внесении изменений (LiveReload)
- Слежение за изменениями в файлах проекта
- Использование препроцессоров HTML, CSS, JS
- Объединение файлов и их минификация
- Автоматическое создание вендорных префиксов для браузеров (Autoprefixer)
- Автоматизация управления файлами и директориями
- Запуск и контроль внешних команд операционной системы
- Запуск и контроль приложений
- Оптимизация изображений (сжатие, изменение размеров и т.д.)
- Выгрузка проекта на внешний сервер с помощью FTP, SFTP, Git и т.д.
- Подключение и использование дополнительных плагинов (сегодня их уже 3570 штук; решение можно
- найти практически для всех повседневных рутинных задач и не только)
- Автоматизация ручного труда
Установка
Для работы Gulp требуется Node.js. Скачать его можно на официальном сайте . Советую ставить LTS версию программной платформы. После инсталляции Node.js можно переходить к установке Gulp. Для этого откройте консоль операционной системы и выполните следующую команду:
Мы используем параметр -g , который позволяет установить Gulp глобально в операционной системе, без привязки к конкретному проекту.
Важно, чтобы в пути к директории установки не было русских символов. Из-за этого некоторые плагины gulp могут работать некорректно.
Окей, пришло время создать проект, в котором мы будем использовать Gulp. Перейдите в директорию проекта и выполните команду:
Это запустит скрипт, который задаст вам несколько вопросов о проекте. В результате будет сконфигурирован файл для npm package.json . Это манифест проекта. Он содержит список пакетов, которые используются в проекте и другую информацию. На этом этапе я внес следующие данные, адаптируйте под свой проект.
name: (bybtc-landing) version: (1.0.0) description: Landing Page for byBTC entry point: (index.js) test command: git repository: https://github.com/Neuropassenger/bybtc-landing.git keywords: landing
Если какой-то вопрос хотите пропустить, то просто нажимайте Enter. Будет использовано значение по умолчанию. Теперь можно установить Gulp для нашего проекта. Выполните команду:
npm i --save-dev gulp
Gulp будет установлен в директорию проекта, а параметр –save-dev добавит его в зависимости package.json. Это позволит другому разработчику, открывшему ваш проект, быстро развернуть его на своей машине (с помощью команды npm i ).
Если все прошло хорошо, то в папке проекта должен появиться каталог node_modules . Он содержит установленный пакет gulp и все зависимости, необходимые для его работы.
Настало время создать базовую структуру проекта. Я придерживаюсь тех же названий каталогов, что и многие разработчики. Советую это делать и вам, чтобы другой человек мог быстро разобраться в структуре вашего проекта. Впрочем, никто не запрещает вам использовать такие названия, какие вам хочется.
Создаем две папки в корне проекта:
- /src/ – исходный код проекта во время разработки, здесь вы будете редактировать файлы
- /dist/ – файлы и папки проекта после сборки, готовый продукт
Каталог /dist/ будет заполняться автоматически при сборке проекта. Займемся пока что /src/ . Создайте внутри следующие папки:
- /css/ – для каскадных таблиц стилей
- /js/ – для JavaScript-сценариев
- /img/ – для изображений
- /fonts/ – для шрифтов
- /sass/ – для файлов препроцессора SASS (если используете SASS)
- /libs/ – для сторонних библиотек
Если все готово, то пора перейти к созданию файла gulpfile.js в корне проекта, который поможет настроить Gulp. Именно здесь вы можете создать инструкции Gulp, которые помогут автоматизировать часть рутинных задач.
Инструкции Gulp
Любая инструкция создается в gulpfile.js с помощью функции gulp.task() . Первый параметр – это название инструкции. Затем идет массив из названий инструкций, которые нужно выполнить до запуска определяемой инструкции. Последний параметр – это функция, тело которой определяет то, что делает данная инструкция.
gulp.task("название_инструкции", ["инструкция_выполняющаяся_перед_текущей", "еще_одна_инструкция"], function() { // Какие-то действия });
Для вызова инструкции необходимо использовать в консоли следующую команду:
gulp название_команды
Компиляция SASS в CSS
Начнем с компиляции SASS в CSS. Установим пакет gulp-sass:
npm i --save-dev gulp-sass
Сначала необходимо подключить используемые пакеты в gulpfile.js . Сделаем это:
var gulp = require("gulp"), sass = require("gulp-sass");
Теперь создадим инструкцию, которая будет выполнять компиляцию SASS в CSS:
gulp.task("sass", function() { return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(gulp.dest("src/css")); });
В первой строке инструкции указываем исходные файлы для компиляции. В конкретном примере будут взяты все файлы с расширением .sass , находящиеся внутри папки /src/sass/ и ее подпапках. Можно выбирать и конкретные файлы. Вот примерный список того, как вы можете задавать пути к исходным файлам.
- src/sass/main.sass – выбор файла main.sass
- src/sass/*.sass – выбор всех файлов с расширением sass
- src/sass/**/*.sass – выбор всех файлов с расширением sass во всех вложенных папках в папке sass
- !src/sass/main.sass – исключение файла main.sass
- [‘!src/sass/main.sass’, ‘src/sass/second.sass’] – исключение массива файлов main.sass и second.sass
- src/sass/**/*.+(scss|sass) – выбрать все файлы scss и sass во всех вложенных папках в sass
Теперь создаем в папке /src/sass/ файл main.sass и определим в нем немного стилей:
body color: red font-size: 20px
Сохраняем файл. Теперь мы можем проверить, как работает компиляция. В консоли выполняем команду:
Проверяем каталог /src/css/ . В нем должен находится только что скомпилированный CSS файл. Видите? Отлично! Двигаемся дальше.
Автообновление страниц (LiveReload)
Перейдем к автоматизации обновления страниц при их изменении, т.е. настроим LiveReload . Это одна из самых популярных задач, стоящих перед . Нам понадобится пакет npm Browsersync для автоматического обновления браузера. Установим его:
npm i --save-dev browser-sync
Подключим browser-sync пакет в начале gulpfile.js , как мы это делали ранее с пакетами gulp и gulp-sass :
browserSync = require("browser-sync");
Создадим инструкцию для запуска Browsersync:
gulp.task("browser-sync", function() { browserSync({ server: { baseDir: "src" } }); });
Все, что мы сделали – это вызвали запуск Browsersync и указали директорию проекта с исходными файлами. Есть и другие настройки для Browsersync . Можете узнать о них в документации.
Добавим еще один pipe к инструкции sass , с помощью которого будет происходить обновление стилей при компиляции CSS файлов. Указываем параметр stream: true . Это позволит обновлять стили потоково , без полной перезагрузки страницы.
Pipe(browserSync.reload({ stream: true; }))
Затем создадим инструкцию, которая будет следить за изменениями в файлах и перезагружать страницу при необходимости.
gulp.task("watch", ["browser-sync"], function() { gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src/js/**/*.js", browserSync.reload); gulp.watch("src/**/*.html", browserSync.reload); });
Поясню. Перед запуском выполняется инструкция browser-sync , т.е. стартует веб-сервер для отладки проекта. После этого выполняется сама инструкция watch . Для слежения за изменениями в файлах используем gulp.watch() .
Внутри анонимной функции мы выполняем 3 раза gulp.watch с двумя параметрами. Первый параметр – файлы, за которыми нужно следить, второй – действия, которые нужно выполнить при изменении файлов, т.е. выполнить инструкцию sass или обновить страницу.
Обратите внимание на первый gulp.watch . Вместо browserSync.reload мы передаем в массиве инструкцию sass , которую нужно выполнить, если файлы были изменены. В ней, как вы помните, мы потоково обновляем стили на странице.
Минификация и объединение файлов
Почти в любом проекте приходится использовать сторонние библиотеки. Их количество может составлять от 5 и до бесконечности. Соответственно, все они должны быть включены в готовый продукт. Все это дело было бы неплохо оптимизировать, а именно:
- минифицировать (сжать) используемые библиотеки
- уменьшить количество запросов к серверу, объединив библиотеки в единый файл
Добавим в исходные файлы проекта несколько библиотек. Для этого я использую Bower , пакет для NPM . Установим Bower:
Создаем файл конфигурации .bowerrc в корне проекта для Bower, где укажем ему, куда сохранять библиотеки:
{ "directory": "src/libs/" }
Установим, для примера, библиотеку jQuery и слайдер slick :
bower i jquery slick-carousel
Теперь можем заняться конкатенацией и сжатием библиотек. Для этого будем использовать пакеты gulp-concat и gulp-uglifyjs касательно JavaScript-файлов. Установим их:
npm i --save-dev gulp-concat gulp-uglifyjs
Касательно CSS – пакет gulp-cssnano . Устанавливаем:
npm i --save-dev gulp-cssnano
Минифицированные файлы обычно имеют суффикс .min . Добавить его нам поможет пакет gulp-rename . Устанавливаем:
npm i --save-dev gulp-rename
Начнем с подключения установленных плагинов в gulpfile.js :
concat = require("gulp-concat"), uglifyJs = require("gulp-uglifyjs"), cssNano = require("gulp-cssnano"), rename = require("gulp-rename");
JavaScript
Создадим инструкцию, которая позволит нам сжимать и объединять JavaScript-файлы:
gulp.task("min-js", function() { return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min.js" ]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); });
Внутри анонимной функции инструкции min-js мы сначала указываем пути на JavaScript-файлы библиотек в виде массива. Затем с помощью concat объединяем библиотеки в единый файл libs.min.js uglifyJs . И, наконец, сохраняем результат в папку /src/js/ .
Инструкцию можно проверить с помощью команды в консоли:
В папке /src/js/ появится файл libs.min.js , в котором объединены и сжаты используемые в проекте JavaScript-файлы библиотек.
CSS
Создадим в каталоге /src/css/ файл libs.sass . Будем в него импортировать CSS-файлы библиотек. Для примера с помощью Bower я скачал библиотеку Bootstrap :
bower i bootstrap
Откроем файл libs.sass и импортируем в него CSS-файл Bootstrap:
@import "src/libs/bootstrap/dist/css/bootstrap"
Таким образом, мы соберем все CSS-файлы библиотек в одном месте, а именно в файле libs.sass с помощью импорта. Теперь создадим инструкцию для сжатия:
gulp.task("min-css", ["sass"] , function() { return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(rename({ suffix: ".min" })) .pipe(gulp.dest("src/css")); });
Перед сжатием мы компилируем CSS из SASS с помощью инструкции sass , которую мы указали в массиве после имени инструкции min-css .
В первой строке мы берем конкретный файл, libs.css . Далее сжимаем его с помощью cssNano . Затем с помощью rename добавляем суффикс .min . Результат сохраняем в папке /src/css/ .
Проверяем инструкцию:
Если вы все сделали правильно, то в папке /src/css/ должно появиться два файла. libs.css и libs.min.css . Сравните их размеры.
Автоматическое добавление вендорных префиксов (Autoprefixer)
При использовании свежих возможностей CSS необходимо расставлять вендорные префиксы для правильной работы стилей. Делать такие вещи вручную – неблагодарное занятие. Поэтому заставим Gulp это сделать за нас.
Для начала установим gulp-autoprefixer :
npm i --save-dev gulp-autoprefixer
Подключим установленный пакет в gulpfile.js :
autoprefixer = require("gulp-autoprefixer");
Окей, теперь мы можем использовать autoprefixer в инструкции sass . Сделаем это после вызова .pipe(sass()) , т.к. вендорные префиксы нужно расставить после того, как SASS будет преобразован в CSS. Добавим новый pipe :
Pipe(autoprefixer([ "last 10 versions" ], { cascade: true }))
Первым параметром autoprefixer мы передаем массив, в котором указываем, что хотим включить поддержку последних 10 версий браузеров. Второй параметр – это настройки, где мы указываем, что хотим видеть красивый код на выходе, т.е. включаем каскадность.
Проверяем, добавляя в main.sass новое свойство flex . Запускаем инструкцию sass :
В main.css должны появиться вендорные префиксы. Очень просто, все работает в автоматическом режиме. Замечательно!
Финальная сборка проекта
Последнее, чего хотелось бы коснуться в этом гайде для новичков по Gulp – это финальная сборка проекта. Для этого нам понадобится папка /dist/ , которую мы создали в самом начале. Перед каждой сборкой ее необходимо очищать. Для этого будем использовать пакет NPM del . Установим его:
npm i --save-dev del
Подключим пакет del в gulpfile.js :
del = require("del");
Создадим инструкцию clean для очистки каталога / dist/ перед сборкой:
gulp.task("clean", function() { return del.sync("dist"); });
Теперь можно заняться непосредственно сборкой проекта. Создадим инструкцию build :
gulp.task("build", ["clean", "min-css", "min-js"], function() { var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]) .pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest("dist/fonts")); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src("src/*.html") .pipe(gulp.dest("dist")); });
Перед вызовом инструкции build мы очищаем папку /dist/ на тот случай, если сборка уже проводилась до этого. Затем сжимаем и объединяем JavaScript и CSS файлы с помощью инструкций min-js и min-css соответственно . Попутно компилируем SASS в CSS, т.к. перед выполнением инструкции min-css выполняется инструкция sass .
Внутри тела инструкции мы копируем подготовленные файлы проекта в каталог с готовым продуктом /dist/ . Проверяем работу инструкции:
Все отлично работает! В папке /dist/ теперь находится готовый продукт после сборки, который можно выгружать на рабочий сервер.
Заключение
На этом закончу гайд для новичков по сборке проектов в Gulp. Как видите, все довольно просто. Со временем опубликую еще несколько постов, касающихся Gulp и его плагинов, как только сам хорошенько в них разберусь. А пока пользуйтесь и автоматизируйте свои рутинные задачи во frontend разработке согласно приведенной инструкции. Если появятся вопросы – задавайте в комментариях к посту.
{ "name": "bybtc-landing", "version": "1.0.0", "description": "Landing Page for byBTC", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/Neuropassenger/bybtc-landing.git" }, "keywords": [ "landing" ], "author": "Oleg Sokolov", "license": "ISC", "bugs": { "url": "https://github.com/Neuropassenger/bybtc-landing/issues" }, "homepage": "https://github.com/Neuropassenger/bybtc-landing#readme", "devDependencies": { "browser-sync": "^2.18.13", "del": "^3.0.0", "gulp": "^3.9.1", "gulp-autoprefixer": "^4.0.0", "gulp-concat": "^2.6.1", "gulp-cssnano": "^2.1.2", "gulp-rename": "^1.2.2", "gulp-sass": "^3.1.0", "gulp-uglifyjs": "^0.6.2" } }
var gulp = require("gulp"), sass = require("gulp-sass"), browserSync = require("browser-sync"), concat = require("gulp-concat"), uglifyJs = require("gulp-uglifyjs"), cssNano = require("gulp-cssnano"), rename = require("gulp-rename"), autoprefixer = require("gulp-autoprefixer"), del = require("del"); gulp.task("sass", function() { return gulp.src("src/sass/**/*.sass") .pipe(sass()) .pipe(autoprefixer([ "last 10 versions" ], { cascade: true })) .pipe(gulp.dest("src/css")) .pipe(browserSync.reload({ stream: true })); }); gulp.task("min-css", ["sass"] , function() { return gulp.src("src/css/libs.css") .pipe(cssNano()) .pipe(rename({ suffix: ".min" })) .pipe(gulp.dest("src/css")); }); gulp.task("min-js", function() { return gulp.src([ "src/libs/jquery/dist/jquery.min.js", "src/libs/slick-carousel/dist/slick.min.js" ]) .pipe(concat("libs.min.js")) .pipe(uglifyJs()) .pipe(gulp.dest("src/js")); }); gulp.task("browser-sync", function() { browserSync({ server: { baseDir: "src" } }); }); gulp.task("watch", ["browser-sync"], function() { gulp.watch("src/sass/**/*.sass", ["sass"]); gulp.watch("src/js/**/*.js", browserSync.reload); gulp.watch("src/**/*.html", browserSync.reload); }); gulp.task("clean", function() { return del.sync("dist"); }); gulp.task("build", ["clean", "min-css", "min-js"], function() { var buildCss = gulp.src([ "src/css/libs.min.css", "src/css/main.css" ]) .pipe(gulp.dest("dist/css")); var buildFonts = gulp.src("src/fonts/**/*") .pipe(gulp.dest("dist/fonts")); var buildJs = gulp.src("src/js/**/*") .pipe(gulp.dest("dist/js")); var buildHtml = gulp.src("src/*.html") .pipe(gulp.dest("dist")); });
Всем привет! В этой статье мы создадим наш проект, инициализируем файл манифеста и установим 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 .
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 смотрите на сайте этого приложения.
13 декабря 2017 в 17:40Понимаем и работаем с gulp
- JavaScript
Всем привет. Если вы связаны хоть как-то с 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
*
Содержимое может быть представлено в двух форматах: в виде уже прочитанного буфера, или же в виде родного нодовского потока. Каждая ступень галповского пайпа берет на вход такие вот файлы, делает некую трансформацию и передает на выход следующей цепочке. Последняя цепочка обычно просто сохраняет их на диск.
Pipe(gulp.dest("dist/"));
Осознание факта того, что потоки в gulp другие ведет к просветлению и пониманию, поскольку это объясняет большинство проблем и ошибок.
Рассмотрим реальный пример. Вы хотите использовать browserify для склейки ваших JS файлов. Вы идете, и находите плагин gulp-browserify . Но видите приписку, которая говорит, что плагин deprecated, т.е. Устарел.
Как хорошо воспитанный программист вы отметаете этот вариант, и идете искать, а какое же решение не устарело. Находите официальные рецепты от gulp, и видите , что browserify работает с галпом напрямую. Ну как напрямую, через прослойку , которая как раз и переводит родной нодовский поток в виниловский поток, который понимает gulp. Без него ничего бы не заработало, поскольку это разные потоки.
Если вы хотите написать свою трансформацию, то можете использовать данный шаблон .
Как видим, здесь все просто: на каждый файл будет вызываться наш обработчик, который и выполнит модификации. Мы можем делать все что захотим: изменить содержимое файла, переименовать файл, удалить файл или добавить еще пару новых файлов в поток.
Как мы помним, содержимое файла в виниловском потоке может быть представлено в виде буфера или в виде потока данных. Однако не обязательно поддерживать и то другое. Всегда можно использовать пакет
Чтобы ускорить процесс фронтенд-разработки, мы автоматизируем выполнение некоторых задач с помощью сборщика 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
Плагины для установки и плагины для сборки лучше устанавливать отдельными командами