Gulpを使用しながらコードを保護する方法

Web開発生態系が成長し、フレームワークやライブラリが現状になったので、ビルドツールはすぐにdev toolchainの重要な部分となった.Gulpは、最も広く採用されたタスクランナーの一つであり、プラグインの使用を通じて、特に自動化し、devのワークフローを強化する柔軟性を提供します.

ガップ概要
Gulp 開発ワークフローで時間を要するタスクを自動化するために使用できるプラットフォームの不注意なツールキットです.
Gulpによって実行されるすべてのタスクは、ファイル名の中で構成されますGulpfile.js そして、これらはノードモジュールで、バニラJSで書かれることもできますsrc() , dest() , series() and parallel() .
時gulp コマンドが実行されると、各Gulpタスクは非同期のJavaScript関数として起動されます.Gulpタスクの詳細についてはofficial documentation .

Gulpを使用して簡単なアプリを設定する
このチュートリアルの目的のために、ノードで構築された非常にシンプルなアプリケーションを作成します.JSエクスプレス.まず、プロジェクトを始めましょう

npm init

プロンプトが表示されたら、デフォルトのいずれかを選択します.完了したら、Expressをインストールします.

npm install express --save

では、作成しましょうapp.js 次のコードを使用してプロジェクトのルートフォルダにファイルを表示しますExpress website :

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を聞きます.アプリは“こんにちは世界!”ルートURL (/)またはルートへのリクエストに対して.
Gulpをdev依存関係にインストールしましょう.

npm install gulp --save-dev

を作成しましょうGulpfile.js プロジェクトのルートフォルダーのファイルには、次のように設定されています.

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

exports.default = defaultTask

では、ノードアプリケーションを実行しましょう.

node app.js

「こんにちは世界」メッセージを見るlocalhost:3000 .

Jスクランブラの設定方法
私たちの意図したJScrblerの設定でファイルを準備しましょう.
まだ作成していない場合は、必ず進む前にしてください.
ログインするJscrambler Web App . 一度、新しいアプリを作成します.今、我々は使用するJスクランブラ変換を選択する時間です.我々は、微調整タブで1つずつを選択することができますが、我々の場合では、テンプレートのタブに移動し、難読テンプレートを選択しましょう.あなたがこれらのステップで援助を必要とするならば、我々を参照してくださいguide .
今、我々は単に必要に応じてすぐに必要な設定を取得するために使用されるすべてのこの設定でJSONファイルをダウンロードする必要があります.

必要な設定ファイルを持っているので、JScratchをGulpで統合できます.
インストールしましょうJscrambler Gulp plugin :

npm install gulp-jscrambler --save-dev

さて、Grumpで動作するJスクランブラを得るために必要な設定を追加する必要があります.これを行うには、いくつかの部分が必要です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 Jスクランブラが使用するファイルへのパスを指定します.ファイルの下部に.pipe(gulp.dest('dist/')) 保護されたバージョンをdist/ フォルダ.これらのプロジェクトの要件に合わせて変更できます.
さて、すべての残っていることは、ビルドプロセスがGulpを使用していることを確認することです.我々のケースでは、我々のスクリプトがあることを確認しなければならないpackage.json Gulpを使用して我々のアプリを構築するファイル

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

ビルドを実行する準備ができました.

npm run build

それだ!今、私たちは保護されたビルドファイルを持っています.我々がチェックするならば/dist/app.js ファイルは、それがJスクランブラで難読されていることがわかります.

結論
Gulpのようなタスクランナーを使用してWeb開発者のための必需品となっている.Webpackのような構築ツールは、最近、より多くの牽引を見ていましたが、Gulpは2020 State of JavaScript 調査は、それは回答者の65 %で使用されるJSのための2番目に人気のビルドツールです.
このチュートリアルで見られるように、JScrambler GulpプラグインのおかげでGulpを使用したJスクランブラの統合は簡単なプロセスです.この統合を使用すると、自動的に各新しいビルドのソースコードを保護することができますし、お客様のアプリケーションの露出に悪用、リバースエンジニアリング、ライセンス違反、およびコードの改ざんを最小限に抑えていることを確認します.
これはすべてのプレミアムサポートが付属していますので、質問がある場合は必ず!