Gulp для ускорения разработки

Введение

Gulp — это таск-менеджер для автоматического выполнения часто используемых задач
(например, минификации, тестирования, объединения файлов), написанный на
языке программирования JavaScript.

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

Создан как ответвление от проекта Grunt, чтоб взять из него лучшие практики.
Распространяется через менеджер пакетов

NPM

под MIT лицензией.

Если Вы будете копировать код с этой страницы — имейте в виду, что я ставлю кое-где лишние
проблелы — исключительно для того, чтобы текст лучше помещался на экран. Смело удаляйте их.

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

	Как скопировать папку с помощью Gulp
	Объединить и сжать несколько css файлов в один
	Как отправить файлы по ftp с помощью Gulp
	Gulp series
	Обработка только изменённых файлов с помощью gulp.watch().on(‘change’)

Установка Gulp

Установка Gulp 4 довольно простая. Так как Gulp написан на языке javascript, изначально необходимо установить Node.js на вашу систему. Просто заходите на сайт https://nodejs.org, скачиваете инсталятор последний версии и устанавливаете.

Далее создаем папку для проекта в любом удобном месте компьютера и вызываем окно терминала в этом каталоге. В командной строке запускаем инициализацию проекта:

Отвечаем на вопросы на каждом шаге. После каждого ввода нажимаем Enter и переходим к следующему шагу. В результате получим файл package.json, который содержит информацию о проекте и установленных плагинах. Далее установим gulp в наш проект:

После установке Gulp 4 название пакета и его версия сохранятся в файле package.json. Флаг —save-dev используется для сохранения пакета в package.json в раздел devDependencies, то есть в целях разработки. Если установить пакет с флагом —save, то пакет попадает в раздел dependencies (для запуска приложения).

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

Таким образом все пакеты и зависимости установятся автоматически. После установки gulp в каталоге проекта создалась папка node_modules. Все новые установленные пакеты и зависимости сохраняются в данную папку. Поэтому изменять содержимое этого каталога нельзя.

Далее в каталоге проекта создаем файл gulpfile.js. Это самый основной файл, без которого Gulp работать не может. По сути в него можно писать любой javascript код, но gulp — это менеджер управления задачами, и эти задачи описываются в этом файле в виде обычных функций. Что бы запускать эти задачи, функцию нужно экспортировать через оператор exports. Пример:

На примере выше мы создали задачу под название testTask, в которой выводим строчку test. После этого мы экспортируем эту задачу. Что бы Gulp знал, что задача выполнена, мы вызываем функцию обратного вызова done.

Что бы запустить Gulp, можно установить отдельную утилиту глобально на вашу систему:

После этого в консоли вводим команду gulp и через пробел название задачи:

Но есть и альтернативный вариант. Можно передать дополнительные параметры командам запуска в файле package.json для раздела scripts:

В этом случае запускается задача так:

gulp — это значение с раздела scripts файла package.json, а test — название задачи. В итоге в консоле выведется слово test:

Custom Metadata

When listing tasks with the command, gulp-cli displays some custom metadata as defined upon task functions. Currently supported properties:

task.description — String of the description to display.

functionclean(){...}clean.description='Cleans up generated files.';

task.flags — Object with key/value pairs being flag/description to display.

functionbuild(){...}build.flags={'--prod''Builds in production mode.'};

Example Usage:

functionbuild(){...}build.description='Build entire project.';build.flags={'--prod''Builds in production mode (minification, etc).'};gulp.task('build', build);gulp.task(build);

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

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

$ npm install gulp-sass —save-dev

1	$npm install gulp-sass—save-dev

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

var sass = require(‘gulp-sass’);

1	varsass=require(‘gulp-sass’);

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

gulp.task(‘sass’, function(){
gulp.src(‘source-files’)
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest(‘destination’))
});

1
2
3
4
5
6

crayon-61bb602060994208584189inline=»true»

gulp.task(‘sass’,function(){

gulp.src(‘source-files’)

.pipe(sass())// Using gulp-sass

.pipe(gulp.dest(‘destination’))

});

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

styles.scss

