How to configure RollUp (or Ionic Copy Script) to clean whole www directory on each build?

After 14 hard working days we finally upgraded to RC0/RC1 and it is building without white screen on Android (iOS giving still white screen). So it is possible and thanks to this community it should be possible to do this for everyone, if we achieved it with our 100 page app with dynamic navigation and so forth.

So back to topic:

How to configure RollUp to clean whole www directory on each build?

I found: https://github.com/driftyco/ionic-app-scripts#custom-config-files

But maybe somebody did this before?

I added "clean:before": "build" to package.json but it’s not working.


  "scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "clean:before": "build",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },  

I have a work around to do rm all www before build. Just change the scripts to:

  "scripts": {
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "serve:before": "watch",
    "clean:before": "rm -rf www; build",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "build",
    "run:before": "build"
  },

Quite the hack given that clean should delete www by default according to ionic docs.

Unfortunately your solution is not working for me. See in screenshot ionicons.hjjbjbjbjhjhjbjjjhwoff2 should have been deleted according to the rm -rf command.

> ionic-app-scripts build
[05:36:06]  ionic-app-scripts 0.0.36
[05:36:06]  build prod started ...
[05:36:06]  clean started ...
[05:36:06]  clean finished in 5 ms
[05:36:06]  copy started ...
[05:36:06]  ngc started ...
[05:36:06]  copy finished in 184 ms
[05:36:06]  lint started ...
[05:36:09]  lint finished in 3.09 s
[05:36:32]  ngc finished in 25.98 s
[05:36:32]  bundle started ...
[05:36:45]  bundle finished in 13.24 s
[05:36:45]  uglifyjs started ...
[05:36:45]  sass started ...
[05:36:47]  sass finished in 1.73 s
[05:36:47]  cleancss started ...
[05:36:59]  uglifyjs finished in 13.97 s
[05:37:38]  cleancss finished in 50.75 s
[05:37:38]  build prod finished in 91.73 s

Anybody can help with such seemingly trivial task?

What if you changed the npm “build” script to this:

“scripts”: {

"build": "rm -rf www; ionic-app-scripts build",

"watch": "ionic-app-scripts watch",
"serve:before": "watch",
"emulate:before": "build",
"deploy:before": "build",
"build:before": "build",
"run:before": "build"

},

And so whenever you run this:

npm run build

it removes www/ and rebuilds your project

As for “ion-app-scripts clean” it seems to only clean the www/build/ directory according to the clean.js script that that command executes.

node_modules/@ionic/app-scripts/dist/clean.js:

fs_extra_1.emptyDirSync(context.buildDir);

1 Like

; unfortunately works only on non-windows Workstations.

I dont understand:

ionic-app-scripts clean www

should work no?

In ionic app scripts folder there is only cleancss config and none for provided clean.js. This seems to be missing.

I discovered clean doesn’t clean all of www after realizing that the index.html in the www directory did not match the index.html in my src directory. Good times.

I prefer @andresa88’s answer, but if you replace the buildDir context with wwwDir in clean.js it will clean the whole www directory.

`//fs_extra_1.emptyDirSync(context.buildDir);`
`fs_extra_1.emptyDirSync(context.wwwDir);`
1 Like

Thanks a lot. How did you configure your package.json to execute task clean before buiild?

we are having massive problems to achieve the following which worked absolutely flawlessly with gulp before RC0. I opened bug at ionic app scripts which was closed after 5 seconds and tbh I am really tired of this trivial problem. My entire team is suffering and our builds are failing.

This is how it worked with browserify and gulp and it is not how it is working today

1) CLEAN OUT ASSETS FOLDER FROM WWW
2) COPY OVER ASSETS FOLDER FROM SRC TO WWW
3) BUILD

This simple trivial task which worked since Angular 1, 4 years ago, the Ionic team mangaged to break. CONGRATULATIONS!

  "build, ": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "clean": "ionic-app-scripts clean",
    "copy": "ionic-app-scripts copy",
    "serve:before": "watch",
    "emulate:before": "build",
    "deploy:before": "build",
    "build:before": "copy build",
    "run:before": "build",
    "copy:before": "clean"

Nothing is working. Old files in www folder do not get overriden by new files. Please somebody fix this crap.

I don’t need to add anything in the package.json to get the entire www directory wiped and rebuilt by changing clean.js. App-scripts@0.0.36 runs clean for both prod and dev builds automatically. The issue is that it appears hard-coded to only wipe the build folder. Changing the fs_extra_1.emptyDirSync(context.buildDir) arg to context.wwwDir wipes the whole www directory for me using both npm run build and ionic serve.

This also works like a charm:

"scripts": {
    "build": "rm -rf www && ionic-app-scripts build",
    "serve": "rm -rf www && ionic-app-scripts serve"
    // [...]
}