From 6d2370bf053cd84c3d45cf15d3cae9fbc22d08eb Mon Sep 17 00:00:00 2001 From: Chris Ferdinandi Date: Thu, 16 Oct 2014 15:13:14 -0400 Subject: [PATCH] v4.2.0 * Updated Gulp task naming convention for better readability (action:object). * Added `gulp watch` and `gulp reload` task runners (regular and docs flavored). * Reorganized `package.json` and `gulpfile.js` packages. --- README.md | 4 +- docs/generating-documentation.html | 9 ++- docs/working-with-the-source-files.html | 11 ++- gulpfile.js | 88 +++++++++++++++++++-- package.json | 35 ++++---- src/docs/generating-documentation.html | 9 ++- src/docs/working-with-the-source-files.html | 11 ++- 7 files changed, 136 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index 156c9d4f..303dcf54 100755 --- a/README.md +++ b/README.md @@ -16,8 +16,10 @@ Kraken is free to use under the [MIT License](http://gomakethings.com/mit/). Kraken uses [semantic versioning](http://semver.org/). -* v4.2.0 - October 15, 2014 +* v4.2.0 - October 16, 2014 * Updated Gulp task naming convention for better readability (action:object). + * Added `gulp watch` and `gulp reload` task runners (regular and docs flavored). + * Reorganized `package.json` and `gulpfile.js` packages. * v4.1.2 - October 15, 2014 * Updated `gulp-svgstore` to version `2.x`. * Replaced `gulp-clean` with native Node `del` method. diff --git a/docs/generating-documentation.html b/docs/generating-documentation.html index 2a9818e1..7effc90d 100644 --- a/docs/generating-documentation.html +++ b/docs/generating-documentation.html @@ -36,7 +36,7 @@

Generating Documentation

-

Kraken ships with a simple documentation generator powered by Gulp.js. Unfortunately, if you're uncomfortable using terminal, you won't be able to take advantage of this feature.

+

Kraken ships with a simple documentation generator powered by Gulp.js. This feature requires you to work with the source files.

Documentation files can be found under src > docs, and compile to docs.

@@ -54,7 +54,12 @@

How to Create Docs

Files placed in the assets directory will be moved over as-is to the docs directory. Kraken will also add a copy of your dist files so you can use them in your documentation.

-

When you're ready, run gulp docs in terminal.

+

When you're ready, run one of the task runners to get going:

+

Why not use an existing documentation tool?

diff --git a/docs/working-with-the-source-files.html b/docs/working-with-the-source-files.html index 78fe3d36..603122a3 100644 --- a/docs/working-with-the-source-files.html +++ b/docs/working-with-the-source-files.html @@ -67,10 +67,17 @@

Quick Start

  1. In bash/terminal/command line, cd into the kraken directory.
  2. Run npm install to install the required files.
    3. -
  3. When it's done installing, run gulp to get going.
    4. +
  4. + When it's done installing, run one of the task runners to get going: +
      +
    • gulp manually compiles files.
      • +
    • gulp watch automatically compiles files when changes are made.
      • +
    • gulp reload automatically compiles files and applies changes using LiveReload.
      • +
    +
-

Every time you make changes, run gulp to process them.

+

Working with Sass

diff --git a/gulpfile.js b/gulpfile.js index 383af137..afc05d7a 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -2,29 +2,40 @@ * Gulp Packages */ +// General var gulp = require('gulp'); var fs = require('fs'); -var plumber = require('gulp-plumber'); var del = require('del'); var lazypipe = require('lazypipe'); -var rename = require('gulp-rename'); +var plumber = require('gulp-plumber'); var flatten = require('gulp-flatten'); var tap = require('gulp-tap'); +var rename = require('gulp-rename'); var header = require('gulp-header'); var footer = require('gulp-footer'); +var watch = require('gulp-watch'); +var livereload = require('gulp-livereload'); +var package = require('./package.json'); + +// Scripts and tests var jshint = require('gulp-jshint'); var stylish = require('jshint-stylish'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); +var karma = require('gulp-karma'); + +// Styles var sass = require('gulp-ruby-sass'); var prefix = require('gulp-autoprefixer'); var minify = require('gulp-minify-css'); -var karma = require('gulp-karma'); + +// SVGs var svgmin = require('gulp-svgmin'); var svgstore = require('gulp-svgstore'); + +// Docs var markdown = require('gulp-markdown'); var fileinclude = require('gulp-file-include'); -var package = require('./package.json'); /** @@ -32,6 +43,7 @@ var package = require('./package.json'); */ var paths = { + input: 'src/**/*', output: 'dist/', scripts: { input: 'src/js/*', @@ -156,7 +168,7 @@ gulp.task('lint:scripts', function () { // Remove prexisting content from output and test folders gulp.task('clean:dist', function () { - return del.sync([ + del.sync([ paths.output, paths.test.coverage, paths.test.results @@ -208,6 +220,48 @@ gulp.task('clean:docs', function () { return del.sync(paths.docs.output); }); +// Watch for changes to files +gulp.task('listen', function () { + watch(paths.input, function (files) { + gulp.start('default'); + }); +}); + +// Watch for changes to files and docs +gulp.task('listen:docs', function () { + watch(paths.input, function (files) { + gulp.start('docs'); + }); +}); + +// Spin up livereload server and listen for file changes +gulp.task('server', function () { + livereload.listen(); + watch(paths.input, function (files) { + gulp.start('default'); + gulp.start('refresh'); + }); +}); + +// Spin up livereload server and listen for file and documentation changes +gulp.task('server:docs', function () { + livereload.listen(); + watch(paths.input, function (files) { + gulp.start('docs'); + gulp.start('refresh:docs'); + }); +}); + +// Run livereload after file change +gulp.task('refresh', ['default'], function () { + livereload.changed(); +}); + +// Run livereload after file or documentation change +gulp.task('refresh:docs', ['docs'], function () { + livereload.changed(); +}); + /** * Task Runners @@ -231,4 +285,28 @@ gulp.task('docs', [ 'build:docs', 'copy:dist', 'copy:assets' +]); + +// Compile files when something changes +gulp.task('watch', [ + 'listen', + 'default' +]); + +// Compile files and generate docs when something changes +gulp.task('watch:docs', [ + 'listen:docs', + 'docs' +]); + +// Compile files and livereload pages when something changes +gulp.task('reload', [ + 'server', + 'default' +]); + +// Compile files, generate docs, and livereload pages when something changes +gulp.task('reload:docs', [ + 'server:docs', + 'docs' ]); \ No newline at end of file diff --git a/package.json b/package.json index 989c0b25..62750bb6 100755 --- a/package.json +++ b/package.json @@ -14,32 +14,33 @@ }, "devDependencies": { "gulp": "^3.8.0", - "gulp-autoprefixer": "^0.0.7", - "gulp-concat": "^2.2.0", + "node-fs": "^0.1.7", + "del": "^0.1.3", + "lazypipe": "^0.2.2", + "gulp-plumber": "^0.6.2", "gulp-flatten": "^0.0.2", "gulp-tap": "^0.1.1", + "gulp-rename": "^1.1.0", "gulp-header": "^1.1.1", "gulp-footer": "^1.0.5", + "gulp-watch": "^1.1.0", + "gulp-livereload": "^2.1.1", "gulp-jshint": "^1.6.1", - "gulp-karma": "^0.0.4", - "gulp-minify-css": "^0.3.4", - "gulp-plumber": "^0.6.2", - "gulp-rename": "^1.1.0", - "gulp-ruby-sass": "^0.7.1", - "gulp-uglify": "^0.3.0", - "gulp-svgmin": "^0.4.6", - "gulp-svgstore": "^2.0.0", - "gulp-markdown": "^1.0.0", - "gulp-file-include": "^0.5.1", "jshint-stylish": "^0.2.0", - "node-fs": "^0.1.7", - "del": "^0.1.3", - "lazypipe": "^0.2.2", - "karma": "^0.12.16", + "gulp-concat": "^2.2.0", + "gulp-uglify": "^0.3.0", + "gulp-karma": "^0.0.4", "karma-coverage": "^0.2.4", "karma-jasmine": "^0.2.0", "karma-phantomjs-launcher": "^0.1.4", "karma-spec-reporter": "^0.0.13", - "karma-htmlfile-reporter": "^0.1" + "karma-htmlfile-reporter": "^0.1", + "gulp-ruby-sass": "^0.7.1", + "gulp-minify-css": "^0.3.4", + "gulp-autoprefixer": "^0.0.7", + "gulp-svgmin": "^0.4.6", + "gulp-svgstore": "^2.0.0", + "gulp-markdown": "^1.0.0", + "gulp-file-include": "^0.5.1" } } diff --git a/src/docs/generating-documentation.html b/src/docs/generating-documentation.html index 4c3f4b95..94ef88b5 100644 --- a/src/docs/generating-documentation.html +++ b/src/docs/generating-documentation.html @@ -3,7 +3,7 @@

Generating Documentation

-

Kraken ships with a simple documentation generator powered by Gulp.js. Unfortunately, if you're uncomfortable using terminal, you won't be able to take advantage of this feature.

+

Kraken ships with a simple documentation generator powered by Gulp.js. This feature requires you to work with the source files.

Documentation files can be found under src > docs, and compile to docs.

@@ -21,7 +21,12 @@

How to Create Docs

Files placed in the assets directory will be moved over as-is to the docs directory. Kraken will also add a copy of your dist files so you can use them in your documentation.

-

When you're ready, run gulp docs in terminal.

+

When you're ready, run one of the task runners to get going:

+

Why not use an existing documentation tool?

diff --git a/src/docs/working-with-the-source-files.html b/src/docs/working-with-the-source-files.html index bd48e2f8..9a4cab6b 100644 --- a/src/docs/working-with-the-source-files.html +++ b/src/docs/working-with-the-source-files.html @@ -34,10 +34,17 @@

Quick Start

  1. In bash/terminal/command line, cd into the kraken directory.
  2. Run npm install to install the required files.
    3. -
  3. When it's done installing, run gulp to get going.
    4. +
  4. + When it's done installing, run one of the task runners to get going: +
      +
    • gulp manually compiles files.
      • +
    • gulp watch automatically compiles files when changes are made.
      • +
    • gulp reload automatically compiles files and applies changes using LiveReload.
      • +
    +
-

Every time you make changes, run gulp to process them.

+

Working with Sass