1	styles.scss

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

gulp.task(‘sass’, function(){
gulp.src(‘source-files’)
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest(‘destination’))
});

1
2
3
4
5

gulp.task(‘sass’,function(){

gulp.src(‘source-files’)

.pipe(sass())// Using gulp-sass

.pipe(gulp.dest(‘destination’))

});

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

// styles.scss
.testing {
width: percentage(5/7);
}

1
2
3
4

// styles.scss

.testing {

widthpercentage(5/7);

}

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

/* styles.css */
.testing {
width: 71.42857%;
}

1
2
3
4

/* styles.css */

.testing {

width71.42857%;

}

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

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

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

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

gulp.task(‘sass’, function() {
return gulp.src(‘app/scss/**/*.scss’) // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass())
.pipe(gulp.dest(‘app/css’))
})

1
2
3
4
5

gulp.task(‘sass’,function(){

returngulp.src(‘app/scss/**/*.scss’)// Gets all files ending with .scss in app/scss and children dirs

.pipe(sass())

.pipe(gulp.dest(‘app/css’))

})

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

Тестирование полученного приложения

gulp
node dist/main.js

Приложение должно вывести в консоль «Привет от TypeScript!».

Добавление модулей

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

Создайте файл :

export function sayHello(name: string) {
    return `Привет от ${name}`;
}

Теперь измените код в так, чтобы импортировалась из :

import { sayHello } from "./greet";

console.log(sayHello("TypeScript"));

И, наконец, добавьте в :

{
    "files": [
        "src/main.ts",
        "src/greet.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es5"
    }
}

Убедитесь, что модули работают, запустив и проверив работу кода в Node:

gulp
node dist/main.js

Обратите внимание, что хотя мы применили синтаксис модулей из ES2015, TypeScript создал модули CommonJS, которые используются в Node.
Для целей этого руководства формат CommonJS вполне подходит, но вы можете установить параметр на объекте настроек, чтобы выбрать формат модулей

Browserify

Теперь перенесем проект с Node в браузер.
Для этого пришлось бы упаковать все модули в один JavaScript-файл.
К счастью, именно это и делает Browserify.
Больше того, Browserify позволяет использовать модульную систему CommonJS, которая применяется в Node, и модули для которой по умолчанию создает TypeScript.
Это значит, что вносить много изменений в уже настроенную связку TypeScript и Node не потребуется.

Сначала установите browserify, tsify, и vinyl-source-stream.
tsify это плагин для Browserify, который, подобно gulp-typescript, предоставляет доступ к компилятору TypeScript.
vinyl-source-stream позволяет согласовать файловый вывод Browserify и формат под названием vinyl, который понимает gulp.

npm install --save-dev browserify tsify vinyl-source-stream

Пример использования

По Pug и Stylus будут следующие статьи.

На данный момент, просто посмотрим как автоматически генерируются index.html и main.css и обновляется страница при их изменении

Откроем файл index.pug (app/pug/index.pug) в редакторе кода (я использую Sublime Text 3)

Внесем изменения в index.pug

Повторюсь, синтаксис Pug разберем в одной из следующих статей

Сохраняем index.pug с внесенными изменениями, при этом автоматически генерируется index.html и страница в браузере перезагружается

Аналогично откроем main.styl (app/styl/main.styl)

Внесем изменения

Сохраняем main.styl — Gulp генерирует main.css (dist/css/main.css) — страница в браузере перезагружается

Дополнительные полезные плагины для Gulp

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

Plumber — дает возможность продолжить работу gulp при ошибке в коде. На самом деле, если вы в коде (html, js, sass, css) сделаете ошибку gulp выдаст ее в консоли и прекратит свою работу. Вам необходимо будет исправить ошибку и вновь запустить gulp.

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

Tinypng — сжатие изображений. Работает по той же аналогии, что и imagemin, но сжимает значительно лучше.

SvgSprite — сборка svg-спрайта иконок. В последнее время я перешел с иконочных шрифтов на svg иконки. Чтобы уменьшить количество http запросов к серверу нужно собирать иконки в спрайты.

Rigger — объединяет html-файлы в один. Необходимо, когда вы разбиваете html-файлы на отдельные неизменяемые блоки, например, шапка сайта, футер и т.д.

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

Spritesmith — создание спрайтов картинок. Еще один плагин для сборки спрайтов, только в данном случае из иконок Png. Также использую его частенько, т.к. не всегда иконки в макете бывают в формате svg.

Rimraf — очистка папки dist. Бывает, что приходится очищать время от времени папку продакшена dist, т.к. в нем могут скопиться неиспользуемые файлы. Например, вы переименовали файл стилей в другое название, таким образом у вас в dist будут две копии — старая и новая.

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

Конечно я буду еще писать на тему Gulp, т.к. сам постоянно развиваюсь и стараюсь делать свои проекты как можно проще и быстрее. Обязательно поделюсь своей сборкой в Github.

Жду ваши комментарии ниже. Подписывайтесь на мой канал в телеграм. До встречи в следующих статьях!

Как использовать Gulp окружение?

Открыть командную строку (путь должен указывать на корневую папку проекта) и ввести gulp (обычный режим):

gulp

После ввода этой команды запустится задача по умолчанию, т.е. «default». Эта задача в свою очередь запустит серию других задач: «build», «webserver» и «watch».

Задача «build» выполнит сборку проекта для продакшена (т.е. она запустит «clean:build», «html:build», «css:build», «js:build», «fonts:build» и «image:build»). Эти задачи поместят в папку «assets/build» результирующие файлы проекта.

Задача «webserver» предназначена для запуска локального веб-сервера с «живой перезагрузкой» страниц в браузере. С помощью него можно очень просто посмотреть проект и выполнить его тестирование.

Задача «watch» используется для отслеживания изменения исходных файлов в папке «assets/src» и выполнение если это призошло различных задач. Другими словами, она позволяет автоматически запускать необходимые задачи и поддерживать результирующие файлы (содержимое папки «assets/build») в актуальном состоянии.

Запуск gulp:

Кроме этого можно выполнять выборочную (самостоятельную) сборку той или иной части проекта.

Например, для сборки только CSS части сайта достаточно ввести команду:

gulp css:build

Список других задач:

gulp clean:build // для очистки каталога "assets/build"
gulp html:build // для сборки HTML файлов
gulp js:build // для сборки JS файлов
gulp fonts:build // для сборки шрифтов
gulp image:build // для сборки изображения

Flags

gulp has very few flags to know about. All other flags are for tasks to use if needed.

Some flags only work with gulp 4 and will be ignored when invoked against gulp 3.

Flag	Short Flag	Description
—help	-h	Show this help.
—version	-v	Print the global and local gulp versions.
—require		Will require a module before running the gulpfile. This is useful for transpilers but also has other applications.
—gulpfile	-f	Manually set path of gulpfile. Useful if you have multiple gulpfiles. This will set the CWD to the gulpfile directory as well.
—cwd		Manually set the CWD. The search for the gulpfile, as well as the relativity of all requires (including the `—require` flag) will be from here.
—verify		Will verify plugins referenced in project’s package.json against the plugins blacklist.
—tasks	-T	Print the task dependency tree for the loaded gulpfile.
—tasks-simple		Print a plaintext list of tasks for the loaded gulpfile.
—tasks-json		Print the task dependency tree, in JSON format, for the loaded gulpfile. The argument is optional, and if given writes the JSON to the path.
—tasks-depth		Specify the depth of the task dependency tree to print. This flag can be used with —tasks or —tasks-json. (This flag was named —depth before but is deprecated.)
—compact-tasks		Reduce the output of task dependency tree by printing only top tasks and their child tasks. This flag can be used with —tasks or —tasks-json.
—sort-tasks		Will sort top tasks of task dependency tree. This flag can be used with —tasks.
—color		Will force gulp and gulp plugins to display colors, even when no color support is detected.
—no-color		Will force gulp and gulp plugins to not display colors, even when color support is detected.
—silent	-S	Suppress all gulp logging.
—continue		Continue execution of tasks upon failure.
—series		Run tasks given on the CLI in series (the default is parallel).
—log-level	-L	Set the loglevel. -L for least verbose and -LLLL for most verbose. -LLL is default.

