Aug 30, 2015 reading time 5 minutes

AngularJS With Gulp, Wiredep and Bower

With this blog post I want to show you how to use AngularJS with gulp, wiredep and bower to provide the files to an angular application.

I introduced Gulp in my AngularJSDemoApp on GitHub.

Check it out here.

AngularJS with gulp wiredep and bower

gulp.js

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var jscs = require('gulp-jscs');
var del = require('del');
var inject = require('gulp-inject');

var config = require('./gulp.config')();

gulp.task('vet', function () {
  return gulp
    .src(config.srcJSFiles)
    .pipe(jscs())
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish', { verbose: true }));
});

gulp.task('injectJsIntoIndex', ['vet'], function () {
  var wiredep = require('wiredep').stream;
  var options = config.getWiredepDefaultOptions();

  var target = gulp.src(config.targetIndexHtmlFile);
  var sources = gulp.src(config.srcJSFiles);

  return target
    .pipe(
      inject(sources, {
        addRootSlash: false,
      })
    )
    .pipe(wiredep(options))
    .pipe(gulp.dest(config.root));
});

The gulp task is checking via wiredep all dependencies and is injecting them into the index.html automatically. After this it is passing out the file into the destination.

gulp.config.js

The gulp-config is seperated:

module.exports = function () {
  var config = {
    srcJSFiles: [
      './app/*.js',
      './app/*/*.js',
      './app/*/*/*.js',
      '!./node_modules/**/*.js',
    ],
    targetIndexHtmlFile: 'index.html',
    root: './',

    bower: {
      json: require('./bower.json'),
      directory: './libs',
      ignorePath: '../..',
    },
  };

  config.getWiredepDefaultOptions = function () {
    var options = {
      bowerJson: config.bower.json,
      directory: config.bower.directory,
      ignorePath: config.bower.ignorePath,
    };

    return options;
  };

  return config;
};

Run the corresponding gulp commands to start the default gulp task. Or, if you do not like gulp, comment in all the files explicitly. That will do it, too :)

<script src="libs/angular/angular.js"></script>
<script src="libs/angular-animate/angular-animate.js"></script>
<script src="libs/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="libs/angular-loading-bar/build/loading-bar.js"></script>
<script src="libs/angular-resource/angular-resource.js"></script>
<script src="libs/angular-route/angular-route.js"></script>
<script src="libs/angular-toastr/dist/angular-toastr.tpls.js"></script>
<script src="libs/jquery/dist/jquery.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.js"></script>
<script src="libs/lodash/lodash.js"></script>
<!-- endbower -->

<!-- inject:js -->
<script src="app/application.js"></script>
<script src="app/Contact/contactModule.js"></script>
<script src="app/Home/homeModule.js"></script>
<script src="app/Contact/Controllers/contactController.js"></script>
<script src="app/Home/Controllers/homeController.js"></script>
<script src="app/Home/Services/peopleServices.js"></script>
<!-- endinject -->

Regards and have fun. Happy coding

If you have VS 2013 you can install the Task Runner Explorer, which is included in VS 2015 or you run the commands from the command line being on the level of the gulp.js-file.

Fabian