com browserfy

gulpfile.js

/**
 * Created by Bruno on 01/08/2014.
 */

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    browserify = require('browserify'),
    concat = require('gulp-concat'),
    clean = require('gulp-clean'),
    sass = require('gulp-sass'),
    minifycss = require('gulp-minify-css'),
    notify = require('gulp-notify'),
    less = require('gulp-less'),
    autoprefixer = require('gulp-autoprefixer'),
    annotate = require('gulp-ng-annotate'),
    rename = require('gulp-rename');

// Modules for webserver and livereload
var embedlr = require('gulp-embedlr'),
    refresh = require('gulp-livereload'),
    lrserver = require('tiny-lr')(),
    express = require('express'),
    livereload = require('connect-livereload'),
    livereloadport = 35729,
    serverport = 5000;

// Set up an express server (not starting it yet)
var server = express();
// Add live reload
server.use(livereload({port: livereloadport}));
// Use our 'dist' folder as rootfolder
server.use(express.static('./dist'));
// Because I like HTML5 pushstate .. this redirects everything back to our index.html
server.all('/*', function(req, res) {
    res.sendfile('index.html', { root: 'dist' });
});

// Dev task
gulp.task('dev', ['views', 'styles', 'lint', 'browserify'], function() {
    // Start webserver
    server.listen(serverport);
    // Start live reload
    lrserver.listen(livereloadport);
    // Run the watch task, to keep taps on changes
    gulp.run('watch');
});

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

// Styles task
gulp.task('styles', function() {
    gulp.src('src/content/styles/**/*.scss')
        // The onerror handler prevents Gulp from crashing when you make a mistake in your SASS
        .pipe(sass({onError: function(e) { console.log(e); } }))
        // Optionally add autoprefixer
        .pipe(autoprefixer("last 2 versions", "> 1%", "ie 8"))
        .pipe(rename({suffix: '.min'}))
        .pipe(minifycss())
        // These last two should look familiar now :)
        .pipe(gulp.dest('dist/css/'))
        .pipe(refresh(lrserver))
        .pipe(notify({ message: 'Styles task complete' }));
});

gulp.task('bootstrap', function(){
    return gulp.src('bower_components/bootstrap/less/bootstrap.less')
        .pipe(less())
        .pipe(rename("bootstrap.min.css"))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/css/vendor/'));
});

// Browserify task
gulp.task('vendor-dev', function() {

    console.log('Bundling vendor-dev at:', new Date());

    gulp.src(['/bower_components/**/'])
        .pipe(browserify({
            insertGlobals: true,
            debug: true
        }))
        .pipe(concat('libs.js'))
        .pipe(gulp.dest('dist/js/'))
        .pipe(notify({ message: 'Browserify-vendor task complete' }));
        //nginject
//        .pipe(annotate())

});

// Views task
gulp.task('views', function() {
    // Get our index.html
    gulp.src('src/index.html')
        // And put it in the dist folder
        .pipe(gulp.dest('dist/'))
        .pipe(refresh(lrserver));

    // Any other view files from app/views
    gulp.src('src/views/**/*')
        // Will be put in the dist/views folder
        .pipe(gulp.dest('dist/views/'))
        .pipe(refresh(lrserver));
});

gulp.task('clean', function() {
    return gulp.src(['dist/css/*', 'dist/js/*', 'dist/img/*'], {read: false})
        .pipe(clean());
});

gulp.task('watch', ['lint'], function() {

    // Watch our scripts, and when they change run lint and browserify
    gulp.watch(['src/scripts/*.js', 'src/scripts/**/*.js'],[
        'lint',
        'browserify'
    ]);

    // Watch our sass files
    gulp.watch(['src/styles/**/*.scss'], [
        'styles'
    ]);

    gulp.watch(['src/**/*.html'], [
        'views'
    ]);
});