Gulp-Inject and Ionic

This post is part of the 30 day app challenge: I am building a mobile treasure hunt app using the Ionic Framework.

As your app starts to grow, you will be creating more controllers, services and stylesheets for your app. Every time you create a new file, you have to remember to manually insert this link into your index.html file. I keep forgetting about this last step and often wonder why my new service is not working. If you are in the same boat, read on. Gulp-inject allows us to automate this last step.

Gulp Inject: What it does

Whenever you create a new file or change a file, gulp watch will pick up on this change and call the gulp-inject task.

Gulp Inject Ionic

Gulp Inject Ionic

Get it setup for Ionic

This is how to get it setup for your ionic project.

1) npm install -g gulp
This installs gulp globally, which means you can use gulp with all your projects.

2) npm install —-save-dev gulp-inject
This adds gulp-inject as a dev dependency to your project. Dev-dependendies won’t be installed automatically when you run npm install, because it is not needed to run the project. However, anyone who wants to use the project for development needs to have dev-dependencies installed.

3) Add a new task in your gulp file: index
Next we are going to add a task to the gulp file, that will instruct gulp to inject any js and css files into the index.html file

In the gulp.js file add the following task:

gulp.js
var inject = require('gulp-inject');

gulp.task('default', ['sass', 'index']);

gulp.task('index', function(){
return gulp.src('./www/index.html')
.pipe(inject(gulp.src('./www/components/**/*.js', {read: false}), {relative: true}))
.pipe(inject(gulp.src('./www/components/**/*.css', {read: false}). {relative: true}))
.pipe(gulp.dest('./www'));
})

I also want to make sure that whenever a new file is added or changed this task gets run.

gulp.js
var paths = {
sass: ['./scss/**/*.scss'],
components: ['./www/components/**/*.js', './www/components/**/*.css']
};

gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.components, ['index']);
});

5) Add gulp watch task to Ionic Project


ionic.project
{
"name": "treasureHunt",
"app_id": "",
"gulpStartupTasks": ["sass", "index", "watch"]
}

This means that whenever you start up ionic on the command line using, ionic serve, the above gulp tasks will be run.

6) Add html comment to inject js and css files
Add the following lines into your index.html file to allow gulp-inject to insert the new links:

<html>
<head>
...
<!-- inject:js -->
<!-- endinject -->
...
<!-- inject:css -->
<!-- endinject -->
</html>

If you are looking for a different setup or want to read up more on how gulp inject works, the gulp-inject documentation covers a bit. To see what this setup looks like within an ionic app,

This setup took me about 10 minutes but is already paying dividends. It’s one less thing to worry about in the development cycle.

  • http://calendee.com Justin Noel

    One correction. Your `–save-dev` needs to be after gulp-inject, not before.

    `npm install gulp-inject –save-dev`

  • Geekoid

    Very useful. Thank you for sharing.