Basic browserify Gulpfile

.jshintrc

{
  "browser": true,
  "esnext": true,
  "globals": {
    "require": true,
    "exports": true,
    "console": true,
    "module": true,
    "define": true,
    "process": true
  },
  "globalstrict": true,
  "quotmark": true,
  "undef": true,
  "unused": true,
  "strict": false,
  "eqnull": true
}

gulpfile.js

'use strict';
var gulp = require( 'gulp' );
var del = require( 'del' );
var express = require( 'express' );

// For browserify
var transform = require( 'vinyl-transform' );
var browserify = require( 'browserify' );

// load all gulp plugins
var $ = require( 'gulp-load-plugins' )();

// check if we are building and compiling or just serving
var dist = !!$.util.env.build;

// which directory to build/serve to
var destDir = dist ? './dist/' : './.tmp/';

var EXPRESS_ROOT = destDir;

var PORT = $.util.env.port;

var useLr = !$.util.env.nolr;

// print a help message
if ( $.util.env.help ) {
    var string = '    .-.    \n    |U|    \n    | |    \n    | |    \n   _| |_   \n  | | | |-.\n /|     ` |\n| |       |\n|         |\n\\         /\n |       | \n |       | ';
    console.log(string);
    process.exit( 1 );
}

var files = {
    js: {
        main: 'src/scripts/main.js',
        dest: 'app.js',
        all: [ 'src/scripts/**/*.js' ]
    },
    less: {
        main: 'src/styles/main.less',
        dest: 'main.css',
        all: 'src/styles/**/*.less'
    },
    sass: {
        main: 'src/styles/main.scss',
        dest: 'main.css',
        all: 'src/styles/**/*.scss'
    },
    index: {
        main: 'src/index.html',
        dest: 'index.html'
    },
    images: {
        all: [ '../../assets/images/**/*', './assets/images/**/*' ]
    },
    assets: {
        external: [
            '../../assets/**/*',
            '!../../assets/themes/**/*',
            '!../../assets/themes',
            '!../../assets/sass',
            '!../../assets/sass/**/*',
            '!../../assets/images',
            '!../../assets/images/**/*'
        ],
        internal: [
            './assets/**/*',
            '!./assets/common',
            '!./assets/common/**/*',
            '!./assets/sass',
            '!./assets/sass/**/*',
            '!./assets/images',
            '!./assets/images/**/*',
            '!./assets/live_event_viewer',
            '!./assets/live_event_viewer/**/*'
        ],
        all: [ '../../assets/**/*', './assets/**/*', '!./assets/common' ]
    }
};

// Serve our files
var startExpress = function() {
    var app = express();
    if ( useLr ) {
        app.use( require( 'connect-livereload' )() );
    }
    app.use( express.static( '.tmp' ) );
    app.use( express.static( './' ) );
    app.listen( PORT || 8080 );
};

var lr;

var startLivereload = function() {
    lr = require( 'tiny-lr' )();
    lr.listen( 35729 );
};

var notifyLivereload = function( event ) {
    if ( !useLr ) {
        return;
    }

    // `gulp.watch()` events provide an absolute path
    // so we need to make it relative to the server root
    var fileName = require( 'path' ).relative( EXPRESS_ROOT, event.path );

    $.util.log( fileName + ' ' + event.type );

    lr.changed( {
        body: {
            files: [ fileName ]
        }
    } );
};

// delete everything in our dist dir
gulp.task( 'clean', function( cb ) {
    del( [ './dist', './.tmp' ], cb );
} );

// Create a browserify bundle
var scripts = function() {
    var browserified = transform( function( filename ) {
        var b = browserify( {
            entries: filename,
            debug: !dist
        } );
        return b.bundle();
    } );
    return gulp.src( files.js.main )
        .pipe( $.plumber() )
        .pipe( browserified )
        .pipe( $.concat( files.js.dest ) )
        .pipe( dist ? gulp.dest( destDir + 'scripts/' ) : $.util.noop() )
        .pipe( dist ? $.uglify() : $.util.noop() )
        .pipe( $.concat( 'app.min.js' ) )
        .pipe( gulp.dest( destDir + 'scripts/' ) );
};

// compile sass files
var styles = function() {
    return $.rubySass( files.sass.main, {
            sourcemap: !dist
        } )
        .pipe( !dist ? $.sourcemaps.write() : $.util.noop() )
        .pipe( dist ? gulp.dest( destDir + 'styles/' ) : $.util.noop() )
        .pipe( dist ? $.autoprefixer() : $.util.noop() )
        .pipe( dist ? $.cssmin() : $.util.noop() )
        .pipe( $.concat( 'main.min.css' ) )
        .pipe( gulp.dest( destDir + 'styles/' ) );
};

// move assets
var assets = function() {
    var down = gulp.src( files.assets.external, {
            base: '../../'
        } )
        .pipe( gulp.dest( destDir ) );
    var main = gulp.src( files.assets.internal, {
            base: './'
        } )
        .pipe( gulp.dest( destDir ) );
    return require( 'merge-stream' )( down, main );
};

// move index
var index = function() {
    return gulp.src( files.index.main )
        .pipe( gulp.dest( destDir ) );
};

