morecallan/Installing Task Runners for Gauntlet Got Nothing

## Installing Task Runners for Gauntlet Got Nothing
Setting Up Browserify for a project:

1. Installing Task Runners for individual project files for Browserify in TERMINAL (make sure to pwd/cd into your Gauntlet folder):
  b. npm init (yes to all defaults)
  c. npm install gulp jshint gulp-jshint jshint-stylish gulp-watch watchify browserify vinyl-source-stream vinyl-buffer gulp-util gulp-sourcemaps lodash.assign jquery bootstrap sass gulp-sass --save


2. [touch gulpfile.js]

```
   "use strict";

// This is my Frankenstein combo of the 2 sample gulpfiles
var jshint = require('gulp-jshint');
var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');

// add custom browserify options here
var customOpts = {
  entries: ['./javascripts/app.js'],
  debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));

gulp.task('bundle', bundle); // changed from the sample gulpfile. Was 'default'

gulp.task('default', ['bundle', 'lint', 'watch']);

gulp.task('lint', function() {
  return gulp.src('./javascripts/**/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'));
});

gulp.task('watch', function() {
  gulp.watch(['./javascripts/**/*.js'], ['lint', 'bundle']);
});

// Makes watch keep watching even on JS error.
var onError = function ( err ) {
  gutil.log( gutil.colors.green( err.message ) );
  this.emit( 'end' );
};

function bundle() {
  return b.bundle()
    // log errors if they happen
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./dist'));
}
```

3. [touch .jshintrc]
```
    {
    "predef": [ "document", "console", "jquery", "module", "require"],
    "esversion": 6,
    "globalstrict": true,
    "browserify": true
  }
```

3. Start a new tab in terminal and run the command 'gulp' (make sure to pwd/cd into your Gauntlet folder) and leave this running the whole time you are working - this will initiate the default tasks for Browserify which include "watchify" so that any time you make changes to one of the js files that is in the dependency chain, it will automatically update the bundle.js
4. Script tag in HTML:
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="dist/bundle.js"></script>
****** NOTE: bundle.js is in dist/bundle.js and always will be. Don't know why. Couldn't fix it, just linked to it in index.html.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Robot Battledome!</title>
  <link href='https://fonts.googleapis.com/css?family=VT323|Black+Ops+One|Rubik+Mono+One|Iceberg' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="styles/quiz.css">
</head>

<body>
    <h1>Hello</h1>
</body>

  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="dist/bundle.js"></script>
</body>
</html>


Running Browserify:

1. Each file will need to be set up with dependencies at the beginning and exports at the end. Eg:
```
  "use strict";


//BROWSERIFY ENTRY FILE: Requirements (es6 notation)
//Now everytime we need to call a function or variable in these JS files, we will need to reference it as <varName>.monster, etc
var $ = require("jquery"),
    attack = require("./attack.js"),
    classes = require("./classes.js"),
    enemies = require("./enemies.js"),
    player = require("./player.js"),
    spells = require("./spells.js"),
    spellCast = require("./spellCast.js"),
    weapons = require("./weapons.js");

  //Code to generate a human player and an orc player
    var orc = new enemies.Orc();
    orc.generateClass();
    orc.generateWeapon();
    orc.playerName = "Monkey Arse";

    var warrior = new player.Combatants.Human();


  ...


  module.exports = {
  warrior,
  orc
  };
```
2. You can export variables, arrays, objects, functions. They are private variables (like the return statement of an iife).
3. Caching issues: Watch in TERMINAL for any errors. You will need to wait for a response similar to this before running in browser: [17:49:56] Finished 'bundle' after 937 ms (means bundle.js has completed update based on your saved changes)
  -If your changes do not immediately appear in browser. Do not freak out. Re-Gulp your file (ctrl + c) ... (gulp). Clear cache in the browser and re-run. Sometimes it might take up to 10 seconds. Reference: https://blog.avisi.nl/2014/04/25/how-to-keep-a-fast-build-with-browserify-and-reactjs/


