The folder structure is very important but also one of the most discussed in the internet I think ;). Mine looks like the following:
Whereas “app” contains my Angular 2 application and the other files and folders speak for theirselves.
The sense of this blogpost is now to get a build with webpack AND gulp combined to have the same cross platform functionality we are used from a “gulp-only” build.
In the past the problem with Angular 2 and gulp was the bundling and the minification of the application. Gulp works with streams and files whereas angular 2 is build with related components which are imported and then used. We can not concat every file anymore in the correct order and minify it to distribute an application.
The solution (or at least one of them) is webpack. Webpack is slightly different from gulp, where it can resolve the dependencies and use your “import” and “require” statements to see when which file is used and has to be included.
Now I want to show you the files which can make this whole thing possible. See the “gulptasks”-folder to divide the responsibilities of building each target platform.
This file is plain simple:
First we tell webpack that we have three entry-points (three files to start) in our application which are “app”, “vendor” and “polyfills”
Then we tell webpack which files to look for…
…how the js-files should be named on output…
… and in the modules part we define how to treat the several file types.
The plugins section then sticks together every operation we do with the files. So this is normal webpack as you can see in several repositories as well.
But how to deal with gulp? Well…there is an npm package…;) It’s called webpack-stream and allows us to do tasks like this:
So if we trigger this gulp-tasks our application is build an bundles and so on and will be copied to the specified folder with gulp.
After we did this we can go ahead like normal.
Because we also have a dev-server from webpack in the repository above we will have a index.html fully loaded to execute everything. The gulp-html-comments make sure that everything in between those comments gets overwritten when we inject sources with gulp.
The complete tasks for the web solution are:
After we run this the index.html looks quite the same:
But this time the sources got injected. See the dist folder here:
With this approach we can go ahead as usual when building electron or cordova-things with gulp.
See the required steps fo r e.g. a cordova-build here:
the only difference here is that we have to copy assets for electron into the temp folder. The whole procedure before is like we know it from the web solution.