mrajcok · August 29, 2015 14:10
diff --git a/Directory_structure.txt b/Directory_structure.txt
 Gruntfile.js
 package.json
 server.js
 public
 |- index.html
 |- scripts
   |- main.js
 |- styles
   |- main.css
diff --git a/Gruntfile.js b/Gruntfile.js
 'use strict';
 module.exports = function(grunt) {
    grunt.initConfig({
        express: {
            dev: {
                options: {
                    script: 'server.js',
                }
            }
        },
        open: {
            all: {
                path: 'http://localhost:3000'
            }
        },
        watch: {
            options: {
                livereload: true
            },
            express: {
                files: ['server.js'],
                tasks: ['express'],
                options:  {
                    spawn: false
                }
            },
            public: {
                files: ['public/index.html', 'public/scripts/*.js', 'public/styles/*.css']
            }
        }
    });
    //require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
    //'grunt-contrib-watch grunt-express-server grunt-open'.split(' ')
    //  .forEach(grunt.loadNpmTasks);
    Object.keys(grunt.file.readJSON('package.json').devDependencies)
        .filter(function(dep) { return dep.indexOf('grunt-') === 0; })
        .forEach(grunt.loadNpmTasks);
    grunt.registerTask('default', 'express open watch'.split(' '));
 };
 // HTML file needs to load the following script, or the LiveReload browser plugin must be enabled:
 // <script src="//localhost:35729/livereload.js"></script>
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>grunt, express, livereload</title>
   <link rel="stylesheet" href="styles/main.css">
 </head>
 <body>
  <h1>grunt, express, livereload</h1>
  <ul>
    <li>edit public/index.html and watch the browser reload
    <li>edit public/styles/main.css and watch CSS be injected without a browser reload
    <li>edit public/scripts/main.js and watch the browser reload
    <li>edit server.js and watch the server reload, then the browser reload
  </ul>
  <script src="scripts/main.js"></script>
  <!-- with the following script, a LiveReload browser plugin is not required, and if installed, should be turned off -->
  <script src="//localhost:35729/livereload.js"></script>
 </body>
 </html>
diff --git a/main.css b/main.css
 h1 {
   font-size: 20pt;
 }
diff --git a/main.js b/main.js
 console.log('main.js log test');
 //console.log('another main.js log test');
diff --git a/package.json b/package.json
 {
  "private": true,
  "dependencies": {
    "express": "^4.10.2"
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-express-server": "^0.4.19",
    "grunt-open": "^0.2.3"
  }
 }
diff --git a/server.js b/server.js
 var express = require('express'),
    app     = express();
 app.use(express.static(__dirname + '/public'));
 app.use('/bower_components', express.static(__dirname + '/bower_components'));
 // -- main
 var server = app.listen(3000, function() {
   console.log('Listening on port %d. __dirname = %s', server.address().port, __dirname);
 });
	Gruntfile.js
	package.json
	server.js
	public
	\|- index.html
	\|- scripts
	\|- main.js
	\|- styles
	\|- main.css
	'use strict';
	module.exports = function(grunt) {
	grunt.initConfig({
	express: {
	dev: {
	options: {
	script: 'server.js',
	}
	}
	},
	open: {
	all: {
	path: 'http://localhost:3000'
	}
	},
	watch: {
	options: {
	livereload: true
	},
	express: {
	files: ['server.js'],
	tasks: ['express'],
	options: {
	spawn: false
	}
	},
	public: {
	files: ['public/index.html', 'public/scripts/.js', 'public/styles/.css']
	}
	}
	});
	//require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
	//'grunt-contrib-watch grunt-express-server grunt-open'.split(' ')
	// .forEach(grunt.loadNpmTasks);
	Object.keys(grunt.file.readJSON('package.json').devDependencies)
	.filter(function(dep) { return dep.indexOf('grunt-') === 0; })
	.forEach(grunt.loadNpmTasks);
	grunt.registerTask('default', 'express open watch'.split(' '));
	};
	// HTML file needs to load the following script, or the LiveReload browser plugin must be enabled:
	// <script src="//localhost:35729/livereload.js"></script>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>grunt, express, livereload</title>
	<link rel="stylesheet" href="styles/main.css">
	</head>
	<body>
	<h1>grunt, express, livereload</h1>
	<ul>
	<li>edit public/index.html and watch the browser reload
	<li>edit public/styles/main.css and watch CSS be injected without a browser reload
	<li>edit public/scripts/main.js and watch the browser reload
	<li>edit server.js and watch the server reload, then the browser reload
	</ul>
	<script src="scripts/main.js"></script>
	<!-- with the following script, a LiveReload browser plugin is not required, and if installed, should be turned off -->
	<script src="//localhost:35729/livereload.js"></script>
	</body>
	</html>
	console.log('main.js log test');
	//console.log('another main.js log test');
	{
	"private": true,
	"dependencies": {
	"express": "^4.10.2"
	},
	"devDependencies": {
	"grunt": "^0.4.5",
	"grunt-contrib-watch": "^0.6.1",
	"grunt-express-server": "^0.4.19",
	"grunt-open": "^0.2.3"
	}
	}
	var express = require('express'),
	app = express();
	app.use(express.static(__dirname + '/public'));
	app.use('/bower_components', express.static(__dirname + '/bower_components'));
	// -- main
	var server = app.listen(3000, function() {
	console.log('Listening on port %d. __dirname = %s', server.address().port, __dirname);
	});