Как собрать js в один файл gulp

Обновлено: 07.07.2024

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

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

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

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

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

Установка

Рассмотрим установку с помощью npm. Подразумевается, что nodejs Вы уже установили.

О том как установить npm читайте в моей статье Установка npm

О том как установить более старую версию Gulp - Установка архивной версии Gulp

$ npm install gulp-cli --global

C:\Users\ao\AppData\Roaming\npm\gulp -> C:\Users\ao\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js + gulp-cli@2.2.0 updated 7 packages in 7.386s

Проверить версию gulp

CLI version: 2.2.0 Local version: Unknown

Про установку не последней, а какой-то определённой версии Gulp читайте здесь

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

$ npm install gulp --save-dev

Добавив ключ --save-dev мы указали, что теперь сохраняем в ветку dev, так как Gulp это пакет, которым мы будем пользоваться в разработке, но на хостинг выкладывать его не будем, так как на сайте он ничего делать не будет. Вся работа Gulp будет на стороне разработчика.

Посмотрим, как изменился наш файл package.json

Подробнее о том, зачем этот файл нужне читайте в статье npm

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

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

Старые версии npm создавали всегда одну папку и размещали все зависимости туда.

Новые версии npm сохраняют зависимости в родительскую папку node_modules.

Установка более старой версии

Иногда бывает нужно установить не текущую, а более ранню версию Gulp.

Особенно это касается версии 3.9.1 , которая сильно отличается от 4 и выше.

npm install gulp@3.9.1 --save-dev

npm install gulp-cli@1.2.1 --save-dev

Список версий Gulp находится здесь , Gulp-cli - здесь . Нужно открыть вкладку Versions

Если Вы хотите сперва удалить Вашу версию Gulp а уже потом установить другую - сделать это можно командой uninstall

npm uninstall gulp

Gulpfile.js

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

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

Начиная с верси 4.0 можно пользоваться новым синтаксисом JavaScript (ES2015+)

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

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

[11:22:35] Using gulpfile

\Desktop\Sites\heihei\gulpfile.js [11:22:35] Task never defined: default [11:22:35] To list available tasks, try running: gulp --tasks

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

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

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

[11:31:44] Using gulpfile

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

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

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

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

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

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

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

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

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

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

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

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

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

Обработка файлов стилей

При разработке удобно пользоваться метаязыками, например, SASS.

Установим его с помощью npm

npm install gulp-sass --save-dev

Теперь можно объявить переменную sass и пользоваться этим препроцессором

const и let - были введены в JavaScript начиная с ES6 и для современного JavaScript являются более предпочтительным вариантом чем var

gulp-watch

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

Начнём с простого - делаем функцию, которая при каждом изменении файла index.html в папке app будет выводить предупреждение.

Как это выглядит в Gulp 4

Чтобы запустить мониторинг пишем

[20:12:19] Using gulpfile

Теперь вносим изменения в файл index.html и сохраняем

Как это выглядело в Gulp 3

Создадим папку /app/assets/styles/ , в которой будут файлы .css для разработки

Напишем функцию, которая будет собирать все файлы .css из этой папки, обрабатывать их с помощью sass и соединять в один файл /app/temp/styles/style.css

Мы уже писали такую функцию выше, просто немного изменим её.

Добавим мониторинг файлов CSS gulp.watch( "./app/assets/styles/**/*.css", style);

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

Зачем нужен SASS:

чтобы пользоваться css переменными. Создать переменную, которую потом вставлять в .css пропускать через sass compiler и когда вдруг везде нужно будет изменить значение этой переменной, например, на сайте изменится основной цвет, всё что нам нужно будет сделать - это поменять одну переменную в одном файле.

чтобы делать вложения в стилях (nested css)

чтобы использовать mixins

PostCSS

До этого Вы уже прочитали про препроцессор SASS, который наряду с LESS и Stylus является стандартом для многих проектов.

Я не пользуюсь ими, а предпочитаю более современный PostCSS, который имеет более модульную структуру, и соответственно более гибкий в настройке и быстрый

Подробнее про PostCSS Вы можете прочитать в статье PostCSS.

