Localhost for static files in seconds with gulp

gulpfile.js

/* Gulpfile setup */

// Load plugins
var gulp 						= require('gulp'),
		browserSync 	= require('browser-sync').create(), // Asynchronous browser loading on .scss file changes
		reload					= browserSync.reload;

// watch files (Add As Many file types as you want)
var files = [
			'**/*.html',
			'**/*.css',
			'**/*.js',
			'**/*.{png,jpg,gif}',

			// Files/Directories to ignore
			'!node_modules/**/*',
			'!bower_components/**/*'
		];

/**
	* Browser Sync
	*
	* Asynchronous browser syncing of assets across multiple devices!! Watches for changes to HTML, CSS, js, image and php files
	* Although, I think this is redundant, since we have a watch task that does this already.
*/
gulp.task('browser-sync', function() {

	// initialize browsersync
	browserSync.init(files, {
		// Read here http://www.browsersync.io/docs/options/
		// proxy: 'localhost/',
		server: {
			baseDir: "./"
		},

		// browser: "google chrome",

		notify: false,

		port: 8080,

		// Tunnel the Browsersync server through a random Public URL
		// tunnel: true,

		// Attempt to use the URL "http://my-private-site.localtunnel.me"
		// tunnel: "ppress",

		// Inject CSS changes
		injectChanges: true
	})
});

// Watch Task
gulp.task('default', ['browser-sync'], function () {
	gulp.watch([files], browserSync.reload);

	// Another way of watch
	// gulp.watch(['images/**/*', 'stylesheets/**/*.css', 'javascripts/**/*.js', '**/*.html']).on('change', browserSync.reload);

	// Another way of watch
	// gulp.watch("**/*.html").on('change', browserSync.reload);
	// gulp.watch("javascripts/**/*.js").on('change', browserSync.reload);
	// gulp.watch("stylesheets/**/*.css").on('change', browserSync.reload);
});