Уважаемый читатель, сразу хочу тебя предупредить - я php-программист, а с javascript работаю по мере необходимости. Это значит, что большую часть кода и инструментов я буду изучать вместе с вами. Итак, поехали.
Меня зовут Константин. Сейчас я занимаюсь разработкой небольшого юридического сайта, в котором используется визуальный редактор TinyMCE. В процессе работы с ним у меня возникли проблемы - так я и заинтересовался разработкой плагинов для исправления ошибок, а вместе с тем и их написанием.
Отсутствие нормальной документации по подготовке сжатых JS-файлов для плагинов (а именно они подключаются в визуальном редакторе) привело меня к официальному репозиторию TinyMCE, а вместе с ним и к изучению кода, а также новых инструментов по обработке - grunt, terser. Итак, знакомьтесь.
Минификация плагинов для TinyMCE
Автор данной статьи предполагает, что вы уже знакомы с менеджером пакетов npm и имеет представление для чего нужен package.json. Если у вас их нет - то можно установить с node, а вместе с ним и npm c официального сайта. Итак, поехали.
Grunt - это инструмент для сборки javascript-проектов.
Terser - это инструмент для обработки и минификации (сжатия) Javascript ES6+.
grunt-terser - это плагин для Grunt, позволяющий запускать функционал Terser.
Установка
Grunt и Terser устанавливаются как пакеты NPM (Node Package Manager).
npm install -g grunt --save-dev
npm install terser --save-dev
npm install grunt-terser
Настройка
Добавляем свойство "scripts, которое будет запускать команду grunt при сборке.
package.json:
{
"name": "@wolq/learn-grunt-terser",
"description": "Example of minify JS files",
"author": {
"name" : "Konstantin Eliseev K0r5hun",
"email" : "dev@wolq.net",
"url" : "https://korw.ru/"
},
"scripts": {
"build": "grunt"
},
"devDependencies": {
"grunt": "^1.4.1",
"grunt-terser": "^2.0.0",
"terser": "^5.10.0"
}
}
Создадим небольшой пример javascript-файла, который мы хотим сжать. Назовём его plugin.js и сохраним его в папке src.
src/plugin.js
(function () {
'use strict';
console.log('test');
}());
Теперь создаём файл с настройками Grunt. Можете просто скопировать его.
Gruntfile.js
module.exports = function (grunt) {
// Настройка проекта
grunt.initConfig({
terser: {
options: {},
example: {
files: [
{ src: 'src/plugin.js', dest: 'src/plugin.min.js' },
]
}
}
});
// Загрузка плагина, который обеспечивает выполнение команды сжатия
grunt.loadNpmTasks('grunt-terser');
// Задача(и), запускаемые по умолчанию
grunt.registerTask('default', ['terser']);
};
В начале мы описываем настройки проекта, где указали название плагина terser. По сути это означает, что мы хотим воспользоваться его функциональностью, а именно минимизировать файлы.
В параметрах options можно задавать какие-то настройки библиотеки terser, которые мы хотим применить ко всем целям.
Цель (в нашем примере example) - любое уникальное имя. Содержит список файлов, которые будут сжиматься, где src - путь к файлу, который предстоит сжать, а dest - путь, куда будет сохранён сжатый файл. Цель также может содержать свой список индивидуальных настроек.
Запуск
Теперь можно запустить сборку проекта и файлы будут сжаты.
npm run build
Результат
Вот так выглядит теперь код сгенерированного файла plugin.min.js
Ссылка на исходный код:
https://github.com/K0r5hun/lessons-001-learn-grunt-terser
#grunt #terser #javascript #npm