Ionic / bower / cordova - ignore files for build

Question

My project structure is the following:

MyApp
  - hooks
  - platforms
     - android
     - ios
  - www
    - js / css / templates..
    - lib (including all bowe         


        

Answer 1

This is an improvement over this answer. I've applied it to my own project.

1. Move the bower_components folder to the project root, outside the www folder.

2. Rename index.html to _index.html. We will later make sure that Gulp automatically generates index.html.

3. Install gulp and gulp-useref.

4. Edit your _index.html so that it looks something like this:

5. Configure your gulp watch task to build new index.html file in the www folder with the concatenated files.

var entrypoint = './www/_index.html';

gulp.task('watch', function() {
  gulp.watch(entrypoint, ['concat-js-and-css']);
});

gulp.task('concat-js-and-css', function () {
    return gulp.src(entrypoint)
        .pipe(useref()) 
        .pipe(rename(function (path) {
          // rename _index.html to index.html
          if (path.basename == '_index' && path.extname == '.html') {
            path.basename = "index";
          }
        }))
        .pipe(gulp.dest('./www'))
});

gulp.task('build', ['concat-js-and-css']);

When that task runs, your index.html file will contain just this:

6. Edit your ionic.project file so that it looks like the following. This will make sure that gulp watch is run before ionic serve.

{
  "watchPatterns": [
    "www/_index.html",
  ],
  "gulpStartupTasks": [
    "watch"
  ]
}