Frontend Gulp

A template for frontend web development with GulpJS, which includes:

• Tasks for JS/JSHint, Less, Image compression, Web Components
• Concatenation & Minification of JS, CSS, and your Web Components
• Includes Polymer's core-elements & paper-elements
• Error handling that doesn't break gulp watch
• Nice gulp-notify configuration, with different sounds for success & failure

Getting Started

1. npm install -g bower gulp
2. npm install
3. bower install
4. gulp to build

• gulp clean to clean dist folder
• export NODE_ENV=production && gulp to build using production values set in config.json

1. gulp watch to set up a filechange watch
2. gulp webserver to run the gulp-webserver to serve static files
3. Connect to http://localhost:8000

Deploying

The app is hosted at development.oscillate.divshot.io. Divshot is a service to host completely static sites.

Deploy with the following:

1. NODE_ENV=divshot gulp
2. divshot push

References

Official Docs:

• getting started
• recipes
• docs readme

Intro Blogs

• markgoodyear's gulp guide
• Rome wasn't built with Gulp
• http://travismaynard.com/writing/getting-started-with-gulp
• http://ilikekillnerds.com/2014/07/how-to-basic-tasks-in-gulp-js/
• http://blog.overzealous.com/post/74121048393/why-you-shouldnt-create-a-gulp-plugin-or-how-to-stop

Error Handling Blogs

• Error Handling in GulpJS
• Handle Errors While Using Gulp Watch

Vulcanize Web Components

• gulp-vulcanize
• vulcanize options (grunt & gulp plugins use same format)

Gulp & Angular Templates

• https://www.npmjs.org/package/gulp-angular-templates
• https://www.npmjs.org/package/gulp-angular-templatecache

Polymer/Angular SEO

• https://www.youtube.com/watch?v=inIIyR7hN8M&feature=youtu.be