Home

Extra tasks

These tasks are used in the primary tasks, but you can run them manually if you need to (hopefully you shouldn't need to)

command	description
gulp clean	deletes the /build and /.dev folders
gulp ship	chains together build, release, deploy tasks
gulp scaffold	creates folders/files based on the config
gulp scripts	compiles javascript files into the build folder
gulp styles	compiles sass files to css into the build folder
gulp templates	compiles and minifies html files
gulp fonts	copies fonts from bower components into the build folder
gulp images	copy images from bower components into dev folder
gulp images:build	optimize images and put them in the build folder
gulp images:optimize	optimizes images from source folder and into dev folder
gulp env	creates a env.js file from a .env (dotenv) file
gulp vendor	copies third party libs from the /vendor folder into dev folder
gulp misc	copies extra folders/files in the source folder into build folder

Features

Asset Injection

JS/CSS assets are handled a little old school with bendystraw, as it was built to support legacy applications. it uses gulp-inject and gulp-angular-filesort to include the application's assets.

gulp-inject looks for this in your html file:

<!-- inject:js -->
<!-- endinject -->

and injects all of your javascript files there, added in the correct order thanks to angular-filesort. when building the app (gulp build), gulp-useref allows us to bundle multiple files together, like so:

<!-- build:js javascripts/app.js -->
  <!-- inject:templates -->
  <!-- endinject -->

  <!-- inject:js -->
  <!-- endinject -->
<!-- endbuild -->

Take a look at the bendystraw example index.html to see it set up correctly, and what the build creates. you can also use gulp scaffold.

We can even use wiredep to automatically include Bower components and third party libraries (configurable folder location):

<!-- build:js javascripts/vendor.js -->
  <!-- bower:js -->
  <!-- endbower -->

  <!-- inject:vendor -->
  <!-- endinject -->
<!-- endbuild -->

GitHub releases

Based on the application's package.json version, running gulp release will bump the version of the app, tag and create a release on the GitHub repo. first, you need to set

export GITHUB_TOKEN=

In your environment variables. get a personal access token from your settings page.

WARNING! Make sure your package.json is valid and has the correct "repository" and "version" values.

Then run gulp release. if successful, you should get a release simliar to the bendystraw-test releases

S3 deployment

To utilize the gulp deploy task, you'll need the following environment variables set:

export AWS_BUCKET=
export AWS_ACCESS_KEY_ID=
export AWS_SECRET_ACCESS_KEY=

// Cloudfront CDN - optional
export AWS_DISTRIBUTION_ID=
export AWS_CLOUDFRONT_DOMAIN=xxxxx.cloudfront.net

If you have AWS_CLOUDFRONT_DOMAIN set, bendystraw will replace all asset urls with the CDN version on deployment.

Run gulp deploy. if you want to deploy a different environment, say staging, you need to configure your variables like this:

export STAGING_AWS_BUCKET=
export STAGING_AWS_ACCESS_KEY_ID=
export STAGING_AWS_SECRET_ACCESS_KEY=

and you would run: gulp deploy --env staging

Slack integration

After a successful deploy, bendystraw can send a message to a Slack channel via an incoming webhook. create a new incoming webhook https://TEAMNAME.slack.com/apps/manage/custom-integrations, then set it's url as an environment variable:

export SLACK_WEBHOOK_URL=https://hooks.slack.com/services/...

Angular $templateCache

The template files in the project get minified then output into a templates.js file, which looks something like this:

angular.module("templates", [])
.run(["$templateCache", function($templateCache) {
  $templateCache.put("app/layouts/layout.html","<div ui-view=\"\"></div>");
}]);

Then include the templates module into your project. you can reference a template in Angular using templateUrl and the full path (including the .html)

The templates.js file gets bundled into your compiled app.js on build if you have your index.html set up correctly.

WARNING! Make sure you include the templates module into your Angular project before building production! you will be missing your template code if you don't.

Multiple Environments

bendystraw uses dotenv for app specific configuration. if you want to override variables per environment, create a .env.environment, then run any Gulp command with --env environment (the word environment can anything).

If angular.enabled is true, these variables will be dumped into an Angular module called env (name can be configured).

angular.module('testApp', [
  'templates',
  'env'
]).config(function(ENV, NODE_ENV) {
  console.log('app config', ENV, NODE_ENV);
});

Otherwise, they'll be added onto the window as a global object, configured by name with envConstant (default is ENV).

WARNING! Do not put anything in this file you wouldn't want exposed to everyone! .env gets compiled and included in your source app.js.