Disclosure: This post focuses on , a JavaScript protection product to which the author is affiliated (as CTO). Jscrambler As the web development ecosystem grew, with frameworks and libraries becoming the , 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. status quo Gulp Overview is a platform-agnostic toolkit that can be used to automate time-consuming tasks in a development workflow. Gulp All tasks performed by Gulp are configured inside a file named and these can be written in vanilla JS, with Node modules, and also using a series of Gulp APIs such as , , and . Gulpfile.js src() dest() series() parallel() When the command is run, each Gulp task is triggered as an asynchronous JavaScript function. For more information about Gulp tasks, please see the . gulp 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 file in our project's root folder with the following code, provided in the : 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}`) }) 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 file in our project’s root folder containing the following boilerplate configuration (which will be used only in the next section): Gulpfile.js 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 . 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 tab but, in our case, let's go ahead to the tab and pick the template. If you need help with these steps, please refer to our . Jscrambler Web App Fine-Tuning Templates Obfuscation 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 file we downloaded earlier: , , , and the array. jscrambler.json accessKey secretKey applicationId params Our final file should look like this: 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); }); If we take a closer look at this file, we'll see that specified the path to the files that Jscrambler will use. At the bottom of the file, places the protected version on the folder. You can change these to match your project's requirements. src .pipe(gulp.dest('dist/')) dist/ 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 file to build our app using Gulp: package.json "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 file, we will see that it has been obfuscated with Jscrambler. /dist/app.js 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 survey, it is the second most popular build tool for JS, used by 65% of respondents. 2020 State of JavaScript As we saw in this tutorial, , 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. integrating Jscrambler with Gulp is a straightforward process This all comes with premium support, so be sure to if you have any questions! contact us Previously published at https://blog.jscrambler.com/protect-your-code-while-using-gulp/