Resources:
https://www.reddit.com/r/Frontend/comments/3f05k9/what_is_browserify_explain_like_im_5/
https://egghead.io/lessons/nodejs-introduction-to-browserify-part-1
https://ponyfoo.com/articles/a-gentle-browserify-walkthrough
	Setting Up Browserify for a project:

	1. Installing Task Runners for individual project files for Browserify in TERMINAL (make sure to pwd/cd into your Gauntlet folder):
	b. npm init (yes to all defaults)
	c. npm install gulp jshint gulp-jshint jshint-stylish gulp-watch watchify browserify vinyl-source-stream vinyl-buffer gulp-util gulp-sourcemaps lodash.assign jquery bootstrap sass gulp-sass --save


	2. [touch gulpfile.js]

	```
	"use strict";

	// This is my Frankenstein combo of the 2 sample gulpfiles
	var jshint = require('gulp-jshint');
	var watchify = require('watchify');
	var browserify = require('browserify');
	var gulp = require('gulp');
	var source = require('vinyl-source-stream');
	var buffer = require('vinyl-buffer');
	var gutil = require('gulp-util');
	var sourcemaps = require('gulp-sourcemaps');
	var assign = require('lodash.assign');

	// add custom browserify options here
	var customOpts = {
	entries: ['./javascripts/app.js'],
	debug: true
	};
	var opts = assign({}, watchify.args, customOpts);
	var b = watchify(browserify(opts));

	gulp.task('bundle', bundle); // changed from the sample gulpfile. Was 'default'

	gulp.task('default', ['bundle', 'lint', 'watch']);

	gulp.task('lint', function() {
	return gulp.src('./javascripts/*/.js')
	.pipe(jshint())
	.pipe(jshint.reporter('jshint-stylish'));
	});

	gulp.task('watch', function() {
	gulp.watch(['./javascripts/*/.js'], ['lint', 'bundle']);
	});

	// Makes watch keep watching even on JS error.
	var onError = function ( err ) {
	gutil.log( gutil.colors.green( err.message ) );
	this.emit( 'end' );
	};

	function bundle() {
	return b.bundle()
	// log errors if they happen
	.on('error', gutil.log.bind(gutil, 'Browserify Error'))
	.pipe(source('bundle.js'))
	.pipe(gulp.dest('./dist'));
	}
	```

	3. [touch .jshintrc]
	```
	{
	"predef": [ "document", "console", "jquery", "module", "require"],
	"esversion": 6,
	"globalstrict": true,
	"browserify": true
	}
	```

	3. Start a new tab in terminal and run the command 'gulp' (make sure to pwd/cd into your Gauntlet folder) and leave this running the whole time you are working - this will initiate the default tasks for Browserify which include "watchify" so that any time you make changes to one of the js files that is in the dependency chain, it will automatically update the bundle.js
	4. Script tag in HTML:
	<script src="./node_modules/jquery/dist/jquery.min.js"></script>
	<script src="dist/bundle.js"></script>
	****** NOTE: bundle.js is in dist/bundle.js and always will be. Don't know why. Couldn't fix it, just linked to it in index.html.

	<!doctype html>

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Robot Battledome!</title>
	<link href='https://fonts.googleapis.com/css?family=VT323\|Black+Ops+One\|Rubik+Mono+One\|Iceberg' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="styles/quiz.css">
	</head>

	<body>
	<h1>Hello</h1>
	</body>

	<script src="./node_modules/jquery/dist/jquery.min.js"></script>
	<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="dist/bundle.js"></script>
	</body>
	</html>




	Running Browserify:

	1. Each file will need to be set up with dependencies at the beginning and exports at the end. Eg:
	```
	"use strict";


	//BROWSERIFY ENTRY FILE: Requirements (es6 notation)
	//Now everytime we need to call a function or variable in these JS files, we will need to reference it as <varName>.monster, etc
	var $ = require("jquery"),
	attack = require("./attack.js"),
	classes = require("./classes.js"),
	enemies = require("./enemies.js"),
	player = require("./player.js"),
	spells = require("./spells.js"),
	spellCast = require("./spellCast.js"),
	weapons = require("./weapons.js");

	//Code to generate a human player and an orc player
	var orc = new enemies.Orc();
	orc.generateClass();
	orc.generateWeapon();
	orc.playerName = "Monkey Arse";

	var warrior = new player.Combatants.Human();


	...


	module.exports = {
	warrior,
	orc
	};
	```
	2. You can export variables, arrays, objects, functions. They are private variables (like the return statement of an iife).
	3. Caching issues: Watch in TERMINAL for any errors. You will need to wait for a response similar to this before running in browser: [17:49:56] Finished 'bundle' after 937 ms (means bundle.js has completed update based on your saved changes)
	-If your changes do not immediately appear in browser. Do not freak out. Re-Gulp your file (ctrl + c) ... (gulp). Clear cache in the browser and re-run. Sometimes it might take up to 10 seconds. Reference: https://blog.avisi.nl/2014/04/25/how-to-keep-a-fast-build-with-browserify-and-reactjs/


	Resources:
	https://www.reddit.com/r/Frontend/comments/3f05k9/what_is_browserify_explain_like_im_5/
	https://egghead.io/lessons/nodejs-introduction-to-browserify-part-1
	https://ponyfoo.com/articles/a-gentle-browserify-walkthrough