Skip to content

Instantly share code, notes, and snippets.

@klugjo
Last active February 16, 2022 13:14
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save klugjo/739ba11d15191f3162b9 to your computer and use it in GitHub Desktop.
Save klugjo/739ba11d15191f3162b9 to your computer and use it in GitHub Desktop.
Basic gulpfile.js for a static website with browser auto refresh
// Add our dependencies
var gulp = require('gulp'), // Main Gulp module
concat = require('gulp-concat'), // Gulp File concatenation plugin
open = require('gulp-open'), // Gulp browser opening plugin
connect = require('gulp-connect'); // Gulp Web server runner plugin
// Configuration
var configuration = {
paths: {
src: {
html: './src/*.html',
css: [
'./src/css/bootstrap.min.css',
'./src/css/main.css'
]
},
dist: './dist'
},
localServer: {
port: 8001,
url: 'http://localhost:8001/'
}
};
// Gulp task to copy HTML files to output directory
gulp.task('html', function() {
gulp.src(configuration.paths.src.html)
.pipe(gulp.dest(configuration.paths.dist))
.pipe(connect.reload());
});
// Gulp task to concatenate our css files
gulp.task('css', function () {
gulp.src(configuration.paths.src.css)
.pipe(concat('site.css'))
.pipe(gulp.dest(configuration.paths.dist + '/css'))
.pipe(connect.reload());
});
// Gulp task to create a web server
gulp.task('connect', function () {
connect.server({
root: 'dist',
port: configuration.localServer.port,
livereload: true
});
});
// Gulp task to open the default web browser
gulp.task('open', function(){
gulp.src('dist/index.html')
.pipe(open({uri: configuration.localServer.url}));
});
// Watch the file system and reload the website automatically
gulp.task('watch', function () {
gulp.watch(configuration.paths.src.html, ['html']);
gulp.watch(configuration.paths.src.css, ['css']);
});
// Gulp default task
gulp.task('default', ['html', 'css', 'connect', 'open', 'watch']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment