Gulp Integration

ByteHide Shield provides a dedicated Gulp plugin that allows you to seamlessly protect your JavaScript code during the build process. This guide explains how to install and configure the Shield Gulp plugin.

Installation

Install the ByteHide Shield Gulp plugin from npm:

npm install --save-dev @bytehide/gulp-shield

Or with yarn:

yarn add --dev @bytehide/gulp-shield

Basic Setup

Add the Shield plugin to your Gulp workflow:

const gulp = require('gulp');
const { bytehideShieldPlugin } = require('@bytehide/gulp-shield');

gulp.task('obfuscate', () => {
  return gulp.src('./src/**/*.js')
    .pipe(bytehideShieldPlugin({
      projectToken: 'your-project-token' // Required: Get this from your ByteHide account
    }))
    .pipe(gulp.dest('./dist'));
});

With this minimal configuration, Shield will apply default protections to your JavaScript files.

Configuration Options

The Gulp plugin accepts the following options:

Advanced Configuration

For more advanced use cases, you can provide additional Shield protection options:

const gulp = require('gulp');
const { bytehideShieldPlugin } = require('@bytehide/gulp-shield');

gulp.task('obfuscate', () => {
  return gulp.src('./src/**/*.js')
    .pipe(bytehideShieldPlugin({
      projectToken: 'your-project-token',
      replace: false,
      obfuscatedExtension: '.obf',
      exclude: ['vendor/**/*.js', 'polyfills.js'],
      config: {
        controlFlowFlattening: true,
        debugProtection: true,
        devtoolsBlocking: true,
        stringArray: true,
        stringArrayEncoding: ['base64'],
        selfDefending: true
      }
    }))
    .pipe(gulp.dest('./dist'));
});

Environment-Specific Configuration

You can apply different protection settings based on the environment:

const gulp = require('gulp');
const { bytehideShieldPlugin } = require('@bytehide/gulp-shield');

const isProd = process.env.NODE_ENV === 'production';

gulp.task('obfuscate', () => {
  return gulp.src('./src/**/*.js')
    .pipe(bytehideShieldPlugin({
      projectToken: process.env.BYTEHIDE_PROJECT_TOKEN,
      replace: isProd, // Only replace files in production
      config: {
        // More aggressive settings for production
        controlFlowFlattening: isProd,
        debugProtection: isProd,
        devtoolsBlocking: isProd,
        // Basic protection for all environments
        stringArray: true,
        identifierNamesGenerator: 'hexadecimal'
      }
    }))
    .pipe(gulp.dest('./dist'));
});

Integration with Other Gulp Plugins

When using Shield with other Gulp plugins, pay attention to the order of plugins:

const gulp = require('gulp');
const { bytehideShieldPlugin } = require('@bytehide/gulp-shield');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');

gulp.task('build', () => {
  return gulp.src('./src/**/*.js')
    // Initialize sourcemaps
    .pipe(sourcemaps.init())
    
    // Concatenate files
    .pipe(concat('bundle.js'))
    
    // Minify with uglify
    .pipe(uglify())
    
    // Apply Shield protections (after other transformations)
    .pipe(bytehideShieldPlugin({
      projectToken: 'your-project-token',
      config: {
        controlFlowFlattening: true,
        stringArray: true
      }
    }))
    
    // Write sourcemaps
    .pipe(sourcemaps.write('./'))
    
    // Output to dist folder
    .pipe(gulp.dest('./dist'));
});

Features

The Gulp plugin for ByteHide Shield provides the following features:

• Obfuscates JavaScript files: Protect your code from reverse engineering
• Adds watermark to protected files: Add watermarks to identify protected code
• Prevents double obfuscation: Smart detection to avoid re-obfuscating already protected files
• Supports custom configurations: Fine-tune protection settings to your needs

Complete Example

Here's a complete example of a Gulp configuration with Shield:

const gulp = require('gulp');
const { bytehideShieldPlugin } = require('@bytehide/gulp-shield');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const del = require('del');

// Clean dist directory
gulp.task('clean', () => {
  return del('./dist');
});

// Process JavaScript
gulp.task('js', () => {
  const isProd = process.env.NODE_ENV === 'production';
  
  return gulp.src('./src/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(concat('bundle.js'))
    .pipe(uglify())
    .pipe(bytehideShieldPlugin({
      projectToken: process.env.BYTEHIDE_PROJECT_TOKEN,
      replace: true,
      exclude: ['vendor/**/*.js'],
      config: {
        controlFlowFlattening: isProd,
        debugProtection: isProd,
        devtoolsBlocking: isProd,
        stringArray: true,
        stringArrayEncoding: isProd ? ['base64'] : [],
        selfDefending: isProd,
        identifierNamesGenerator: 'hexadecimal',
        reservedNames: [
          '^jQuery$', '^\\$',
          '^addEventListener$', '^removeEventListener$'
        ]
      }
    }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./dist'));
});

// Watch files
gulp.task('watch', () => {
  gulp.watch('./src/**/*.js', gulp.series('js'));
});

// Default task
gulp.task('default', gulp.series('clean', 'js', 'watch'));

// Build task
gulp.task('build', gulp.series('clean', 'js'));

Troubleshooting

Common Issues

Error: Invalid Token

If you see an error about an invalid token:

• Make sure the project token is valid and correctly typed
• Verify your token has permissions for JavaScript projects

File Size Issues

If your protected files become too large:

• Consider using lighter protection settings
• Disable heavy transformations like controlFlowFlattening or deadCodeInjection
• Apply protection only to essential files

Next Steps

• Get your project token
• Learn about protection options
• Configure exclusions and reserved items