Using this Angular Gulp Setup

To get setup with the starter-code, you first need to run:

$ bower install && gulp install

How is gulp setup?

Rather than trying to manage one giant gulpfile.js that is file responsible for creating multiple tasks, each task has been broken out into its own file and placed in a directory tasks. Any files in that directory get automatically required in the gulpfile using the require-dir npm package.

To add a new task, simply add a new task file that directory.

/tasks/default.js specifies the default set of tasks to run when you run gulp.

Configuration options are stored in the package.json file.

When deploying, ensure that a postinstall script has been added to your package.json, e.g.

"postinstall": "bower install && gulp deploy"

This setup expects that there is a bower.json file with at least ONE package installed. This will created a bower_components directory after the postinstall script has run.

When deploying, this setup expects that the NODE_ENV is set to production. Also that the NPM_CONFIG_PRODUCTION is set to false. Then you can also set the API_URL to be the correct URL for your deployed app. This will automatically replace http://localhost:4000 to be the correct url.

You can do this by running:

$ heroku config:set NODE_ENV=production
$ heroku config:set NPM_CONFIG_PRODUCTION=false

# An example url
$ heroku config:set API_URL=https://project-on-heroku.herokuapp.com/

Bower overrides

Sometimes, you might want to override the main file(s) for a specific Bower component. You can do this directly inside the bower.json file like this:

"overrides": {
  "bootstrap": {
    "main": [
      "dist/css/bootstrap.css",
      "dist/js/bootstrap.js",
      "dist/fonts/*"
    ]
  },
  "font-awesome": {
    "main": [
      "css/font-awesome.css",
      "fonts/*"
    ]
  }
},