gulp-io/tasks/less.js

iio's front-end build tools.

/**
 * LESS
 *
 * We have two primary modes for less - either we compile the code for production
 * use, or we compile it for development. For development we don't minify it, and
 * we add `sourcemaps`, so that it's easy to see where in the less code the css
 * comes from.
 *
 * @param {object} gulp
 * @param {object} plugins
 * @return {object} gulp
 */
module.exports = function(gulp, plugins) {

    /**
     * DEPENDENCIES
     *
     * @autoprefixer {[gulp plug-in]}
     * @cmq {[gulp plug-in]}
     * @less {[gulp plug-in]}
     * @minify {[gulp plug-in]}
     * @base64 {[gulp plug-in]}
     */
    var autoprefixer = require('gulp-autoprefixer'),
        cmq = require('gulp-combine-media-queries'),
        less = require('gulp-less'),
        minify = require('gulp-minify-css'),
        base64 = require('gulp-base64');

    // CONFIGURATIONS
    var config = gulp.config.less;

    // INCLUDE DEVELOPMENT DEPENDENCIES
    try {
        var reload = require('browser-sync').reload;
    } catch (err) {
        gutil.log("Ignoring '" + gutil.colors.red('browser-sync') + "'. File not found.");
    }
    try {
        var sourcemaps = require('gulp-sourcemaps');
    } catch (err) {
        gutil.log("Ignoring '" + gutil.colors.red('gulp-sourcemaps') + "'. File not found.");
    }

    // TASKS
    // LESS -> PRODUCTION
    /**
     * gulp task "less:prod"
     * @param  {[type]}
     * @return {[type]}
     */
    gulp.task('less:prod', config.dependencies, function() {
        gulp.src(plugins.path.join(gulp.project, config.src, config.input))
            .pipe(plugins.plumber())
            .pipe(plugins.less(config.options))
            .pipe(plugins.autoprefixer(config.options.prefix))
            //.pipe(cmq(config.options.cmq))
            .pipe(plugins.minifyCss(config.options.minify))
            .pipe(plugins.rename(config.output))
            .pipe(plugins.base64(config.options.base64))
            .pipe(gulp.dest(plugins.path.join(gulp.project, config.dest)));
    });
    // LESS -> DEVELOPMENT
    gulp.task('less:dev', config.dependencies, function() {
        gulp.src(plugins.path.join(gulp.project, config.src, config.input))
            .pipe(gulp.plumber())
            .pipe(sourcemaps.init())
            .pipe(less(config.options))
            .pipe(autoprefixer(config.options.prefix))
            // .pipe(cmq(config.options.cmq))
            .pipe(minify(config.options.minify))
            .pipe(sourcemaps.write())
            .pipe(gulp.rename(config.output))
            .pipe(base64(config.options.base64))
            .pipe(gulp.dest(plugins.path.join(gulp.project, config.dest)))
            .pipe(reload({
                stream: true
            }));
    });
    // LESS -> WATCH, INJECT OR RELOAD
    gulp.task('less:dev:watch', ['less:dev'], function() {
        this.watch(plugins.path.join(gulp.project, config.src, config.type), ['less:dev']);
    });

    return gulp;

};