How To Protect Your Code While Using Gulp
Tags: security, javascript, gulp
Published: 2021-12-20 10:00:24

---
title: How To Protect Your Code While Using Gulp
published: true
description: In this post, we'll show you how to protect your code with Jscrambler while using Gulp. 
tags: security, javascript, gulp
canonical_url: https://blog.jscrambler.com/protect-your-code-while-using-gulp/
cover_image: https://blog.jscrambler.com/content/images/2021/11/jscrambler-blog-protect-your-code-while-using-gulp.jpg
---

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](https://gulpjs.com/) 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](https://gulpjs.com/docs/en/getting-started/creating-tasks).

## 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:

```bash
npm init
```

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

```bash
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](http://expressjs.com/en/starter/hello-world.html):

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

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:

```bash
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):

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

exports.default = defaultTask
```

Now, let’s run the Node app with:

```bash
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](https://jscrambler.com/signup?utm_source=dev.to&utm_medium=referral&utm_campaign=protect-gulp) yet, be sure to do so before moving forward.**

Log into the [Jscrambler Web App](https://app.jscrambler.com/dashboard?utm_source=blog.jscrambler.com&utm_medium=referral&utm_campaign=protect-gulp). 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](https://blog.jscrambler.com/jscrambler-101-first-use/#finetuning).

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

<center><img src="https://blog.jscrambler.com/content/images/2021/02/jscrambler-app-download-JSON-4.gif" alt="Download Jscrambler JSON"></center>

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

Let’s install the [Jscrambler Gulp plugin](https://github.com/jscrambler/jscrambler/tree/master/packages/gulp-jscrambler):

```bash
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:

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

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:

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

We're now ready to run our build:

```bash
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](https://2020.stateofjs.com/en-US/technologies/build-tools/) 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](https://jscrambler.com/contact?utm_source=dev.to&utm_medium=referral&utm_campaign=protect-gulp) if you have any questions!