gulpfile.js

## Tweak bootstrap by directly editing the bootstrap files hosted on github

//Declare your variables
var gulp = require('gulp'),
    estream = require('event-stream'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    connect = require('gulp-connect'),
    less = require('gulp-less'),
    htmlMin = require('gulp-htmlmin'),
    gutil = require('gulp-util');
    
var jsSource1 = [
    '_/components/js/jquery.js',
    '_/components/js/affix.js',
    '_/components/js/transition.js',
    '_/components/js/tooltip.js',
    '_/components/js/alert.js',
    '_/components/js/button.js'
];  

var jsSource2 =[
    '_/components/js/carousel.js',
    '_/components/js/collapse.js',
    '_/components/js/dropdown.js',
    '_/components/js/modal.js',
    '_/components/js/popover.js',
    '_/components/js/scrollspy.js',
    '_/components/js/tab.js',
    '_/components/js/myscript.js'
];

var lessSources = [
    '_/components/less/bootstrap.less',
    '_/components/less/mystyles.less'
];
var outputDir = '_/builds/production/';

//Split the JS files then Merge later using event-stream
gulp.task('bootstrapJS', function () {
    var js1 = gulp.src(jsSource1);
    var js2 = gulp.src(jsSource2);
    
    return estream.merge(js1, js2)
            .pipe(concat('bootstrap.js'))
            .on('error', gutil.log)
            .pipe(uglify())
            .pipe(gulp.dest(outputDir + 'js'))
            .pipe(connect.reload());
});

//Processes all your LESS into CSS
gulp.task('less', function  () {
    gulp.src(lessSources)
            .pipe(concat('bootstrap.css'))
            .pipe(less({
                compress: true
            }))
            .pipe(gulp.dest(outputDir + 'css'))
            .pipe(connect.reload());
});

//Watch for changes
gulp.task('watch', function () {
    gulp.watch([jsSource1, jsSource2], ['bootstrapJS']);
    gulp.watch([lessSources], ['less']);
    gulp.watch(['index.html'], ['html']);
});

//Start a Node.js Server on the directory
gulp.task('connect', function () {
    connect.server({
        root: outputDir,
        livereload: true
    });
});

//Minify your HTML
gulp.task('html', function () {
   gulp.src('index.html')
           .pipe(htmlMin({ collapseWhitespace: true }))
           .pipe(gulp.dest(outputDir))
           .pipe(connect.reload());
});

//run task in sequence
gulp.task('default', ['html', 'bootstrapJS', 'less', 'connect', 'watch']);

The Package.json:

{
"name": "bootstrapgulpworkflow",
"version": "0.0.0",
"description": "A workflow to tweak bootstrap using gulpjs",
"main": "gulpfile.js",
"repository": {
"type": "git",
"url": "https://github.com/mutuadavid93/BootstrapTweak.git"
},
"author": "David Mutua",
"devDependencies": {
"event-stream": "^3.3.4",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-connect": "^5.0.0",
"gulp-htmlmin": "^2.0.0",
"gulp-less": "^3.1.0",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7"
}
}