Dev Diary: Browsersync, gulp-file-include

Browsersync doesn’t seem to like active server pages (.asp) so the plan is to create a mini static page generator to replace the Classic ASP includes. Then incorporate Browsersync to watch for any changes.

gulp-file-include

Using gulp-file-include I was able to include the header and footer with a simple Gulp task.

var gulp        = require('gulp');
var fileinclude = require('gulp-file-include');
gulp.task('fileinclude', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('build/'));
});

To accommodate Browsersync, the .asp extension is no longer in use and .html takes its place. The HTML template is updated with the new includes and now we have our first little static page generator.

@@include('/includes/landing-pages/head.asp')
<!-- your HTML here -->
@@include('/includes/landing-pages/foot.asp')

That was easier than expected. When the page is built the additional 3,000+ nodes from the header and footer will automatically be added to the index.html file found in the /build/ folder.

Now to automate it on every save.


npm install browser-sync

Browsersync will be used to monitor any changes to the HTML, CSS, and Javascript.

var gulp        = require('gulp');
var fileinclude = require('gulp-file-include');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
// tiny static page generator
gulp.task('fileinclude', function() {
return gulp.src(['*.html'])
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('build/'))
.pipe(browserSync.stream());
});
// process JS files and return to the stream
gulp.task('js', function () {
return gulp.src('scripts/*js')
.pipe(gulp.dest('build/scripts'))
.pipe(browserSync.stream());
});
// process CSS files and return to the stream
gulp.task('css', function () {
return gulp.src('styles/*css')
.pipe(gulp.dest('build/styles'))
.pipe(browserSync.stream());
});
// ensures these tasks are completed before reloading browsers
gulp.task('js-watch', ['js'], reload);
gulp.task('include-watch', ['fileinclude'], reload);
gulp.task('default', ['fileinclude', 'js', 'css'], function () {
    // serve files from the build folder
browserSync.init({
server: {
baseDir: "./build/"
}
});
    // watch files and run tasks
gulp.watch("*.html", ['include-watch']);
gulp.watch("scripts/*.js", ['js-watch']);
gulp.watch("styles/*.css", ['css']);
});

When running the command ‘gulp’ the default task initiates Browsersync. Then .watches constantly keep an eye on any changes to the HTML, CSS, and JavaScript.

When any .html files are updated the include-watch task runs it through the tiny static page generator (gulp-file-include) and places the updated HTML in the /build/ folder. After the task is completed the browser will automatically reload.

JavaScript runs in a similar fashion and places the file in the /build/script/ folder. At this time there is no need to uglify the JavaScript since we have another web-based tool that builds it out for production.

CSS files are much easier and do not require the browser to reload. Once completed the file is sent to the /build/styles/ folder.

A puzzling item that kept me from a solution sooner was Streams. I had to add .pipe(browserSync.stream()); to the fileinclude, js, and css tasks or the browser would only reload it once and quit. Building With Gulp provides an explanation.


Ideas & Notes

That is it for coding today. Now is the time to plan ahead.

  • Completed: Browsersync doesn’t seem to like active server pages (.asp). We’ll have to switch to .html. Problem is, then the includes will not work.
  • Completed: There are over 3000 DOM elements in those includes (header and footer area of the website). Moving them to a single .html file and working around them would be cumbersome.
  • Completed: I think we need a static template generator of sorts.
  • Next: Work it into our current workflow (on the local development server we all share)
  • Transition away from .asp pages completely.
  • After, create a new Yoeman Generator and update documentation.
  • Continue to move closer to developing landing pages locally.

That’s it for today! See you tomorrow!


Disclaimer: The Dev Diary is written every day and previous articles are not updated. Code may work today but glitches will be found tomorrow. Do your due diligence and thoroughly test any code authored here before implementing into your own project. Good luck!

Show your support

Clapping shows how much you appreciated Aaron Kahlhamer’s story.