Советую разобраться с PostCSS и возвращаться в эту статью либо в одну из следующих, более продвинутых глав.

Я не стал размещать описание работы с PostCSS здесь, потому что его можно запускать не только с помощью Gulp

Видеоуроки Gulp

Видео много весят, поэтому я выделил для них отдельную страницу - Видеоуроки Gulp

Ошибки

SKIPPING OPTIONAL DEPENDENCY: fsevents

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

$ npm install gulp --save-dev

npm WARN heihei No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted (current: )

+ gulp@4.0.2
added 314 packages from 217 contributors and audited 6490 packages in 30.037s
found 0 vulnerabilities

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

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

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

Unexpected identifier

Если Вы запустили 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

Did you forget to signal async completion?

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

Эту ошибку можно устранить несколькими способами. Я пользуюсь самым простым - в таске использую не анонимную функцию а называю функцию, например cb (от слова callback), а в конце таска вызваю её без аргументов:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted (current: )

Это предупреждение о несовместимости пакета fsevents с Windows, как Вы можете убедиться здесь fsevents нужен для работы с iOS поэтому можно просто проигнорировать.

Что такое Node.JS?

Есть реализации для Windows, Mac OS и Linux.

В комплект входит менеджер пакетов NPM, с помощью которого можно устанавливать пакеты.

Что такое Gulp?

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

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

В этом примере с помощью Gulp мы сделаем следующее:

Автоматически оптимизируем изображения для веба;
Собираем один минифицированный файл стилей из предпроцессоров (SASS, SCSS);
Собираем один минифицированный файл со скриптами.

Как собирать front-end с помощью Gulp?

Чтобы понять, как все работает, разберем все по шагам.

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

Структуру можно посмотреть на скриншоте.

package.json

Из этого файла понятно следующее:

Файл можно отредактировать в обычном текстовом редакторе. Его также можно создать для нового проекта командой npm int .

Исходя из этого, Node.JS понимает, что для работы нам понадобятся:

Отлично! После этого нужно все это установить. Делается это из командной строки. Находясь в папке с проектом нужно выполнить команду:

Вся необходимая информация будет взята из package.json .

Установка Gulp и плагинов в директорию проекта

После всего этого волшебства появится служебная папка node_modules .

gulpfile.js

На выходе получим готовый к публикации в интернете шаблон.

Выполнение задачи watch

Задачи можно запускать отдельно. В итоге, в архиве в конце статьи вас ждет следующее:

Конечный вариант структуры проекта

В заключении

Есть огромное множество других полезных плагинов. Например, прекрасный шаблонизатор Jade, который в разы ускоряет написание html кода, кому-то может понадобится LESS и так далее.

Ярослав 20.05.2016 в 14:18

Спасибо за статью. но вот вопрос я не вижу index.html, а вопрос состоит в том, что при работе с index.html link href, script src, а после сборки имеем другие, гуглю битый час не могу найти решения, как вы решаете этот вопрос?

Дмитрий Ильичев 20.05.2016 в 18:42

Конкретно в этом примере все ресурсы собираются в public/css/style.css и public/js/min.js.

В index.html подключаются только эти два файла. А редактируются файлы из папки assets.

При каждом сохранении файлов в папке assets обновляются файлы public/css/style.css и public/js/min.js (при запущенной задаче watch), и таким образом мы всегда имеем актуальную версию верстки.

Александр 16.07.2016 в 10:18

Файл в конце статьи не скачивается! 🙁

Дмитрий Ильичев 16.07.2016 в 17:12

Проверили, вроде все в порядке, но на всякий случай отправил Вам файл в письме.

mbarev 18.08.2016 в 16:16

Огромное спасибо!
Ваша статья сэкономила мне пару часов времени!

Алексей 01.12.2016 в 00:58

Дмитрий Ильичев 01.12.2016 в 13:58

lalala 06.06.2017 в 20:12

А нельзя было сделать с html и обновлением браузера при обновлении любого файла?

Дмитрий Ильичев 08.06.2017 в 20:59

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

Для некоторых этот урок сейчас может оказаться сложным. Пройдите урок, если многое будет непонятно, просто пока продолжайте следующие уроки, к этому вернетесь потом. В следующих уроках будет разбор jQuery и Javascript, после которых gulpfile.js станет для вас намного проще.

Сейчас у вас есть такой файл gulpfile.js:

Его я сейчас и разберу подробно. Расскажу зачем он вообще нужен и что в нем находится.

Сразу обращу ваше внимание, что написан он на Javascript, поэтому его расширение .js. В gulpfile.js пишутся задачи для Gulp. Вот простой пример задачи:

В консоли Windows перейдите в папку проекта и напишите команду:

Результат будет примерно такой:

Среди строк есть Hello!. Задача gulp выполнилась.

Разберу код примера.

Здесь первая строка это не задача, это объявление переменной под названием gulp. Не хотелось бы вас путать тем, что повсюду встречается gulp — и инструмент этот называется Gulp, и переменная называется gulp, и дальше в этом примере вы можете еще пару раз увидеть gulp. Но везде пишут именно так, поэтому и мне придется так писать. Постараюсь всё подробно разобрать.

Итак, "let gulp" — это объявление переменной под названием gulp. Ниже в коде в строке "gulp.task" происходит обращение именно к этой переменной.

Вернусь к первой строке "let gulp = require('gulp')". Здесь после равно идет запрос к самому Gulp, который был установлен через файл package.json. Можете открыть package.json, там после "devDependencies" встречается gulp. Вот именно он и присваивается переменной через let gulp. Надеюсь со всеми gulp разобрались, если нет пишите в комментарии.

Написание задачи в gulp

Через синтаксис gulp.task создаются задачи для Gulp (task переводится "задача"). В данном примере создается задача под названием hello. А в функции указывается, что Gulp должен делать по этой задаче. В примере в функции написано, что нужно вывести в консоль (в консоль Windows) текст "Hello!".

Для выполнения этой задачи нужно писать в консоли Windows команду gulp hello. Это вы должны были уже сделать.

Напишу по-русски шаблон для обычной задачи gulp:

А шаблон команды в консоли Windows для выполнения задачи:

Писать задачи для gulp достаточно просто. Сперва нужно объявить необходимые переменные, а затем писать сами задачи. Перейду к разбору вашего файла gulpfile.js.

Разбор файла gulpfile.js

Я уже писал, что благодаря Gulp автоматически, автоматически группируются медиа-запросы. Еще добавлю, что SASS компилируется в CSS, сжимается CSS, происходит сборка всего проекта.

Для выполнения многих задач требуются плагины (дополнения) для Gulp. Они у вас уже установлены через package.json. Теперь их нужно просто подключить в gulpfile.js. Сперва для них нужно создать переменные, а потом добавить в задачи.

Посмотрите на ваш gulpfile.js, в самом верху идет объявление всех необходимых переменных. Обратите внимание, что let указывается только 1 раз, а потом все переменные перечисляются через запятую. Это синтаксис Javascript.

Среди переменных есть browserSync, которая будет отвечать за перезагрузку браузера, когда вы будете верстать и обновлять код вашей верстки. Переменная sass будет отвечать за компиляцию SASS в CSS. Остальные переменные:

prefixer — автоматически ставить нужные префиксы в CSS;
cssmin — сжимать CSS;
uglify — сжимать JS;
fileinclude — соединять все HTML-файлы в один. Также он соединяет JS-файлы;
gcmq — объединять медиа-запросы.

Разберу первую задачу. Вот ее код:

Эта задача отвечает за сборку HTML-файлов. Называться она будет html_build. В самой задаче первая строка — gulp.src('src/*.html'). Она означает, что нужно взять все файлы с расширением .html из папки src.

Следующие несколько строк в задаче начинаются с pipe. Pipe переводится как "труба". Здесь первая труба — это .pipe(fileinclude()). Эта строка означает, что нужно все взятые html-файлы из папки src прогнать через fileinclude. А я уже писал, что fileinclude соединяет все HTML-файлы в один. То есть в этом pipe объединяются все HTML-файлы.