Gulpfile.js

После установки Gulp нужно в корневой директории проекта
(в моём случае — heiheiru)
создать файл gulpfile.js
в который мы будем записывать инструкции для Gulp.

Первым делом запишем туда

После того как файл gulpfile.js создан
можно запустить Gulp

gulp

Результатом будет похожее сообщение

Using gulpfile ~\Desktop\Sites\heihei\gulpfile.js
Task never defined: default
To list available tasks, try running: gulp —tasks

Gulp жалуется на то, что не определно задание по умолчанию — default task

Нужно его определить

vi gulpfile.js

gulp

default запустится но теперь Gulp пожалуется на непонятное закрытие.

Using gulpfile ~\Desktop\Sites\heihei\gulpfile.js
Starting ‘default’…
Gulp is running!
The following tasks did not complete: default
Did you forget to signal async completion?

Эту ошибку можно устранить несколькими способами. Подробности
. Я пользуюсь следующим:

gulp

Custom Metadata

When listing tasks with the command, gulp-cli displays some custom metadata as defined upon task functions. Currently supported properties:

task.description — String of the description to display.

function clean() { ... }
clean.description = 'Cleans up generated files.';

task.flags — Object with key/value pairs being flag/description to display.

function build() { ... }
build.flags = {
  '--prod': 'Builds in production mode.'
};

Example Usage:

function build() { ... }
build.description = 'Build entire project.';
build.flags = {
  '--prod': 'Builds in production mode (minification, etc).'
};
// gulp 3.x
gulp.task('build', build);
// gulp 4.x
gulp.task(build);

Создание страницы

Создайте файл в :



    
        Привет, мир!

Загрузка …

Теперь измените , чтобы обновить страницу:

import { sayHello } from "./greet";

function showHello(divName: string, name: string) {
    const elt = document.getElementById(divName);
    elt.innerText = sayHello(name);
}

showHello("greeting", "TypeScript");

При вызове вызывается , которая изменяет текст параграфа.
Теперь замените код в на следующий:

var gulp = require("gulp");
var browserify = require("browserify");
var source = require('vinyl-source-stream');
var tsify = require("tsify");
var paths = {
    pages: ['src/*.html']
};

gulp.task("copy-html", function () {
    return gulp.src(paths.pages)
        .pipe(gulp.dest("dist"));
});

gulp.task("default", , function () {
    return browserify({
        basedir: '.',
        debug: true,
        entries: ['src/main.ts'],
        cache: {},
        packageCache: {}
    })
    .plugin(tsify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest("dist"));
});

Здесь создается задача , которая затем добавляется как зависимость для .
Это значит, что при каждом запуске сначала будет вызываться .
Кроме того, задача была изменена так, что вместо gulp-typescript теперь вызывается Browserify с плагином tsify.
К счастью, оба эти вызова позволяют передать один и тот же объект параметров для компилятора TypeScript.

После вызова мы используем (наш псевдоним для vinyl-source-stream), чтобы дать получаемой сборке имя .

Протестируйте страницу, запустив и открыв в браузере страницу .
На ней должен быть текст «Привет от TypeScript».

Обратите внимание, что мы указали для Browserify.
Это заставляет tsify генерировать карты кода внутри создаваемого файла сборки.
Карты кода позволяют отлаживать в браузере не упакованный JavaScript-код, а исходный TypeScript.
Можно проверить, работают ли карты кода, открыв в браузере отладчик и установив точку останова в .
При обновлении страницы эта точка останова должна спровоцировать паузу, и браузер позволит отлаживать

Watchify, Babel, и Uglify

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

Watchify запускает gulp и держит его запущенным, выполняя инкрементальную компиляцию при сохранении какого-либо файла.
Это позволяет автоматизировать в браузере цикл «редактирование» — «сохранение» — «обновление».
Babel представляет собой очень гибкий компилятор, превращающий ES2015 и выше в ES5 и ES3.
Это позволяет применять к коду обширные и настраиваемые трансформации, которые не поддерживаются TypeScript.
Uglify минимизирует код, чтобы он загружался быстрее.

