Минификация и обфускация проекта с помощью Gulp

другие уроки, мануалы, советы по Construct 2

Сообщение Минификация и обфускация проекта с помощью Gulp
» 17 май 2018, 14:49

Всем привет.

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

Начнем с установки Node.js
Он требуется для работы Gulp

Скачать его можно бесплатно с официального сайта Node.js
После скачивания устанавливаем его куда вам удобно (установка простая и не требует каких либо дополнительных настроек)

Установили. Теперь приступаем непосредственно к установке Gulp.
Вообще Gulp очень мощный и функциональный инструмент. Минификация js файлов лишь одна маленькая функция из большого набора.

Установить Gulp можно как глобально (будет установлен в систему и доступен хоть откуда), так и локально для каждого проекта по отдельности (будет доступен только в папке с проектом). Мы будем устанавливать его локально.
Чтобы не прописывать установку каждого необходимого пакета выкладываю файл с настройками.
gulpfile.zip
(27.42 КБ) Скачиваний: 17


Файл с проектом должен иметь вид (папка node_modules появится позже при установке Gulp)
Изображение

В папке src лежит наш экспортированный из С2 проект.
Рядом кидаем файлы настроек из архива выше и открываем командную строку в этой папке (с зажатым Shift клик правой кнопкой в пустое место папки и открыть командную строку. В Win10 вместо командной строки по умолчанию установлен PowerShell. Тоже подходит)
Изображение

В открывшейся командной строке (PowerShell) пишем
Код: Выделить всё
npm install

Изображение
Эта команда производит установку Gulp локально для нашего проекта по файлу настроек, который мы ранее закинули.

После завершения установки не закрываем командную строку и закидываем в src экспортированный из С2 проект если ранее еще этого не сделали.
Возвращаемся опять к командной строке и пишем
Код: Выделить всё
gulp build

Изображение
В настройках проекта указано, что файл jQuery мы объединяем в один с c2runtime. Поэтому по завершении не забываем удалить из index.html строку с загрузкой jQuery.
В командной строке мы видим, что он минифицировал скрипты, а так же оптимизировал изображения (делает это выборочно и на качестве изображений это не сказывается).
В итоге появляется папка web в которой и лежит наш минифицированный проект.

Всё. Можете выгружать на хостинг и тестировать.
P.S. В файл настроек Gulp не включена папка со звуками. Если будут вопросы как ее добавить пишите
Последний раз редактировалось DeX 17 май 2018, 22:05, всего редактировалось 1 раз.
По всем вопросам писать в скайп DeXVinogradov
Аватара пользователя
DeX

Игродел
Сообщений: 2456
Я тут с 13 дек 2014
Откуда: Краснодар
Skype: DeXVinogradov
Репутация 502 [ ? ]

Сообщение Минификация и обфускация проекта с помощью Gulp
» 17 май 2018, 15:31

Только для web?
Если после экспорта с NW.JS распаковать, минифицировать, запаковать?
Изображение
Аватара пользователя

Участник
Сообщений: 860
Я тут с 31 май 2017
Репутация 183 [ ? ]

Сообщение Минификация и обфускация проекта с помощью Gulp
» 17 май 2018, 15:57

repkino писал(а):Если после экспорта с NW.JS

Не пробовал так делать, но думаю тоже будет работать.
По всем вопросам писать в скайп DeXVinogradov
Аватара пользователя
DeX

Игродел
Сообщений: 2456
Я тут с 13 дек 2014
Откуда: Краснодар
Skype: DeXVinogradov
Репутация 502 [ ? ]



Вернуться в Другие уроки по Construct 2

Сейчас эту тему просматривают

Зарегистрированные пользователи: нет зарегистрированных пользователей

Наверх