gulpfile.js

'use strict';

// Native dependencies
var path        = require('path');
var exec        = require('child_process').exec;
var util        = require('util');

// External dependencies
var gulp        = require('gulp');
var gutil       = require('gulp-util');
var browserSync = require('browser-sync');
var del         = require('del');
var vinylPaths  = require('vinyl-paths');
var mergeStream = require('merge-stream');
var inquirer    = require('inquirer');

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

// Read current project data
var BOWER = require('./bower.json');

// Constants
var SRC_DIR     = './src';
var DIST_DIR    = './';
var DEMO_DIR    = './demo';
var TMP_DIR     = './tmp';

var LESS_DIR = [SRC_DIR + '/**/*.less'];
var CSS_DIR  = [SRC_DIR + '/**/*.css'];
var JS_DIR   = [SRC_DIR + '/**/*.js'];
var HTML_DIR = [SRC_DIR + '/**/*.html', DEMO_DIR + '/**/*.html'];

/////////////////////
// auxiliary tasks //
/////////////////////

/**
 * Cleans resources
 */
function _clean() {
    del.sync(TMP_DIR);
}

/**
 * Prepares components for vulcanization
 */
function _tmp() {

    var copySRC = gulp.src(SRC_DIR + '/*')
        .pipe($.rename(function (p) {
            p.dirname = BOWER.name;
        }))
        .pipe(gulp.dest(TMP_DIR));

    var copyBOWER = gulp.src('bower_components/**/*')
        .pipe(gulp.dest(TMP_DIR));

    return mergeStream(copySRC, copyBOWER);
}
gulp.task('_clean', _clean);
gulp.task('_tmp', ['_clean'], _tmp);

/////////////////////
// auxiliary tasks //
/////////////////////


/////////////////
// build tasks //
/////////////////

/**
 * Task for compiling less
 */
function _less() {

    return gulp.src(LESS_DIR)
        .pipe($.changed(SRC_DIR, { extension: '.css' }))
        .pipe($.duration('Compiling .less files'))
        .pipe($.less())
        .on('error', $.notify.onError({
            title: 'Less compiling error',
            message: '<%= error.message %>',
            open: 'file:///<%= error.filename %>',
            sound: 'Glass',
            // Basso, Blow, Bottle, Frog, Funk, Glass, Hero,
            // Morse, Ping, Pop, Purr, Sosumi, Submarine, Tink
            icon: path.join(__dirname, 'logo.png'),
        }))
        .pipe($.autoprefixer({
            browsers: [
                'ie >= 10',
                'ie_mob >= 10',
                'ff >= 30',
                'chrome >= 34',
                'safari >= 7',
                'opera >= 23',
                'ios >= 7',
                'android >= 4.4',
                'bb >= 10'
            ],
            cascade: false,
        }))
        .pipe($.minifyCss())
        // Put files at source dir in order to use them for vulcanization
        .pipe(gulp.dest(SRC_DIR))
        .pipe($.size({ title: 'less' }));
}

/**
 * Function for vulcanize task
 */
function _vulcanize() {

    // Message to be prepended to all .css files generated via less
    var message = [
        '<!--',
        'This file was generated by VULCANIZE.',
        'All modifications to it will be lost, mercilessly!',
        'Source code is at ./src directory ;)',
        '-->\n\n',
    ].join('\n');

    // Path to the component file
    var componentPath = path.join(TMP_DIR, BOWER.name, BOWER.name + '.html');
    // Excludes
    var excludes = [
        // Exclude polymer, as it is a common dependency
        path.join(TMP_DIR, '/polymer/polymer.html'),
    ];

    return gulp.src(componentPath)
        .pipe($.vulcanize({
            excludes: excludes,
            stripComments: true,
            inlineCss: true,
            inlineScripts: true,
            stripExcludes: false,
        }))
        .pipe($.header(message))
        .pipe(gulp.dest(DIST_DIR))
        .pipe($.size({title: 'vulcanize' }));    
}

// Register tasks
gulp.task('less', _less);
gulp.task('vulcanize', ['less', '_tmp'], _vulcanize);
gulp.task('distribute', ['vulcanize'], _clean);

/////////////////
// build tasks //
/////////////////


///////////////////////
// development tasks //
///////////////////////

/**
 * Serves the application
 */
gulp.task('serve', function () {

    browserSync({
        port: 4000,
        server: {
            baseDir: './',
        },
        serveStatic: ['bower_components'],
        open: 'demo/index.html',
        // tunnel: true
    });
});

/**
 * Watches for changes and reloads the browser
 */
gulp.task('watch', function () {

    // Watch files for changes
    // Using gulp-watch plugin because the default gulp.watch method does
    // not watch for newly added files. Porbably must revise soon.
    // http://stackoverflow.com/questions/22391527/
    // gulps-gulp-watch-not-triggered-for-new-or-deleted-files
    $.watch(LESS_DIR, _less);

    // Reload
    var reloadDirs = JS_DIR.concat(CSS_DIR).concat(HTML_DIR);
    $.watch(reloadDirs, browserSync.reload);
});

// Serve & watch
gulp.task('develop', ['less', 'serve', 'watch']);
gulp.task('default', ['develop']);