Skip to content

update gulpfile to auto-open browser and auto-reload on sass/js changes #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RJ-Russell wants to merge 1 commit into
base: development
Choose a base branch
from
Open

update gulpfile to auto-open browser and auto-reload on sass/js changes #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
225 changes: 144 additions & 81 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
let gulp = require('gulp');
let del = require('del');
let bs = require('browser-sync').create();
let rs = require('gulp-run-sequence');
let plugins = require('gulp-load-plugins')();
let browserSync = require('browser-sync').create();
let livereload = require('gulp-livereload');

// File paths
const VENDOR_SCRIPTS = [
Expand All @@ -21,53 +21,65 @@ const IMAGE_PATH = 'client/assets/images/*';
const FONT_PATH = 'client/assets/fonts/*';
const INDEX_PATH = 'client/assets/index.html';

// Lint
gulp.task('lint', function() {
gulp
.src(CLIENT_SCRIPTS_PATH)
.pipe(plugins.jshint())
.on('error', plugins.util.log);
});

// Images
gulp.task('images', function() {
console.log('---Starting Images task---');
});
function onError(err) {
plugins.util.log(
plugins.util.colors.red('\nError (' + err.plugin + '): ' + err.message)
);
this.emit('end');
}

// Assets
// ===============================================
// ASSETS
gulp.task('copyImages', function() {
console.log('---Starting Copy Images task---');
return gulp
.src([IMAGE_PATH])
.pipe(gulp.dest('public/images'))
.on('error', plugins.util.log)
.pipe(livereload());
.pipe(
plugins.plumber({
errorHandler: onError
})
)
.pipe(gulp.dest('public/images'));
});

gulp.task('copyFonts', function() {
console.log('---Starting Copy Fonts task---');
return gulp
.src([FONT_PATH])
.pipe(gulp.dest('public/fonts'))
.on('error', plugins.util.log)
.pipe(livereload());
.pipe(
plugins.plumber({
errorHandler: onError
})
)
.pipe(gulp.dest('public/fonts'));
});

// Index
gulp.task('copyIndex', function() {
console.log('---Starting Copy Index task---');
return gulp
.src([INDEX_PATH])
.pipe(gulp.dest('public'))
.on('error', plugins.util.log)
.pipe(livereload());
.pipe(
plugins.plumber({
errorHandler: onError
})
)
.pipe(gulp.dest('public'));
});
// END ASSETS
// ===============================================

// Styles
// ===============================================
// STYLES
gulp.task('styles', function() {
console.log('---Starting Styles task---');
return gulp
.src('client/sass/main.scss')
.pipe(
plugins.plumber({
errorHandler: onError
})
)
.pipe(plugins.sourcemaps.init())
.pipe(plugins.autoprefixer())
.pipe(
Expand All @@ -77,11 +89,25 @@ gulp.task('styles', function() {
)
.pipe(plugins.sourcemaps.write())
.pipe(gulp.dest('public/styles'))
.on('error', plugins.util.log)
.pipe(livereload());
.pipe(bs.stream());
});
// END STYLES
// ===============================================

// ===============================================
// SCRIPTS
// Lint
gulp.task('lint', function() {
gulp
.src(CLIENT_SCRIPTS_PATH)
.pipe(
plugins.plumber({
errorHandler: onError
})
)
.pipe(plugins.jshint());
});

// Vendor Scripts
gulp.task('vendorScripts', function() {
console.log('---Starting Vendor Scripts task---');
return gulp
Expand All @@ -106,66 +132,103 @@ gulp.task('clientScripts', ['lint'], function() {
.pipe(plugins.concat('bundle.js'))
.pipe(plugins.uglify())
.pipe(plugins.sourcemaps.write())
.pipe(gulp.dest('public/scripts'))
.pipe(livereload());
});

// Server Scripts
gulp.task('serverScripts', function() {
console.log('---Starting Server Scripts task---');
return gulp.src([SERVER_SCRIPTS_PATH]).pipe(livereload());
.pipe(gulp.dest('public/scripts'));
});

// gulp.task('server', function () {
// console.log('---Starting Watch task---');
// require('./server/server.js');
// livereload.listen();
// });
// END SCRIPTS
// ===============================================

gulp.task('clean', function() {
return del.sync(['public/']);
});

// Default
gulp.task(
'default',
[
'lint',
'clean',
'copyFonts',
'copyImages',
'copyIndex',
'styles',
'vendorScripts',
'clientScripts',
'serve'
],
function() {
console.log('---Starting Default task---');
}
);

// // Watch
// gulp.task('watch', function () {
// console.log('---Starting Watch task---');
// gulp.watch([STYLE_PATH], ['styles']);
// gulp.watch(CLIENT_SCRIPTS_PATH, ['clientScripts']);
// gulp.watch([INDEX_PATH], ['copyIndex']);
// });

// Serve
gulp.task('serve', function() {
// browserSync.init({
// proxy: 'localhost:3000'
// });
// gulp.watch('*.html').on('change', browserSync.reload);

console.log('---Starting Serve task---');
require('./server/server.js');
livereload.listen();
// ===============================================
// SERVER
gulp.task('server', function() {
console.log('---Starting Server Scripts task---');
let serverStarted = false;
return plugins
.nodemon({
script: './server/server.js',
ext: './server/**/*.js',
env: {
NODE_ENV: 'development'
},
watch: [SERVER_SCRIPTS_PATH]
})
.on('start', function() {
if (!serverStarted) {
console.log('---- Server Initial Start ----');
serverStarted = true;
cb();
}
})
.on('restart', function() {
console.log('---- Server restart ----');
bs.reload();
})
.once('quit', function() {
console.log('---- Server exiting ----');
process.exit();
});
});
// END SERVER
// ===============================================

// ===============================================
// BROWSER SYNC
gulp.task('browser-sync', ['server'], function() {
bs.init(null, {
proxy: 'http://localhost:3000',
port: 3001,
notify: false,
reloadDelay: 1500
});
});
// END BROWSER SYNC
// ===============================================

// ===============================================
// WATCH
gulp.task('watch', ['browser-sync'], function() {
gulp.watch(INDEX_PATH, ['copyIndex']);
gulp.watch(IMAGE_PATH, ['copyImage']);
gulp.watch(CLIENT_SCRIPTS_PATH, ['clientScripts']);
gulp
.watch(CLIENT_SCRIPTS_PATH, ['clientScripts-watch'])
.on('change', bs.reload);
gulp.watch(STYLE_PATH, ['styles']);
gulp.watch(SERVER_SCRIPTS_PATH, ['serverScripts']);
});

gulp.task('clientScripts-watch', ['clientScripts'], function(done) {
bs.reload();
});
// END WATCH
// ===============================================

// ===============================================
// RUN SEQUENCE
gulp.task('run-seq', function(cb) {
rs(
'clean',
[
'lint',
'copyFonts',
'copyImages',
'copyIndex',
'styles',
'vendorScripts',
'clientScripts'
],
'watch',
cb
);
});
// END RUN SEQUENCE
// ===============================================

// ===============================================
// DEFAULT
gulp.task('default', ['run-seq'], function() {
console.log('---Starting Default task---');
});
// END DEFAULT
// ===============================================
11 changes: 6 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
"name": "official_bootcampers_website",
"version": "1.0.0",
"description": "Bootcampers Collective website",
"repository": "https://github.com/BootcampersCollective/OfficialBCWebsite.git",
"repository":
"https://github.com/BootcampersCollective/OfficialBCWebsite.git",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
Expand Down Expand Up @@ -36,17 +37,17 @@
"gulp-babel": "^7.0.0",
"gulp-concat": "^2.6.1",
"gulp-jshint": "^2.0.4",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.5.0",
"gulp-ng-annotate": "^2.0.0",
"gulp-nodemon": "^2.2.1",
"gulp-plumber": "^1.1.0",
"gulp-run-sequence": "^0.3.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-strip-json-comments": "^2.1.0",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8",
"jshint": "^2.9.5",
"livereload": "^0.6.2",
"node-sass": "^4.5.3",
"nodemon": "^1.11.0"
"node-sass": "^4.5.3"
}
}
Loading