// get hints on style/code functionality
var jshint = function() {
    return gulp.src( 'src/scripts/**/*.js' )
        .pipe( $.jshint( './.jshintrc' ) )
        .pipe( $.jshint.reporter( 'jshint-stylish' ) );
};

gulp.task( 'jshint', jshint);

gulp.task( 'scripts', [ 'clean', 'jshint' ], scripts );
gulp.task( 'styles', [ 'clean' ], styles );

gulp.task( 'index', [ 'clean' ], index );

gulp.task( 'assets', [ 'clean' ], assets );

gulp.task( 'favicon', [ 'clean' ], function() {
    return gulp.src( './assets/images/favicon.ico' )
        .pipe( gulp.dest( destDir ) );
} );

// minify images
gulp.task( 'images', [ 'clean' ], function() {
        return gulp.src( files.images.all )
            .pipe( dist ? $.imagemin() : $.util.noop() )
            .pipe( gulp.dest( destDir + 'assets/images' ) );
} );

// create a source zip file
gulp.task( 'zip', [ 'clean' ], function( cb ) {
    if ( dist ) {
        var src = gulp.src( [ './src/**/*' ], {
            base: './'
        } );
        var common = gulp.src( '../common/**/*', {
            base: '../'
        } );
        require( 'merge-stream' )( src, common )
            .pipe( gulp.dest( function( file ) {
                return destDir + 'zip/' + ( file.base === '../' ? 'assets/' : '' );
            } ) )
            .on( 'end', function() {
                gulp.src( destDir + 'zip/**/*' )
                    .pipe( $.zip( 'src.zip' ) )
                    .pipe( gulp.dest( destDir ) )
                    .on( 'end', function() {
                        del( [ destDir + 'zip/' ], cb );
                    } );
            } );
    } else {
        cb();
    }
} );

gulp.task( 'default', [ 'scripts', 'styles', 'index', 'assets', 'zip', 'favicon', 'images' ], function() {
    // if compile do nothing
    if ( dist ) {
        process.exit( 0 );
    }
    $.util.log( 'Starting Express' );
    startExpress();
    if ( useLr ) {
        $.util.log( 'Starting Live Reload' );
        startLivereload();
    }

    // watch all js files and rebuild browserify on change
    gulp.watch( files.js.all, function( event ) {
        jshint();
        scripts().on( 'end', function() {
            notifyLivereload( event );
        } );
    } );

    // watch all sass files and rebuild css on change
    gulp.watch( files.sass.all, function( event ) {
        styles().on( 'end', function() {
            notifyLivereload( event );
        } );
    } );
} );

package.json

{
  "name": "Demo",
  "version": "0.0.0",
  "description": "Gulpfile browserify",
  "main": "src/scripts/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Einar Norðfjörð",
  "license": "WTFPL",
  "browser": {
    "Highcharts": "./bower_components/highcharts/highcharts.src.js",
    "HighchartsAdapter": "./bower_components/highcharts/adapters/standalone-framework.src.js",
    "Highcharts/heatmap": "./bower_components/highcharts/modules/heatmap.src.js",
    "Highcharts/exporting": "./bower_components/highcharts/modules/exporting.src.js",
    "Highmaps": "./bower_components/highmaps-release/highmaps.src.js"
  },
  "browserify-shim": {
    "Highcharts": {
      "depends": [
        "HighchartsAdapter:HighchartsAdapter"
      ],
      "exports": "Highcharts"
    },
    "Highmaps": {
      "depends": [
        "Highcharts:Highcharts"
      ],
      "exports": "Highcharts"
    },
    "HighchartsAdapter": {
      "exports": "HighchartsAdapter"
    },
    "Highcharts/heatmap": {
      "depends": [
        "Highcharts"
      ]
    },
    "Highcharts/exporting": {
      "depends": [
        "Highcharts"
      ]
    }
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "dependencies": {
    "jquery": "~2.1.1",
    "lodash": "^2.4.1",
    "mithril": "~0.1.23",
    "mithril.elements": "^0.1.2",
    "moment": "~2.8.3"
  },
  "devDependencies": {
    "browserify": "^8.0.3",
    "browserify-shim": "^3.8.2",
    "connect-livereload": "~0.5.0",
    "del": "~0.1.3",
    "express": "~4.10.1",
    "gulp": "~3.8.9",
    "gulp-autoprefixer": "^2.0.0",
    "gulp-concat": "~2.4.1",
    "gulp-cssmin": "^0.1.6",
    "gulp-imagemin": "^2.1.0",
    "gulp-jshint": "^1.9.0",
    "gulp-less": "^1.3.6",
    "gulp-load-plugins": "~0.7.0",
    "gulp-plumber": "^0.6.6",
    "gulp-ruby-sass": "^1.0.0-alpha",
    "gulp-sourcemaps": "^1.2.8",
    "gulp-uglify": "^1.0.1",
    "gulp-util": "~3.0.1",
    "gulp-zip": "^2.0.2",
    "jshint-stylish": "^1.0.0",
    "merge-stream": "^0.1.6",
    "tiny-lr": "~0.1.4",
    "vinyl-transform": "~1.0.0"
  }
}