Using gulp and bower for build automation and dependencies management for angularjs app part2

This is the continuation part 2 of the Using gulp and bower for build automation and dependencies management for angularjs app.

In this part I am going to cover  rest of the gulpfile.js which is used to start the express server, reload the browser using browserSync and watching the files.

I will show below how we write a task that I am calling ‘startExpress’ to run the express server instance on port 4000

gulp.task('startExpress',['serve'], function () {

    var app = express();
    app.use(express.static(__dirname + '/website'));
    app.listen(4000);
});

As you see I have also added a dependency to the ‘startExpress’ function this ‘serve’ task will create the browserSync functionality and open the default browser for working with the code:

gulp.task('serve', function () {
    browserSync(
	{
	    proxy: "http://localhost:4000/"
	}
	);
});

Now lets talk about the last task in the gulpfile.js called ‘watch’, this task will help with dutiful watch over all the files that we assign and then also reload the browser after we are done making changes to those files:

gulp.task('watch', ['default','startExpress'], function () { /*Run default the first type command is sent gulp watch*/
    var watchFiles = [
        'public/templates/**/*.html',
		'public/js/**/*.js',
        'public/js/*.js',
        '!public/js/**/*.min.js',
        'public/css/*.css',
        '!public/css/*.min.css'
    ];

    gulp.watch(watchFiles, ['default']).on("change", browserSync.reload);
});

The complete gulpfile.js is listed below:

var gulp = require('gulp');

var gutil = require('gulp-util');

var jshint = require('gulp-jshint');

var usemin = require('gulp-usemin');

var uglify = require('gulp-uglify');

var minifyCss = require('gulp-minify-css');

var express = require('express');

var browserSync = require('browser-sync');

gulp.task('jshint', function () {
    gulp.src('public/js/**/*.js')
	.pipe(jshint())
	.pipe(jshint.reporter('default'));
});

gulp.task('default',['jshint','templates'], function () { /*'startExpress' was here removed to not throw error as of running express*/
    gulp.src('public/templates/index.html')
         .pipe(usemin({
             assetsDir: 'public/',
             css: [minifyCss(), 'concat'],
             js: [uglify(), 'concat']
         }))
         .pipe(gulp.dest('website'));
});

gulp.task('templates', function () {
    gulp.src(['public/templates/**/*.html', '!public/templates/index.html'])
	.pipe(gulp.dest('website/templates/'));

});

gulp.task('startExpress',['serve'], function () {

    var app = express();
    app.use(express.static(__dirname + '/website'));
    app.listen(4000);
});

gulp.task('serve', function () {
    browserSync(
	{
	    proxy: "http://localhost:4000/"
	}
	);
});



gulp.task('watch', ['default','startExpress'], function () { /*Run default the first type command is sent gulp watch*/
    var watchFiles = [
        'public/templates/**/*.html',
		'public/js/**/*.js',
        'public/js/*.js',
        '!public/js/**/*.min.js',
        'public/css/*.css',
        '!public/css/*.min.css'
    ];

    gulp.watch(watchFiles, ['default']).on("change", browserSync.reload);
});

Now we can run gulp using the below statement

gulp watch

 

Leave a Reply

Your email address will not be published. Required fields are marked *