Hook to remove code parts in release build

Ionic Framework ionic-v3
1

Hi,

I have some code parts which are only intended to be present during development (e.g. some debug options and a level creator).
I want to remove them completely from release builds.

I think I can just write a nodejs cordova hook for it, but I did not find any proper explanation of the different hook types, so I’d like to know at which hook type I should add this script.
I assume there is some step which copies the source to a location from where it will be build and I should add my hook after this step. Is this maybe after_prepare or before_compile? Is there any documentation about the build steps with relation to when hooks will be executed?

Does anybody have working hook like that already he could share? My idea is to mark this code parts with some comment like

/// %%$$DEBUG_ONLY$$%%
.... code
/// %%$$END_DEBUG_ONLY$$%%

Which I could filter out using some regex. Additionally I would add a list of files which shall be removed.

Would be nice if somebody could give me a hint about the correct hook and maybe has a similar hook already, otherwise I will share mine later.

Greetings

2

I like to use gulp and that gulp plugin https://github.com/crissdev/gulp-remove-code

It makes the job to remove code in html or ts files pretty easily

P.S.: of course I use that task before building my app

3

Hi,
thanks for the hint. I just noticed that cordova hooks won’t help here since its too late. Ionic already is compiled and minified then.

How do you add gulp tasks which run when using ionic build? I only found some documentation regarding serve command.
Also, on which folder can you run it without deleting the original files and code parts?

4

I’d avoid adding gulp to your build for this. Instead use the build tool Ionic already uses, Webpack. You can then check for Ionic’s prod flag. Then based on whether it’s prod or not, you could choose to inject your debugger and level editor or not.

I wrote up a little tutorial on environment variables, and while this doesn’t exactly match your use case, it’s basically the same. I choose what variables to inject based on environment, you should just tweak it to only inject your level editor or debugger. The key part is knowing how to read whether your in prod or not and react to it.

5

Even you would not have to add gulp to your build (only local use, --save-dev) I think that @rlouie is right, it’s a better path to follow to use environment variables than removing code

6

Not sure if I understand you right, but your approach does not rely on really removing code and files, it just uses different implementations based on some environment variable, right?

However, I really want to remove the code parts and files out of production app…

7

If you really really want to remove code before doig ionic build … then you could try the gulp path

install gulp and the plugin (note: the --save-dev here is important):

 npm install gulp --save-dev
 npm install gulp-remove-code --save-dev

create a gulpfile.js in the root of your project. contains of this file gonna be something like

var gulp = require('gulp');

var removeCode = require('gulp-remove-code');

gulp.task('your-command-name', function () {
   
        gulp.src('./src/pages/yourfile.ts')
    .pipe(removeCode({ production: true }))
    .pipe(gulp.dest('./src/pages/'));

     gulp.src('./src/pages/yourfile.html')
    .pipe(removeCode({ production: true }))
    .pipe(gulp.dest('./src/pages/yourfile/'));

 });

and then to run it do something like

 gulp your-command-name

and see plugin documentation to see how you could comment your ts and html files to let the plugin knows how to remove code

final note: this batch really gonna remove code, so be sure to have save your code before doing it … I know sound like a silly notice, but better think twice about it before deleting parts of the code :wink: