Minimum requirements to build JavaScript application for testing and production. It saves time to build & refresh new changes

build-app-using-gulp-npm.js

var gulp = require("gulp");
var inject = require("gulp-inject");
var del = require("del");
var connect = require("gulp-connect");

var htmlclean = require('gulp-htmlclean');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var babel = require("gulp-babel");
var browserify = require('gulp-browserify');
var SourceMap        = require('gulp-sourcemaps');

var paths = {
    src: 'app/**/*',
    srcHTML: 'app/**/*.html',
    srcCSS: 'app/**/*.css',
    srcJS: 'app/**/*.js',

    tmp: 'tmp',
    tmpIndex: 'tmp/index.html',
    tmpCSS: 'tmp/**/*.css',
    tmpJS: 'tmp/**/*.js',

    dist: 'dist',
    distIndex: 'dist/index.html',
    distCSS: 'dist/**/*.css',
    distJS: 'dist/**/*.js'
};

//For Devlopment
gulp.task('copyHtml', function() {
    return gulp.src(paths.srcHTML).pipe(gulp.dest(paths.tmp));
});

gulp.task('copyCss', function() {
    return gulp.src(paths.srcCSS).pipe(gulp.dest(paths.tmp));
});

gulp.task('copyJs', function() {
    return gulp.src(paths.srcJS)
                .pipe(SourceMap.init())
                .pipe(babel())
                .pipe(browserify({
                    insertGlobals : true,
                    debug : true
                }))
                .pipe(SourceMap.write('.'))
                .pipe(gulp.dest(paths.tmp));
});

gulp.task('copy', ['copyHtml', 'copyCss', 'copyJs']);

gulp.task('inject', ['copy'], function() {
    var css = gulp.src(paths.tmpCSS);
    var js = gulp.src(paths.tmpJS);
    return gulp.src(paths.tmpIndex)
        .pipe(inject(css, {relative:true}))
        .pipe(inject(js, {relative:true}))
        .pipe(gulp.dest(paths.tmp))
});


gulp.task('startServer', function() {
    return connect.server({
        port: 8888,
        root: paths.tmp,
        livereload: true
    });
})

gulp.task('serve', ["inject", "startServer"], function() {
    console.log('Server Started');
    return gulp.watch(paths.src, ['inject']);
});

//For Production Deployment
gulp.task('copyHtml:dist', function() {
    return gulp.src(paths.srcHTML)
                .pipe(htmlclean())
                .pipe(gulp.dest(paths.dist));
});

gulp.task('copyCss:dist', function() {
    return gulp.src(paths.srcCSS)
                .pipe(concat('style.min.css'))
                .pipe(cleanCSS())
                .pipe(gulp.dest(paths.dist));
});

gulp.task('copyJs:dist', function() {
    return gulp.src(paths.srcJS)
                .pipe(concat('script.min.js'))
                .pipe(uglify())
                .pipe(gulp.dest(paths.dist));
});

gulp.task('copy:dist', ['copyHtml:dist', 'copyCss:dist', 'copyJs:dist']);

gulp.task('inject:dist', ['copy:dist'], function() {
    var css = gulp.src(paths.distCSS);
    var js = gulp.src(paths.distJS);
    return gulp.src(paths.distIndex)
        .pipe(inject(css, {relative:true}))
        .pipe(inject(js, {relative:true}))
        .pipe(gulp.dest(paths.dist))
});

gulp.task('build', ['inject:dist']);

gulp.task('clean', function() {
    del([paths.tmp, paths.dist]);
})