Ошибки

SKIPPING OPTIONAL DEPENDENCY: fsevents

Ошибка при установке gulp. Вы выполняете

$ npm install gulp —save-dev

А на выходе

npm WARN saveError ENOENT: no such file or directory, open ‘C:\Users\ao\Desktop\Sites\heihei\package.json’
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open ‘C:\Users\ao\Desktop\Sites\heihei\package.json’
npm WARN heihei No description
npm WARN heihei No repository field.
npm WARN heihei No README data
npm WARN heihei No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {«os»:»darwin»,»arch»:»any»} (current: {«os»:»win32″,»arch»:»x64″})

+ [email protected]

added 314 packages from 217 contributors and audited 6490 packages in 30.037s

found 0 vulnerabilities

Скорее всего Вы не инициализировали npm. Нужно выполнить

npm init

Ввести нужные данные (либо просто нажимать Enter), после чего создастся файл package.json и можно будет вернуться к установке gulp

Unhandled ‘error’ event

events.js:174
throw er; // Unhandled ‘error’ event
^
CssSyntaxError: postcss-simple-vars: C:\Users\ao\Desktop\Sites\travel-site\app\assets\styles\modules\_large-hero.css:5:2: Undefined variable $aMadeUpVariable2

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

Unexpected identifier

Если Вы запустили Gulp

gulp

И получили что-то похожее

