yoso-gulp

A build workflow using gulp to include all JS and CSS dependencies as NPM packages with webpack.

See Wiki for more details

NOTE: Dependency versions are fixed to distinct versions via npm-shrinkwrap!

Install

$ npm install --save-dev gfke/yoso-gulp

The SCSS linting relies on a ruby gem which needs to be installed

$ sudo gem install scss-lint

Usage

 gulp develop (default)  # Compile build for debugging / development 
                           and start debugging server / refreshes on every code change

 gulp build-release # Compile fully optimized build for production release

Workflow Batches

There are two main workflow batches that combine and orchestrate the other individual task into the two most common workflows

develop

Cleans everything from previous development builds. Compiles everything in a debug friendly, non-minimized version and adds watcher for file changes Creates a connect server with livereload to serve the current state of the application and all dependencies Opens your development browser to view the application

build-docs

Parses all comments in the Javascript code using JSdoc and automagically creates a browseable Wiki on the Github repository of your project. Updates only the API part of the Wiki - all manually added documentation will stay untouched

build-release

Cleans everything from previous development and release builds Sets all config values necessary for build, creates the cache key. Builds all sources like the development workflow but additionally minifies all JS, CSS and HTML sources and copies the minified version to the app folder, also renaming them to include the cache key. Finally copies all static files and html templates to the app folder making it ready to be deployed.

code-quality

Runs all code quality tasks for checking code and style conventions and also runs all tests This batch is the only one to be called in modules

Individual Tasks

The other tasks are individual tasks, which normally do not need to be executed directly

build-release-clean

Deletes the app folder, cleaning all files from release builds

build-release-copy

Copies all static files and all HTML templates to the app folder

build-release-http

build-release-scripts

Minify webpack bundle and templateCache After that, add the cache key to the filename and copy it to the app folder

build-release-styles

Minify CSS bundle After that, add the cache key to the filename and copy it to the app folder

build-index

This task copies the index.html file from the sources to the app folder and inserts the correct link to the JS files On ReleaseBuild it also minifies the HTML and adds the cache key to the filename

build-webpack

Calls webpack to resolve all require calls and create a Javascript bundle that will hold all Javascript modules, their styles and their SVGs. All dependencies are resolved in this bundle.

clean

Deletes the temporary folder, cleaning all files from development builds

http

Add a watcher on the temporary and application folder to watch for changes on script, styles, markup or images

http-browser

Opens the default browser and navigates to the development server

http-refresh

Triggers the live reload

http-server

Open a connect HTTP server with livereload to serve the application

lint-scripts

This task runs jscs and JSLint with the configurations stored in this module (local settings are ignored) to ensure same code style and quality on all modules

lint-styles

This task runs scss-lint with the configurations stored in this module (local settings are ignored) to ensure same sass style and quality on all modules

unit-test

This task runs your unit tests directly in Node using Jasmine No karma or phantomJs necessary Unit tests as well as the tested source files may be written in ES6 as both are compiled via webpack in the tmp folder before executed

watch-unit-test

Runs 'unit-test' and places a watcher on all files used in the build to recompile if any of these files changes