bellycard/bendystraw

a set of Gulp tasks for developing and deploying JS apps.

bendystraw

bendystraw is an opinionated set of [Gulp](https://github.com/gulpjs/gulp/) tasks for developing and deploying javascript apps

Some features include Babel & CoffeeScript support, Angular specific features, Browersync development, multiple app environments, GitHub changelog and release creation, AWS deployment, Slack integration, and more.

Usage

npm install --save-dev bendystraw

In order to use the gulp tasks, create a gulpfile.js with:

require('bendystraw')()

Config

bendystraw assumes you have a defined source folder to use the tasks. By default, it looks like this:

You can generate this structure by using gulp scaffold, or you can override it to fit your needs. Here's an example configuration:

// gulpfile.js
require('bendystraw')({
  paths: {
    build: 'public', // Override the build folder name
    styles: 'css', // Override the stylesheet source folder
  },
  html: {
    preprocessor: require('gulp-jade'), // Use a custom html preprocessor
  },
  styles: {
    sassOptions: {
      indentedSyntax: true // Use .sass indented syntax
    },
    uncss: true, // Enable uncss
    autoprefixer: true
  },
  scripts: {
    babel: true, // Use babel es2015 preset
    coffeescript: false,
    sourcemaps: false
  }
})

Check out all the config values here

NOTE: gulp scaffold will generate an index.html file. This shows how bendystraw uses gulp-inject and gulp-useref to inject your app's javascript and create bundles. Make sure to change the paths in the file if you've overridden the defaults. Read more about it on the wiki.

Tasks

command	description
gulp	defaults to server task
gulp server	builds the app to the dev folder and runs the Browsersync server
gulp build	builds, minifys the app to the build folder (for production)
gulp release	bumps version, tags, and creates a GitHub release based on your package.json
gulp deploy	deploys the build folder to a S3 bucket, posts to Slack if configured
gulp lint	lints using sass-lint, eslint, and coffeelint
gulp test	runs tests using Karma
gulp e2e	runs end to end tests with Protractor

bendystraw uses dotenv to load environment variables into the app. All of these tasks can be run with --env, ie: gulp build --env staging. This will make .env.staging available to the app.

To read more about the tasks and environment, check out the wiki.

Features

• JS:
  • Angular features (off by default)
    • Dependency injection annotations
    • File sorting to avoid injection issues
    • Compiles html files to the Angular templateCache
  • Babel es2015 support
  • CoffeeScript support
  • CoffeeLint/ESLint
  • Sourcemaps
  • Bower components automatically injected through wiredep
  • Multiple script bundles created with useref
• CSS:
  • Sass support, indented or scss using node-sass
  • Sourcemaps
  • Autoprefixer
  • SassLint
  • Uncss
• HTML:
  • Any gulp-based html preprocessor support (gulp-haml, gulp-jade, etc)
• Images:
  • Image compression
  • Grabs images from specified Bower components
• Development:
  • Live reload with Browsersync
  • Support for multiple environments through dotenv
  • dotenv configuration output to window global or Angular constant for injection
  • Environment specific logic in the views
• Releasing:
  • GitHub semantic tagging and release creation (based on your package.json)
  • Changelog generation by comparing previous tag
• Deployment:
  • Amazon S3 bucket deploys
  • Asset revisioning
  • Cloudfront CDN url replacement support
  • Slack deployment messages
• Testing:
  • Karma tests
  • End to end testing with Protractor

Thanks

bendystraw is inspired and based off of several Gulp projects. Big thanks to gulp-starter by vigetlabs and generator-gulp-angular by Matthieu Lux