SyntaxError: Unexpected identifier
      at Module._compile (internal/modules/cjs/loader.js:723:23)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
      at Module.load (internal/modules/cjs/loader.js:653:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
      at Function.Module._load (internal/modules/cjs/loader.js:585:3)
      at Module.require (internal/modules/cjs/loader.js:692:17)
      at require (internal/modules/cjs/helpers.js:25:18)
      at execute (C:\Users\ao\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18)
      at Liftoff.handleArguments (C:\Users\ao\AppData\Roaming\npm\node_modules\gulp-cli\index.js:201:24)
      at Liftoff.execute (C:\Users\ao\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\liftoff\index.js:201:12)

Скорее всего Вы пытаетесь использовать синтаксис ES2015+ и не установили babel или он работает но с ошибкой.

Здесь два выхода — разобраться и настроить либо перейти к старому синтаксису с require

5

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {«os»:»darwin»,»arch»:»any»} (current: {«os»:»win32″,»arch»:»x64″})

Организация файлов

Чтобы не создавать каши из файлов и папок организуем всё правильно с самого начала.

Корневая папка носит называние проекта. В моё случае heihei или heiheiru

В этой папке мы инициализируем GIT и npm.

npm создаст папку
node_modules и файлы package.json , package-lock.json.

Для GIT мы сами рано или поздно создадим файл gitignore

Так как мы будем пользоваться Gulp появится и файл gulpfile.js

С ростом числа заданий, которые будет выполнять Gulp нам станет неудобно хранить их все в одном
файле.

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

Чтобы хранить эти файлы нам будет нужна папка, назовём её gulp и создадим в корневой. Внутри неё создадим
подпапку tasks

Всё, что относится непосредственно к сайту положим в папку heiheiru/app

index.html положим в корень app а
.css файлы, картинки и скрипты мы положим в папки heiheiru/app/assets/styles
heiheiru/app/assets/images , heiheiru/app/assets/scripts

Так будет выглядить дерево папок в редакоторе Sublime

Gulp — что это такое и зачем он нужен

Gulp — это инструмент, позволяющий ускорить процесс web-разработки. Gulp автоматически выполняет все самые необходимые часто используемые задачи.

Возможности Gulp:

Автоматическая перезагрузка страницы при сохранении кода
Использование препроцессоров для CSS (например, Sass), для JavaScript (например, CoffeeScript), для HTML (например, Pug)
Минификация CSS, JavaScript, HTML (уменьшение размера кода путём удаления ненужных символов и пробелов)
Соединение файлов в один (например, из пяти CSS файлов сделать один файл CSS)
Создание, удаление и переименование файлов и папок проекта
Автоматическое создание вендорных префиксов (-webkit, -moz, -o, -ms), чтобы старые версии браузеров поддерживали все css-свойства
Оптимизация изображений
И многое другое.

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

Двигаемся дальше. Теперь создайте папку проекта в удобном месте вашего компьютера. Назовем ее, например, gproject.

Перейдем в папку проекта и запустим консоль команд для данного каталога. Наиболее быстрый вариант сделать это зажать клавишу «Shift» и удерживая ее щелкнуть правой кнопкой мыши на пустой области окна каталога. Откроется контекстное меню, в котором выбираем «Открываем окно PowerShell здесь«. Данный пункт может называться и по другому — «Открыть окно команд«.

Запускаем инициализацию проекта командой:

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

package-name: вводим название проекта маленькими буквами
version: оставляем по умолчанию — 1.0.0
description: вводим описание проекта, например, My first gulp project.
entry point: (index.js), test command:, git repository:, keywords: — данные шаги оставляем по умолчанию, жмем Enter и переходим к следующему шагу
author: впишите имя автора, я ввел Zaur Magomedov
license: оставляем по умолчанию
Is this ok? — вводим «yes» и жмем Enter поле чего в папке нашего проекта появится файл package.json.

Файл package.json содержит в себе информацию о проекте + информацию об установленных пакетах (плагинов). Это своего рода файл манифеста. Теперь давайте установим Gulp локально в папку нашего проекта. Для этого пишем следующую команду:

флаг —save-dev как раз говорит установщику установить gulp локально в папку нашего проекта.

При установке gulp название пакета и его версия автоматически пропишутся в файле package.json. Вообще такой подход позволяет сохранять файл package.json со всеми установленными пакетами (зависимости), а при разворачивании нового проекта достаточно скопировать данный файл и запустить команду установки в консоли проекта — и все пакеты в проект установятся автоматически. Сейчас может вам будет не совсем понятно, но дальше я уверен вы поймете.

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

Давайте откроем файл package.json реактором кода и взглянем на его содержимое.

Мы видим всю ту информацию, которую вводили при инициализации проекта + ниже в блоке «devDependencies» указаны установленные зависимости и их версии. В данном случае это gulp версии 3.9.1. Как я и говорил установилась локально именно та версия, что стоит глобально.

Use latest JavaScript version in your gulpfile

Most new versions of node support most features that Babel provides, except the / syntax. When only that syntax is desired, rename to , install the module, and skip the Babel portion below.

Node already supports a lot of ES2015+ features, but to avoid compatibility problems we suggest to install Babel and rename your to .

npm install --save-dev @babel/register @babel/core @babel/preset-env

Then create a .babelrc file with the preset configuration.

{"presets""@babel/preset-env"}

And here’s the same sample from above written in ES2015+.

importgulpfrom'gulp';importlessfrom'gulp-less';importbabelfrom'gulp-babel';importconcatfrom'gulp-concat';importuglifyfrom'gulp-uglify';importrenamefrom'gulp-rename';importcleanCSSfrom'gulp-clean-css';importdelfrom'del';constpaths={  styles{    src'src/styles/**/*.less',    dest'assets/styles/'},  scripts{    src'src/scripts/**/*.js',    dest'assets/scripts/'}};exportconstclean=()=>del('assets');exportfunctionstyles(){returngulp.src(paths.styles.src).pipe(less()).pipe(cleanCSS()).pipe(rename({      basename'main',      suffix'.min'})).pipe(gulp.dest(paths.styles.dest));}exportfunctionscripts(){returngulp.src(paths.scripts.src,{ sourcemapstrue}).pipe(babel()).pipe(uglify()).pipe(concat('main.min.js')).pipe(gulp.dest(paths.scripts.dest));}functionwatchFiles(){gulp.watch(paths.scripts.src, scripts);gulp.watch(paths.styles.src, styles);}export{watchFilesaswatch};constbuild=gulp.series(clean,gulp.parallel(styles, scripts));exportdefaultbuild;