Last active
August 29, 2015 14:10
-
-
Save mrajcok/ff3a920f97cb8a910e6f to your computer and use it in GitHub Desktop.
grunt, express, livereload (CSS changes injected, JavaScript and HTML changes reload)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Gruntfile.js | |
| package.json | |
| server.js | |
| public | |
| |- index.html | |
| |- scripts | |
| |- main.js | |
| |- styles | |
| |- main.css |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| h1 { | |
| font-size: 20pt; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| console.log('main.js log test'); | |
| //console.log('another main.js log test'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment