angular-phonecat-webpack-gulp travis-ci Bower gulp npm

Ways to split the Angular Phonecat App using webpack (and gulp)

3 years after

Extend version of the Angular Phonecat tutorial with added steps to include webpack and gulp

I created this fork because I didn't know how to split up an Angular project in a nice way. I used RequireJS before but it always felt too complicated in a way.

I tried a cleaner approach in 3 steps:

  1. Just splitting files
  2. Adding webpack to combine splitted files
  3. Utilizing gulp to create a uglified build-file

I'm still not sure if this is the way to go, but so far it's working out. If you discover this and you have an opinion or feedback on this I'm more than happy to listen to it. Open an issue or send me a tweet.

Step-13 Split version

Changes

Only the controllers.js file is split into two seperated controller files.

Step-14 Webpack version (simple)

Setup

npm install -g webpack (for adding webpack)

Development workflow

webpack ./app/js/main.js ./app/js/bundle/bundle.js --progress --colors -d --watch

This creates the bundle.js and the sourcemap-file. The sourcemap file gets created because of the debug option (-d).

Every change of the JavaScript files will be watched and Webpack rebuilds the build-file automatically.

Step-15 Webpack version using gulp to create build-file

index.html is modified to use the build-file from the dist folder!

Setup

npm install -g webpack (for adding webpack)

Development workflow (not needed in this step, cause this only adds gulp to show how a simple build works; see next section)

webpack ./app/js/main.js ./app/js/bundle/bundle.js --progress --colors -d --watch

This creates the bundle.js and the sourcemap-file. The sourcemap file gets created because of the debug option (-d).

Every change of the JavaScript files will be watched and Webpack rebuilds the build-file automatically.

Build

Create uglified file by using: gulp

Related Repositories

awesome-react

awesome-react

A collection of awesome React libraries, resources and shiny things. ...

awesome-react

awesome-react

A collection of awesome React libraries, resources and shiny things. ...

awesome-react

awesome-react

A collection of awesome React libraries, resources and shiny things. ...

angular-learning

angular-learning

AngularJs Learning stuffs ( Docs & Resources & Examples ) ...

awesome-react

awesome-react

A collection of awesome things regarding React ecosystem. ...


Top Contributors

IgorMinar petebacondarwin jeffbcross NgDashboard vojtajina btford juliemr michaelneale tbosch mhevery elnur alexeygolev amfarrell cburgdorf danielzen DjebbZ dmitriz doron2402 jokomo ifedotov iszak jksdua softweave rolaveric wislon louislarry lfender6445 marcenuc segeda philspitler

Releases

-   step-15 zip tar
-   step-14 zip tar
-   step-13 zip tar
-   step-12 zip tar
-   step-11 zip tar
-   step-10 zip tar
-   step-9 zip tar
-   step-8 zip tar
-   step-7 zip tar
-   step-6 zip tar
-   step-5 zip tar
-   step-4 zip tar
-   step-3 zip tar
-   step-2 zip tar
-   step-1 zip tar
-   step-0 zip tar