How To Protect Your Code While Using Gulp

As the web development ecosystem grew, with frameworks and libraries becoming the status quo, build tools quickly became an essential part of the dev toolchain. Gulp has been one of the most widely adopted task runners, as it provides lots of flexibility to automate and enhance dev workflows, especially through the use of plugins.

Gulp Overview

Gulp is a platform-agnostic toolkit that can be used to automate time-consuming tasks in a development workflow.

All tasks performed by Gulp are configured inside a file named Gulpfile.js and these can be written in vanilla JS, with Node modules, and also using a series of Gulp APIs such as src(), dest(), series() and parallel().

When the gulp command is run, each Gulp task is triggered as an asynchronous JavaScript function. For more information about Gulp tasks, please see the official documentation.

Setting Up a Simple App Which Uses Gulp

For the purposes of this tutorial, we will create a very simple application built with Node.js and Express. First, let's kick off a project:

npm init

When prompted, choose whichever defaults you prefer. Once that’s done, install Express:

npm install express --save

Then, let's create an app.js file in our project's root folder with the following code, provided in the 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}`)
})

This app starts a server and listens on port 3000 for connections. The app responds with “Hello World!” for requests to the root URL (/) or route.

Now, let’s install Gulp as a dev dependency:

npm install gulp --save-dev

And then let’s create a Gulpfile.js file in our project’s root folder containing the following boilerplate configuration (which will be used only in the next section):

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

exports.default = defaultTask

Now, let’s run the Node app with:

node app.js

We will see a "Hello World" message on localhost:3000.

How to Configure Jscrambler

Let's begin by getting a ready-to-use file with our intended Jscrambler configuration.

If you haven't created a Jscrambler account yet, be sure to do so before moving forward.

Log into the Jscrambler Web App. Once there, create a new app. Now, it's time to pick the Jscrambler transformations that we want to use. We can pick them one-by-one in the Fine-Tuning tab but, in our case, let's go ahead to the Templates tab and pick the Obfuscation template. If you need help with these steps, please refer to our guide.

Now, we simply have to download a JSON file with all this configuration, which will be used only for quickly getting the required settings.

Now that you have the file with the needed configuration, you can integrate Jscrambler with Gulp.

Let’s install the Jscrambler Gulp plugin:

npm install gulp-jscrambler --save-dev

Now, we need to add the configurations we need to get Jscrambler working with Gulp. To do this, we will need some parts of the jscrambler.json file we downloaded earlier: accessKey, secretKey, applicationId, and the params array.

Our final gulpfile.js file should look like this:

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);
});

If we take a closer look at this file, we'll see that src specified the path to the files that Jscrambler will use. At the bottom of the file, .pipe(gulp.dest('dist/')) places the protected version on the dist/ folder. You can change these to match your project's requirements.

Now, all that's left is to make sure that our build process is using Gulp. In our case, we must make sure that there's a script in our package.json file to build our app using Gulp:

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

We're now ready to run our build:

npm run build

That's it! Now we have our protected build files. If we check our /dist/app.js file, we will see that it has been obfuscated with Jscrambler.

Conclusion

Using a task runner like Gulp has become a must for web developers. Even though build tools like webpack have been seeing more traction these days, Gulp is still widely used—according to the 2020 State of JavaScript survey, it is the second most popular build tool for JS, used by 65% of respondents.

As we saw in this tutorial, integrating Jscrambler with Gulp is a straightforward process, thanks to the Jscrambler Gulp plugin. With this integration, you can automatically protect the source code in each new build and ensure that you are minimizing your app’s exposure to abuse, reverse engineering, licensing violations, and code tampering.

This all comes with premium support, so be sure to contact us if you have any questions!