Last active
August 29, 2015 14:10
-
-
Save mrajcok/135da63e4cc3a808edab to your computer and use it in GitHub Desktop.
gulp, express, nodemon, BrowserSync + html-injector, jshint
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
| gulpfile.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'; | |
| // If you don't want to use htmlInjector (I think it is still under development) | |
| // - comment-out lines labeled 1, 2, 5 | |
| // - uncomment the function labled 3, and the line labeled 4 | |
| var gulp = require('gulp'), | |
| browserSync = require('browser-sync'), | |
| htmlInjector = require('bs-html-injector'), // 1 https://github.com/shakyshane/html-injector | |
| nodemon = require('gulp-nodemon'), | |
| jshint = require('gulp-jshint'); | |
| gulp.task('browser-sync', ['nodemon'], function() { | |
| browserSync.use(htmlInjector, {}); // 2 | |
| browserSync({ | |
| proxy: "localhost:3000", // local express app address | |
| port: 5000, // use *different* port than above | |
| online: false, | |
| minify: false | |
| }); | |
| }); | |
| // https://github.com/sogko/gulp-recipes/tree/master/browser-sync-nodemon-expressjs | |
| gulp.task('nodemon', function (cb) { | |
| var called = false; | |
| return nodemon({ | |
| script: 'server.js', | |
| watch: ['server.js'], | |
| }) | |
| .on('start', function () { | |
| if (!called) { | |
| called = true; | |
| cb(); | |
| } else { | |
| //console.log('calling reload in 1s'); | |
| setTimeout(function() { | |
| browserSync.reload({ stream: false }); | |
| }, 1000); | |
| } | |
| }) | |
| // The logic below was moved to the start event, since that event fires | |
| // closer to when the node process actually restarts. | |
| //.on('restart', function () { | |
| //console.log('calling reload in 1s'); | |
| //setTimeout(function () { | |
| // browserSync.reload({ stream: false }); | |
| //}, 1000); | |
| //}); | |
| }); | |
| gulp.task('js-client', function() { | |
| return gulp.src('public/scripts/*.js') | |
| .pipe(jshint('.jshintrc')) | |
| .pipe(jshint.reporter('default')); | |
| }); | |
| gulp.task('js-server', function() { | |
| return gulp.src('server.js') | |
| .pipe(jshint('.jshintrc')) | |
| .pipe(jshint.reporter('default')); | |
| }); | |
| gulp.task('css', function() { | |
| return gulp.src('public/styles/*.css') | |
| .pipe(browserSync.reload({ stream: true })); | |
| }) | |
| //gulp.task('bs-reload', function () { // 3 | |
| // browserSync.reload(); | |
| //}); | |
| gulp.task('default', ['browser-sync'], function () { | |
| gulp.watch('server.js', ['js-server']); | |
| gulp.watch('public/scripts/*.js', ['js-client', browserSync.reload]); | |
| gulp.watch('public/styles/*.css', ['css']); | |
| //gulp.watch('public/*.html', ['bs-reload']); // 4 | |
| gulp.watch('public/*.html', htmlInjector); // 5 | |
| }); |
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>gulp, express, nodemon, BrowserSync + html-injector, jshint</title> | |
| <link rel="stylesheet" href="styles/main.css"> | |
| </head> | |
| <body> | |
| <h1>gulp, express, nodemon, BrowserSync + html-injector, jshint</h1> | |
| <ul> | |
| <li>edit public/index.html and watch BrowserSync update without reloading | |
| <li>edit public/styles/main.css and watch BrowserSync inject CSS without reloading. However, note that | |
| if you open up Chrome developer tools, then the page will reload rather than inject CSS from then on | |
| (not sure why). | |
| <li>edit public/scripts/main.js and watch BrowserSync reload | |
| <li>edit server.js and watch nodemode relaunch the server, then BrowserSync reload | |
| </ul> | |
| <script src="scripts/main.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'); |
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.4" | |
| }, | |
| "devDependencies": { | |
| "browser-sync": "^1.7.1", | |
| "bs-html-injector": "^1.1.0", | |
| "gulp": "^3.8.10", | |
| "gulp-jshint": "^1.9.0", | |
| "gulp-nodemon": "^1.0.4" | |
| }, | |
| } |
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"; | |
| var express = require('express'); | |
| var app = express(); | |
| app.use(express.static(__dirname + '/public')); | |
| 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