Getting started with task runners.

basicGruntfile.js

// 1 our wrapper function (required by grunt and its plugins)
module.exports = function(grunt) {

  // 2 CONFIGURE GRUNT
  grunt.initConfig({

    // 3 define individual tasks
    
    // get the configuration info from package.json
    pkg: grunt.file.readJSON('package.json'),

    // configure plugin with information, sample here is jshint, which doesn't like my code
    jshint: {
      options: {
        reporter: require('jshint-stylish')
      },
      all: ['Grunfile.js', '**/*.js']
    }

  });

  // 4 LOAD GRUNT PLUGINS
  grunt.loadNpmTasks('grunt-contrib-jshint');

  // 5 REGISTER TASKS, start with 'default'
  grunt.registerTask('default', ['jshint','other task defined above']);

};

basicGruntfile_expandedWithJsHintAndWatch.js

// 1 our wrapper function (required by grunt and its plugins)
module.exports = function(grunt) {

  // 2 CONFIGURE GRUNT
  grunt.initConfig({

    // 3 define individual tasks
    
    // get the configuration info from package.json
    pkg: grunt.file.readJSON('package.json'),

    // configure plugin with information, sample here is jshint, which doesn't like my code
   jshint: {
		options: {
			reporter: require('jshint-stylish'),
			'-W033': true, // mising semicolon
			'-W041': true, // use 'x' to compare with 'y'
			'-W004': true, // x already in use
			'-W014': true // bad line breaking before '||'
		},
		all: ['Grunfile.js', 'NSF/WebContent/js/*.js']
	},
    
    // configure watch to auto update
    watch: {
      scripts: {
        files: 'NSF/WebContent/js/*.js',
        tasks: ['jshint']
      }
    }

  });

  // 4 LOAD GRUNT PLUGINS
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // 5 REGISTER TASKS, start with 'default'
  grunt.registerTask('default', ['jshint','watch']);

};

basicGruntfile_expandedWithJsHintWatchAndBrowserSync.js

// 1 our wrapper function (required by grunt and its plugins)
module.exports = function(grunt) {

  // 2 CONFIGURE GRUNT
  grunt.initConfig({

    // 3 define individual tasks
    
    // get the configuration info from package.json
    pkg: grunt.file.readJSON('package.json'),

    // configure plugin with information, sample here is jshint, which doesn't like my code
   jshint: {
		options: {
			reporter: require('jshint-stylish'),
			'-W033': true, // mising semicolon
			'-W041': true, // use 'x' to compare with 'y'
			'-W004': true, // x already in use
			'-W014': true // bad line breaking before '||'
		},
		all: ['Grunfile.js', 'NSF/WebContent/js/*.js']
	},
    
    // configure watch to auto update
    watch: {
      scripts: {
        files: 'NSF/WebContent/js/*.js',
        tasks: ['jshint']
      }
    },
    
    browserSync: {
  		dev: {
			bsFiles: {
				src : [ 'NSF/WebContent/js/*.js' ]
			},
			options: {
				watchTask: true,
				proxy: 'localhost:3000'
			}
		}
	}

  });

  // 4 LOAD GRUNT PLUGINS
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // 5 REGISTER TASKS, start with 'default'
  grunt.registerTask('default', ['jshint','watch','browserSync']);

};

basicGulpfile.js

// 1 define the plugin imports
var gulp  = require('gulp'),
    gutil = require('gulp-util'),
    jshint = require('gulp-jshint');

/* 2 define the tasks, including the
 * default task, aka- no args when running 'gulp'
 */
gulp.task('default', ['jshint','watch']);

// note, order doesn't matter
gulp.task('jshint', function() {
  return gulp.src(['./NSF/WebContent/js/*.js'])
    .pipe(jshint({
        // any options for config of the jshint functionality
    }))
    .pipe(jshint.reporter('jshint-stylish'));
});

/* Watch these files for changes and run the task on update */
gulp.task('watch', function() {
  gulp.watch(input.javascript, ['jshint']);
});

Gruntfile.js

// our wrapper function (required by grunt and its plugins)
module.exports = function(grunt) {

  // CONFIGURE GRUNT
  grunt.initConfig({

    // get the configuration info from package.json
    pkg: grunt.file.readJSON('package.json'),

    // configure plugin with information, sample here is jshint, which doesn't like my code
    jshint: {
      options: {
        reporter: require('jshint-stylish'),
        '-W033': true, // mising semicolon
        '-W041': true, // use 'x' to compare with 'y'
        '-W004': true, // x already in use
        '-W014': true // bad line breaking before '||'
      },
      all: ['Grunfile.js', 'NSF/WebContent/js/*.js']
    },

    // configure uglify to minify js files -------------------------------------
    uglify: {
      options: {
        banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
      },
      build: {
        files: {
          'public/dist/scripts_via_grunt.min.js': 'NSF/WebContent/js/*.js'
        }
      }
    },

    // configure cssmin to minify css files ------------------------------------
    cssmin: {
      options: {
        banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
      },
      build: {
        files: {
          'dist/css/styles_from_grunt.min.css': 'NSF/WebContent/css/*.css'
        }
      }
    },

    // configure htmlmin to remove comments and whitespace or more for dev vs dist
    htmlmin: {
      build: {
        options: {
          removeComments: true,
          collapseWhitespace: true,
          collapseBooleanAttributes: true,
          removeAttributeQuotes: true,
          removeEmptyAttributes: true,
          removeRedundantAttributes: true
        },
        files: [{
          expand: true,
          cwd: 'NSF/WebContent/partials',
          src: '{,*/}*.html',
          dest: 'NSF/WebContent/dist/views'
        }]
       }
    },

    // configure watch to auto update ------------------------------------------
    watch: {
      stylesheets: {
        files: ['NSF/WebContent/css/*.css'],
        tasks: ['cssmin']
      },
      scripts: {
        files: 'NSF/WebContent/js/*.js',
        tasks: ['jshint', 'uglify']
      },
      partials: {
        files: 'NSF/WebContent/partials/*.html',
        tasks: ['htmlmin']
      }
    },

    /*
    run: {
      options: {
        // Task-specific options go here.
      },
      serve: {
        exec: 'json-server --id unid db.json --watch --routes routes.json'
      }
    },
    */

    browserSync: {
      dev: {
          bsFiles: {
              src : [
                      'NSF/WebContent/css/*.css',
                      'NSF/WebContent/js/*.js',
                      'NSF/WebContent/partials/*.html'
                    ]
          },
          options: {
              watchTask: true,
              proxy: 'localhost:3000'
          }
      }
    }

  });

  // LOAD GRUNT PLUGINS
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-htmlmin');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browser-sync');
  //grunt.loadNpmTasks('grunt-run');

  // CREATE TASKS
  grunt.registerTask('default', ['jshint','uglify','cssmin','htmlmin','browserSync','watch']);

};

gulpfile.js

/* File: gulpfile.js */

// grab our packages
var gulp      = require('gulp'),
  gutil       = require('gulp-util'),
  jshint      = require('gulp-jshint'),
  concat      = require('gulp-concat'),
  sourcemaps  = require('gulp-sourcemaps'),
  jsonServer  = require('gulp-json-srv'),
  minify      = require('gulp-minify-css'),
  rename      = require('gulp-rename'),
  minifyHTML  = require('gulp-minify-html'),
  server      = jsonServer.start({  // config the json-server instance
          data: 'db.json',
          id: 'unid',
          rewriteRules: {
            "/xsp/houses": "/houses",
            "/xsp/:houses/:id": "/:houses/:id",
            "/xsp/characters": "/characters",
            "/xsp/:characters/:id": "/:characters/:id"
          },
          deferredStart: true
        }),
  browserSync   = require('browser-sync').create();

// configure the jshint task
gulp.task('jshint', function() {
  return gulp.src('./NSF/WebContent/js/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
});

// build dist JS assets
gulp.task('build-js', function() {
  return gulp.src('./NSF/WebContent/js/*.js')
    .pipe(sourcemaps.init())
    .pipe(concat('scripts_from_gulp.js'))
    //only uglify if gulp is ran with '--type production'
    .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop()) 
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./public/dist'));
});

gulp.task('cssmin', function(){
  gulp.src('./NSF/WebContent/css/*.css')
    .pipe(minify({ keepBreaks: false }))
    /*
    // builds individually minified files
    .pipe(rename({
      suffix: '.min'
    }))
    */
    .pipe(concat('style.min.css')) // combines into single minified CSS file
    .pipe(gulp.dest('public/dist'));
});

gulp.task('minify-html', function(){
  var opts = {
    conditionals: true,
    spare: true
  };

  return gulp.src('./NSF/WebContent/partials/*.html')
    .pipe(minifyHTML(opts))
    .pipe(gulp.dest('./public/dist'));
});

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('./NSF/WebContent/js/*.js', ['jshint']);
  gulp.watch(['db.json'], function(){
    server.reload();
  });
  gulp.watch('./NSF/WebContent/css/*.css', ['cssmin']);
  gulp.watch('./NSF/WebContent/partials/*.html', ['minify-html'])
});

// starts the json-server instance
gulp.task('serverStart', function(){
  server.start();
});

// loading browser-sync as a proxy, must load after json-server
gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "http://localhost:3000/"
    });
});

// generic build, assuming we don't want the preview
gulp.task('build', ['jshint', 'build-js', 'cssmin', 'minify-html']);

// define the default task and add the watch task to it
gulp.task('default', ['watch','serverStart','browser-sync']);

gulpfileWithExpandedExample.js

/* File: gulpfile.js */

// grab our packages
var gulp      = require('gulp'),
  gutil       = require('gulp-util'),
  jshint      = require('gulp-jshint'),
  jsonServer  = require('gulp-json-srv'),
  server      = jsonServer.start({  // config the json-server instance
          data: 'db.json',
          id: 'unid',
          rewriteRules: {
            "/xsp/houses": "/houses",
            "/xsp/:houses/:id": "/:houses/:id",
            "/xsp/characters": "/characters",
            "/xsp/:characters/:id": "/:characters/:id"
          },
          deferredStart: true
        }),
  browserSync   = require('browser-sync').create();

// configure the jshint task
gulp.task('jshint', function() {
  return gulp.src(['./NSF/WebContent/js/*.js'])
    .pipe(jshint({
      '-W033': true, // mising semicolon
      '-W041': true, // use 'x' to compare with 'y'
      '-W004': true, // x already in use
      '-W014': true // bad line breaking before '||'
    }))
    .pipe(jshint.reporter('jshint-stylish'));
});

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('./NSF/WebContent/js/*.js', ['jshint','browser-sync-reload']);
  gulp.watch(['db.json'], function(){ server.reload(); });
});

// starts the json-server instance
gulp.task('serverStart', function(){ server.start(); });

// reload the json-server instance, and its assets
gulp.task('serverReload', function(){ server.reload(); });

// loading browser-sync as a proxy, must load after json-server
gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "http://localhost:3000/",
        ui: {
          weinre: {
              port: 9090
          }
      }
    });
});

// reload browserSync
gulp.task('browser-sync-reload', function(){ browserSync.reload(); });

// define the default task and add the watch task to it
gulp.task('default', ['watch','serverStart','browser-sync']);

package.json

{
  "name": "app-of-ice-and-fire",
  "version": "1.0.2",
  "description": "an app of ice and fire",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "json-server --id unid db.json --watch --routes routes.json"
  },
  "repository": {
    "type": "git",
    "url": "git@github.com:edm00se/AnAppOfIceAndFire.git"
  },
  "author": "edm00se",
  "license": "CC-BY-SA-4.0",
  "dependencies": {
    "json-server": "^0.7.20"
  },
  "devDependencies": {
    "browser-sync": "^2.10.0",
    "grunt": "^0.4.5",
    "grunt-browser-sync": "^2.2.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-copy": "^0.8.2",
    "grunt-contrib-cssmin": "^0.14.0",
    "grunt-contrib-htmlmin": "^0.6.0",
    "grunt-contrib-imagemin": "^0.9.4",
    "grunt-contrib-jshint": "^0.11.3",
    "grunt-contrib-uglify": "^0.10.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-run": "^0.5.2",
    "gulp": "^3.9.0",
    "gulp-concat": "^2.6.0",
    "gulp-jshint": "^1.12.0",
    "gulp-json-srv": "0.0.7",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.1",
    "gulp-minify-html": "^1.0.4",
    "gulp-rename": "^1.2.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-util": "^3.0.7",
    "jshint-stylish": "^2.0.1"
  }
}

sparse-checkout

# .git/info/sparse-checkout
.gitignore
package.json
.bowerrc
bower.json
db.json
routes.json
NSF/WebContent/
ReadMe.md