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

Обзор глотка

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

Все задачи, выполняемые Gulp, настраиваются внутри файла с именем Gulpfile.js, и их можно написать на ванильном JS с модулями Node, а также с использованием ряда API-интерфейсов Gulp, таких как src(), dest(), series() и parallel().

При запуске команды gulp каждая задача Gulp запускается как асинхронная функция JavaScript. Для получения дополнительной информации о задачах Gulp см. официальную документацию.

Настройка простого приложения, использующего Gulp

Для целей этого руководства мы создадим очень простое приложение, созданное с помощью Node.js и Express. Во-первых, давайте запустим проект:

npm init

При появлении запроса выберите те значения по умолчанию, которые вы предпочитаете. Как только это будет сделано, установите Express:

npm install express --save

Затем создадим в корневой папке нашего проекта файл app.js со следующим кодом, предоставленным на Экспресс-сайте:

const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
  res.send('Hello World!')
})
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Это приложение запускает сервер и прослушивает порт 3000 для соединений. Приложение отвечает «Hello World!» для запросов к корневому URL-адресу (/) или маршруту.

Теперь давайте установим Gulp как зависимость от разработчиков:

npm install gulp --save-dev

А затем давайте создадим файл Gulpfile.js в корневой папке нашего проекта, содержащий следующую шаблонную конфигурацию (которая будет использоваться только в следующем разделе):

function defaultTask(cb) {
  // place code for your default task here
  cb();
}
exports.default = defaultTask

Теперь давайте запустим приложение Node с помощью:

node app.js

Мы увидим сообщение «Hello World» на localhost:3000.

Как настроить Jscrambler

Начнем с получения готового к использованию файла с предполагаемой конфигурацией Jscrambler.

Если вы еще не создали учетную запись Jscrambler, обязательно сделайте это, прежде чем двигаться дальше.

Войдите в Jscrambler Web App. Оказавшись там, создайте новое приложение. Теперь пришло время выбрать преобразования Jscrambler, которые мы хотим использовать. Мы можем выбрать их один за другим на вкладке Точная настройка, но в нашем случае давайте перейдем на вкладку Шаблоны и выберем Обфускация шаблон. Если вам нужна помощь в выполнении этих шагов, обратитесь к нашему руководству.

Теперь нам осталось скачать JSON-файл со всей этой конфигурацией, который будет использоваться только для быстрого получения необходимых настроек.

Теперь, когда у вас есть файл с необходимой конфигурацией, вы можете интегрировать Jscrambler с Gulp.

Установим плагин Jscrambler Gulp:

npm install gulp-jscrambler --save-dev

Теперь нам нужно добавить конфигурации, необходимые для работы Jscrambler с Gulp. Для этого нам понадобятся некоторые части загруженного ранее файла jscrambler.json: accessKey, secretKey, applicationId и массив params.

Наш окончательный файл gulpfile.js должен выглядеть так:

var gulp = require('gulp');
var jscrambler = require('gulp-jscrambler');
gulp.task('default', function (done) {
  gulp
    .src('app.js')
    .pipe(jscrambler({
      keys: {
        accessKey: 'YOUR_ACCESS_KEY',
        secretKey: 'YOUR_SECRET_KEY'
      },
      applicationId: 'YOUR_APPLICATION_ID',
      params: [
        {
            "name": "objectPropertiesSparsing"
          },
          {
            "name": "variableMasking"
          },
          {
            "name": "whitespaceRemoval"
          },
          {
            "name": "identifiersRenaming",
            "options": {
              "mode": "SAFEST"
            }
          },
          {
            "name": "dotToBracketNotation"
          },
          {
            "name": "stringConcealing"
          },
          {
            "name": "functionReordering"
          },
          {
            "options": {
              "freq": 1,
              "features": [
                "opaqueFunctions"
              ]
            },
            "name": "functionOutlining"
          },
          {
            "name": "propertyKeysObfuscation",
            "options": {
              "encoding": [
                "hexadecimal"
              ]
            }
          },
          {
            "name": "regexObfuscation"
          },
          {
            "name": "booleanToAnything"
          }
        ]
    }))
    .pipe(gulp.dest('dist/'))
    .on('end', done);
});

Если мы внимательно посмотрим на этот файл, то увидим, что src указывает путь к файлам, которые будет использовать Jscrambler. Внизу файла .pipe(gulp.dest('dist/')) помещает защищенную версию в папку dist/. Вы можете изменить их в соответствии с требованиями вашего проекта.

Теперь осталось убедиться, что наш процесс сборки использует Gulp. В нашем случае мы должны убедиться, что в нашем файле package.json есть скрипт для сборки нашего приложения с помощью Gulp:

"scripts": {
    "build": "gulp"
  },

Теперь мы готовы запустить нашу сборку:

npm run build

Вот и все! Теперь у нас есть защищенные файлы сборки. Если мы проверим наш файл /dist/app.js, мы увидим, что он был запутан с помощью Jscrambler.

Заключение

Использование средства запуска задач, такого как Gulp, стало обязательным для веб-разработчиков. Несмотря на то, что в наши дни такие инструменты сборки, как webpack, пользуются большей популярностью, Gulp по-прежнему широко используется — согласно опросу 2020 State of JavaScript, это второй по популярности инструмент сборки для JS, которым пользуются 65% респондентов.

Как мы видели в этом руководстве, интеграция Jscrambler с Gulp — это простой процесс благодаря плагину Jscrambler Gulp. Благодаря этой интеграции вы можете автоматически защищать исходный код в каждой новой сборке и гарантировать, что вы минимизируете подверженность вашего приложения злоупотреблениям, обратной разработке, нарушениям лицензирования и подделке кода.

Все это идет с премиальной поддержкой, поэтому обязательно свяжитесь с нами, если у вас есть какие-либо вопросы!

Первоначально опубликовано в Блоге Jscrambler