Custom Ionic Scripts - copy assets, inject ids, replace strings

Ionic Framework ionic-v3
1

I have some very complex build scripts in a gulpjs file.

I want to migrate those gulp tasks to npm scripts and use them in my new ionic2 project, but I’m very confused in what I should do. Besides the current ionic scripts, a need to copy assets from different locations, inject strings and ids to the source code and edit the config.xml cordova file.

Can someone point me a good tutorial about custom build scripts?
I think the docs are lacking some additional info… or I’m not able to follow the steps described in the docs.

Thank you.

2

Hello again, I’m providing some extra info, so you can help me…

In my old angular 1 project I had a gulp file with custom tasks.
For each different project/client a had a specific gulp task. In that task a config object is defined with the assets path for that project, his id, name and other specific properties. That object is used in all other gulp sequence tasks to copy assets from project folders, rename some files, change source code values, etc.

To build a project I simply would do:

gulp build-projectx to build project for client X;

gulp build-projecty to build the project for client Y.

Some source code from my gulpfile.js:

//ARRAY OF GULP TASKS TO COMPILE JS, LESS AND PARSE DATA
var gulp            = require('gulp'),
    seq             = require('run-sequence'),
    less            = require('gulp-less'),
    replace         = require('gulp-replace'),
    gulpSubstituter = require('gulp-substituter');
   
var tasks = ["cordovaconfigedit", 'html', 'images', 'less', 'js'];
var project = {};

//PROJECT Y task
gulp.task('projecty', function (done)
{
    project.bundle = "com.app.projecty";
    project.title = "Project Y";
    project.version = "1.7.9";
    project.displayName = "Project Y";
    project.senderID = "123456999";
    project.googlemapsapi = "yyyyyyyyyyyyyyyyyyyy";
	project.sharedassets = "shared/assets";
	project.assets = "projecty/assets";

    seq('clean', tasks, done);
});

//PROJECT X task
gulp.task('projectx', function (done)
{
    project.bundle = "com.app.projectx";
    project.title = "Project X";
    project.version = "1.8.0";
    project.name = "projectx";
    project.senderID = "123456789";
    project.googlemapsapi = "xxxxxxxxxxxxxxxxxxxx";
	project.sharedassets = "shared/assets";
	project.assets = "projectx/assets";

    seq('clean', tasks, done);
});

gulp.task('images', function ()
{
    var stream = gulp.src([project.sharedassets, project.assets]);
    return stream.pipe(gulp.dest(path.join(config.dest, 'assets')));
});

gulp.task('cordovaconfigedit', function ()
{
    //REPLACES THE SOURCE CONFIG.XML FILE TO THE FINAL CONFIG.XML FILE 
    //USED BY CORDOVA, WITH THE CORRECT REPLACED VALUES FROM THE PROJECT OBJECT
    return gulp.src('configsrc.xml')
    .pipe(gulpSubstituter(
    {
        bundle: project.bundle,
        version: project.version,
        versioncode: project.version,
        title: project.title,
        pathproject: project.name,
    }))
    .pipe(rename({ basename: 'config' }))
    .pipe(gulp.dest(''));
});

Now I want to create something similar in my new ionic 2/3 project.

For example, I want to do something like:

ionic serve projectX or ionic cordova run project

And set a object filled with specific property values for the project X and then read some of that values along with the other npm scripts.

How can I extend or override the default ionic tasks and add the things I need to do?

Thank you.

3 Likes
3

Have you found a solution? My usecase is getting/setting the version number from config.xml and also adding some Build Number to service-workers.js

4

Yes, I found one. Don’t know if it’s the best but it’s working and it’s fully custom.

Im my packaged.json a have my own script:

"scripts": {
    "myproject": "node buildscripts/npm.build.js",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },

Then in the cmd I run my script:

npm run myproject

Then my script runs and I do all the reads/copys/saves and other manipulations I need. For example to change the config.xml I use xml2js. I edit the values and then save again the file.

At the end of my script I run the ionic serve and all my project was shaped to that specific client.

shelljs.exec('ionic serve ' + prodflag);

At the current stage my script is very complex and have a full step by step “CLI” build