alexyz

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}');
*/

Out of the box there is no animation on these.  I tried for a CSS3 transition but couldn’t get one. If anyone finds one do tell. Anyhow, my current project has 3 accordion levels, the main off-canvas accordion, a second one loaded dynamically via AJAX into the main content area, and third level of accordions nested in each of the 2nd level accordions.

First, I gave them each an id, so that I could address them easily and individually:

<dl class=”accordion firstLevelAccordions” data-accordion> (in the ‘off-canvas’ left)

<dl class=’accordion secondLevelAccordions’ data-accordion> (in the main content right section, content thereof loaded dynamically via AJAX)

<dl class=’accordion thirdLevelAccordions’ data-accordion> (this one nested inside the secondLevelAccordions)

After the dynamic content load, Foundation makes you reflow to find/activate the new content:

$(document).foundation(‘reflow’);

The initialization of each accordion (you could merge these into one function, or parameter-ize the class piece, but for simplicity’s sake, this works just fine):

$(function(){ // onready

// first level off-canvas menu accordions
$(document).on(“click”, “.firstLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.firstLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().addClass(‘active’).children(“.content”).slideToggle(1000);
})

$(document).on(“click”, “.firstLevelAccordions > dd.active > a”, function (event) {
$(“.firstLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().removeClass(‘active’);//.find(“.content”).slideToggle(“fast”);
})

// second level article list/detail accordions
$(document).on(“click”, “.secondLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.secondLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().addClass(‘active’).children(“.content”).slideToggle(1000);
})

$(document).on(“click”, “.secondLevelAccordions > dd.active > a”, function (event) {
$(“.secondLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().removeClass(‘active’);//.find(“.content”).slideToggle(“fast”);
})

// third level nested accordions
$(document).on(“click”, “.thirdLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.thirdLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().addClass(‘active’).children(“.content”).slideToggle(1000);
})

$(document).on(“click”, “.thirdLevelAccordions > dd.active > a”, function (event) {
$(“.thirdLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().removeClass(‘active’);//.find(“.content”).slideToggle(“fast”);
})

});