Minify gulp js: Simplify Front-end JS and CSS Optimization With Gulp

Минимизация CSS JS с помощью Gulp 4

При работе с большим веб-приложением или веб-сайтом вы могли использовать несколько файлов CSS и JavaScript, таких как jQuery, bootstrap и файлы, специфичные для вашего приложения. Как показано в приведенном ниже шаблоне, мы используем эти файлы CSS библиотеки в разделе заголовка страницы, и мы также импортируем CSS для конкретного приложения в раздел заголовка. Это определенно вызовет проблемы с производительностью в вашем приложении, потому что браузер пытается загрузить каждый файл CSS отдельно, и это влияет на общее время загрузки страницы.

Gulp JSHTML-файл с несколькими сценариями

Чтобы решить эту проблему с производительностью, нам необходимо оптимизировать ресурсы CSS и JS. Мы можем использовать несколько библиотек сборки, таких как Gulp, Webpack. В этом разделе мы будем использовать для оптимизации наших ресурсов CSS/JS. Чтобы начать работу с Gulp, вам необходимо установить Node JS версии 10+ на вашем локальном компьютере. Вам также необходимо ознакомиться с npm и пакетами.

Давайте установим gulp с помощью npm.

 npm install -g gulp 

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

 c:/users/gulp-starter 

Теперь инициализируйте проект узла в этой папке с помощью команды npm init . Вы увидите, что файл package.json сгенерирован. Теперь вы готовы установить пакеты gulp.

 c:/users/gulp-starter> npm init 

Наша первая задача — объединить и минимизировать все файлы CSS в каталоге /src . Давайте установим gulp , gulp-concat и gulp-clean-css . Вы увидите все эти пакеты в разделе devDependencies внутри package. json .

• gulp-concat: Объединить указанный поток файлов в исходном каталоге.
• gulp-clean-css: Минимизировать указанный файл в исходном каталоге.
• gulp-uglify : Сжатые ресурсы JS в исходном каталоге.

 npm install gulp gulp-concat gulp-minify-css gulp-uglify --save-dev 92.6.1" 
 } 

Давайте добавим gulpfile.js на корневой уровень проекта gulp-starter . Используйте приведенный ниже код для чтения и объединения всех файлов CSS.

скрипт gulp для минимизации CSS

Мы определили сеанс -start и build-css задачи в файле gulpfile.js. Вы можете использовать любые осмысленные имена для этих задач. Но убедитесь, что в файле gulp присутствует задача по умолчанию , которая запускается при использовании команды gulp. Теперь пришло время создавать наши JS-библиотеки и JS-файлы приложений. Добавить 9Задача 0003 build-vendor-js после задачи build-css . Скрипт

gulp для объединения JS

Предполагая, что все библиотечные файлы, такие как jquery, jquery ui , уже минимизированы, поэтому мы не будем использовать здесь функцию uglify JS . Теперь мы можем создать задачу для конкретных файлов javascript приложения. Скрипт gulp

для искажения JS

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

Установите пакет del из npm, который работает с асинхронными файловыми операциями.

 npm install del --save-dev 

Мы будем использовать этот пакет del для очистки папки сборки.

Очистить папку сборки

Далее мы также добавим поведение наблюдения в наши файлы сборки. Всякий раз, когда вы вносите какие-либо изменения в файлы CSS или JS в каталоге . /src , gulp будет следить за изменениями файла и следить за тем, чтобы последние файлы были доступны в каталоге ./build .

В npm доступен один интересный пакет, например browserSync . Это помогает вам обслуживать ресурсы сборки на рабочем сервере, а также перезагружать сервер после просмотра изменений вашего файла.

скрипт gulp для просмотра файлов

Вы успешно настроили процесс сборки gulp для оптимизации активов CSS/JS для повышения производительности приложения. Ваше окончательное приложение index.html должно выглядеть примерно так.

index.html с уменьшенным CSS, JS

Вы можете найти git-репозиторий для этого проекта здесь.

gulp-minify-inline — Анализ работоспособности пакетов npm

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

Риск безопасности и лицензии для важных версий

Все версии

9014. 040 | 9|

Версия				Уязвимости	Риск лицензии
01/2019	Популярный	C H M L	H M L
1. 0.0	|	06/2017		C H M L	05/2016		C H M L	H M L
0. 1.1	|	07/2015		C H M L	H M L
0. 0.1	|	08/2014		C H M L	H M L

License

Массачусетский технологический институт

Политика безопасности

Нет

Ваш проект подвержен уязвимостям?

Сканируйте свои проекты на наличие уязвимостей. Быстро исправить с помощью автоматизированного исправления. Начните работу со Snyk бесплатно.

Начните бесплатно

Еженедельные загрузки (4187)

Скачать тренд

Звезды GitHub

28

Вилки

5

Авторы

6

---

Популярность прямого использования

---

Пакет npm gulp-minify-inline получает в общей сложности 4187 загрузок в неделю. Таким образом, мы забили Уровень популярности gulp-minify-inline должен быть Small.

На основе статистики проекта из репозитория GitHub для npm gulp-minify-inline мы обнаружили, что он снялся 28 раз.

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

Частота фиксации

Нет последних коммитов

Открытые задачи

0

Открытый PR

0

Последняя версия

4 года назад

Последняя фиксация

4 года назад

---

Дальнейший анализ состояния обслуживания gulp-minify-inline на основе каденция выпущенных версий npm, активность репозитория, и другие точки данных определили, что его обслуживание Неактивный.