Archive for the ‘Build tools: Grunt, Gulp’ Category

trying out Gulp, node-modules for browerify, babel (to support/convert es6), & bootstrap

Monday, October 5th, 2015

gulpfile.js

var gulp = require('gulp'),
    babel = require('gulp-babel'),
    browserify = require('gulp-browserify'),
    jshint = require('gulp-jshint'),
    less = require('gulp-less'),
    path = require('path'),
    gp_concat = require('gulp-concat'),
    gp_rename = require('gulp-rename'),
    gp_uglify = require('gulp-uglify'),
    gp_sourcemaps = require('gulp-sourcemaps'),
    mainBowerFiles = require('main-bower-files'),
    minifyCSS = require('gulp-minify-css');

// Initial bootstrap setup
// Copy bootstrap from bower-components to public/lib
gulp.task('bower', function() {
    return gulp.src(mainBowerFiles(), {
            base: 'bower_components'
        })
        .pipe(gulp.dest('public/lib'));
});
// overwrite variables.less with our own edited version
gulp.task('bootstrap:prepareLess', ['bower'], function() {
    return gulp.src('public/lib/styles/less/variables.less')
        .pipe(gulp.dest('public/lib/bootstrap/less'));
});
// compile bootstrap less to css
gulp.task('bootstrap:compileLess', ['bootstrap:prepareLess'], function() {
    return gulp.src(['bower_components/bootstrap/less/bootstrap.less'])
    //return gulp.src('public/lib/bootstrap/less/bootstrap.less')
        .pipe(less())
        .pipe(gp_rename('bootstrap.css'))
        .pipe(gulp.dest('public/lib/styles/css'));
});
// End bootstrap setup

// concatenate css files altogether and minify
gulp.task('minifyCSS', function(){
    return gulp.src(['public/lib/styles/css/*.css'])
        .pipe(gp_concat('all.css'))
        .pipe(minifyCSS())
        .pipe(gp_rename('styles.min.css'))
        .pipe(gulp.dest('public/lib/styles/dist'));
});


// Lint/jshint JS
gulp.task('lint', function() {
    return gulp.src('public/lib/js/main.js')
        .pipe(jshint({'esnext': true}))
        .pipe(jshint.reporter('default'));
});


// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src(['public/lib/js/main.js', 'pubilc/lib/bootstrap/dist/js/bootstrap.js'])
        .pipe(browserify({
            insertGlobals : true,
            debug : false
        }))
        .pipe(babel({compact: false}))
        .pipe(gp_concat('all.js'))
        .pipe(gp_rename('bundle.min.js'))
        .pipe(gp_uglify({ mangle: false }))
        .pipe(gulp.dest('public/lib/js/dist'));
});


// Just convert ES6
var paths = {
    es6: ['es6/myapp.js'],
    es5: 'es5',
    // Must be absolute or relative to source map
    sourceRoot: ('es6'),
};
gulp.task('babel', function () {
    return gulp.src(paths.es6)
        .pipe(gp_sourcemaps.init())
        .pipe(babel({compact: false}))
        .pipe(gp_sourcemaps.write('.', { sourceRoot: paths.sourceRoot }))
        .pipe(gp_rename('bundle.min.js'))
        .pipe(gulp.dest(paths.es5));
});


// start watch CSS & JS files for changes
gulp.task('watch', function() {
    gulp.watch(['public/lib/styles/**/*.*', 'public/lib/js/*.js'], ['lint', 'scripts', 'minifyCSS']);
});


// Default
gulp.task('default', ['lint', 'scripts', 'minifyCSS'], function(){});

Now let’s have a look at main.js using browerify’s require:

/*jshint strict:false */

let loadUnderscore = require('./loadunderscore');
loadUnderscore.logUnderscoreVersion();

let myUtils = require('./myutils');
myUtils.logDate();
myUtils.logMonth();

window.$ = window.jQuery = require('jquery');
require('jquery-ui');

// ES6 experiments, these ARE converted
var getName = () => "Hetal";

$(function(){
	$('#main').text('rewritten 10');
	console.log( $().jquery );
	/*alert('changed!');*/
	
	$( "#draggable" ).draggable();
});

// ES6 experiments, these are not converted/supported
/*
let developer = 'Alex';
console.log('Developer: ${developer}!');

let book = {
	author: 'John',
    title: 'Some Fancy Title'
};

$('#main').append('If you like ${author.name}, then read the new book, ${book.title}');
*/