Следующий pipe — это .pipe(gulp.dest('build/')). Здесь результирующий HTML-файл после объединения кладется в папку build.

Ну, и последний здесь pipe — это .pipe(browserSync.stream()). Это обновление браузера.

То есть всю задачу можно описать так: взять все HTML-файлы из папки src, собрать их в один файл, положить этот файл в папку build и обновить браузер. Всё.

Последняя функция done() означает, что задача выполнена.

Перепишу задачу так:

И здесь видно, что сама задача представлена одной строкой. Сперва идет команда .src, потом первый .pipe, потом второй .pipe и третий .pipe. Команды идут одна за другой через точку.

Но удобнее переносить каждую команду на новую строку, так код удобнее писать.

Следующие две задачи css_build, js_build и fonts_build написаны аналогично, просто у них свои пути до папок, и некоторые свои команды в pipe.

Разберу задачу webServer. Она отвечает за перезагрузку браузера. Вот код задачи:

инициализирует сервер. Обновляться будет то, что находится в папке build.

Следующие строки gulp.watch смотрят за задачами html_build, css_build, js_build (watch переводится "смотреть"). Когда по этим задачам происходят изменения в html, css или js-файлах, Gulp перезагружает браузер.

Обратите внимание, что в функции watch путь до файла отличается, от того, что в задаче, например, для html_build. Дело в том, что задача html_build выполняется во время запуска gulp, и там нам нужны те HTML-файлы, которые находятся непосредственно в папке src. Пока это только файл index.html. А в watch нужно, чтобы отслеживались изменения HTML-файлов вообще во всех папках в папке src.

Ну, и самая последняя строка gulpfile.js:

Она объединяет все задачи. Задача default означает, что выполнять нужно только ее. А в строке gulp.series('. ') указано, что именно выполнять. В данном случае по дефолту нужно выполнять все перечисленные задачи.

Именно благодаря задаче default в консоли Windows можно писать просто gulp, а не gulp hello, как вы писали в начале урока.

Использование сборщика проектов Gulp значительно облегчает и ускоряет разработку веб-проектов.

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

Так же используя дополнительные модули Gulp, такие, как gulp-webp вы сможете конвертировать ваши .jpg/.jpg изображения в современный web формат .webp, что позволит ускорить загрузку ваших страниц.

Часть 1 – Установка Gulp

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

Далее запускаем установку через командную строку следующую команду:

Флаг --global устанавливает gulp для всей системы и вы можете использовать его в нескольких проектах.

Переходим к вашему проекту используя команду:

Далее вводим команду:

Так мы создадим файл package.json, этот файл содержит информацию о вашем проекте, зависимости, настройки модулей.

Устанавливаем зависимости gulp:

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

Часть 2 – Настройка Gulp

Создаем файл gulpfile.js

В этом файле мы описываем нужные нам задачи и прописываем все модули для дальнейшей работы.

Какие модули использует веб студия Atekla для разработки своих проектов:

gulp-autoprefixer
gulp-file-include
gulp-sass
gulp-uglify
gulp-htmlmin
gulp-webp
gulp-clone
browser-sync

За что отвечают модули?

Gulp-autoprefixer – собирает CSS файл с префиксами для различных браузеров, плюс добавляет правила для поддержки старых браузеров.

Gulp-file-include – позволяет подключать ваши html файлы как если бы вы работали с PHP

Gulp-sass – позволяет собирать CSS файлы если ваш проект написан с помощью SASS/SCSS

Gulp-uglify – минификация JS файлов

Gulp-htmlmin – минификация HTML файлов

Gulp-webp – конвертация JPG/PNG изображений в WEBP с настройкой качества изображения

Gulp-clone – позволяет сохранить исходное изображение JPG/PNG и перенести его в папку проекта для использования в браузерах без поддержки WEBP

Browser-sync – верстайте ваш проект без хостинга и использования MAMP.

Часть 3 - Создание файла gulpfile.js

Подключаем модули в файл gulpfile.js

Создаем пути для работы Gulp

Задача Webserver – создает локальный хостинг для верстки

Читайте также: