gulp-from-config

gulp-from-config provides ability to run gulp tasks from configs.

Why

• Team work on the same project without risk of breaking other tasks
• Store multiple typical tasks as configs
• Write clear and specific to application gulpfile and keep routine tasks in configs

Caveats

• tests and linter coverage needed

Install

# Don't forget to install gulp globaly
# $ sudo npm install -g gulp
$ npm install gulp gulp-from-config

As simple as

Install plugins that you need:

# This command will install sass compiler for gulp
$ npm install gulp-sass --save-dev

Write tasks in JSON configs and place them in ./configs or any other folder

// Load gulp and gulp-from-config
var gulp = require('gulp'),
    gulpFromConfig = require('gulp-from-config');

    // Set config files path
    gulpFromConfig.setConfigsPath('configs');

    // Create tasks
    gulpFromConfig.createTasks(gulp);

Run them as any other gulp tasks from console (by task name):

# This command will search for build task and run it
$ gulp build

Usage

'use strict';

/**
 *  At the beginning load:
 *  - gulp
 *  - gulp-from-config
 */
var gulp = require('gulp'),
    gulpFromConfig = require('gulp-from-config')
    tasks = []; // declare tasks list array

    /**
     *  First option is to get tasks from configs
     *  and set path to files.
     *
     *  For example to ./configs directory
     */
    gulpFromConfig.setConfigsPath('configs');

    /**
     *  Or define config
     */
    var task = {
        name: "styles", // module task name
            subTasks: [
                {
                    name: "sass", // technical task name
                    dest: "/dest/css", // path to build
                    sourcemaps: true, // enable sourcemaps
                    src: {
                        include: [
                            "/src/sass/*.sass" // files to proceed
                        ],
                        exclude: [
                            "/src/sass/_*.sass" // files to ignore
                        ]
                    },
                    plugins: [
                        {
                            "name": "gulp-sass", // gulp-sass plugin
                            "options": {
                                "outputStyle": "compressed" // will be passed to plugin parameter
                            }
                        }
                    ]
                }
            ]
    };

    /**
     *  And pass it as Array to setConfigs function
     */
    gulpFromConfig.setConfigs([task]);

    /**
     *  Callback function can be triggered on completion of subtasks
     *  Sub task config is passed as parameter
     */
    var callback = function(config) {
        console.log('Sub task config:', config);
    }
    gulpFromConfig.setCallback(callback);

    /**
     *  Define tasks based on configs
     *  Run like normal gulp task 'gulp styles'
     */
    tasks = gulpFromConfig.createTasks(gulp);

    /**
     *  Or if you need to run all of them
     *  pass tasks array to default task
     *  and run 'gulp'
     */
    gulp.task('default', tasks, function() {
        console.log('All tasks are done!');
    });

Example gulpfile.jsmake sure installing them

config

{
    "name": "production", // task name which can be called by 'gulp production'
    "subTasks": [
        {
            "name": "script", // sub task name
            "dest": "/dest/js", // for gulp.dest('/dest/css')
            "sourcemaps": false, // if sourcemaps are required
            "browserify": {
                "transform": ["ractivate"] // Set extra browserify transforms (make sure that transform installed!)
                "file": "prod.js" // You can specify file name. Will be task name by default ('production')
            },
            "watch": [ // if array is empty will watch src files
                "/src/js/*.js", // watch changes on source files
                "/src/js/_*.js"
            ],
            "src": {
                "include": [
                    "/src/js/*.js" // will be processed
                ],
                "exclude": [
                    "/src/js/_*.js" // will be ignored
                ]
            },
            "plugins": [
                {
                    "name": "gulp-uglify", // gulp-uglify plugin (make sure that plugin installed!)
                    "options": {
                        "mangle": false // will be passed into gulp.pipe(uglify(options))
                    }
                }
            ]
        },
        {
            "similarSubTask",
            "dest" "~",
            "src": "~", // use ~ to get any props from previous subtasks
            "plugins": [
                "~gulp-uglify" // use ~PLUGIN_NAME if you wish to copy this plugin config from previous subtask (or use plugins: "~" to repeat all pugins)
            ]
        }
    ]
};

Example production.json

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using gulp.

Release History

• 0.1.0 Initial release

• 0.1.5 Task callback

• 0.2.0 Added browserify support

• 0.3.0 Removed gulp-load-plugins from dependency

• 0.4.0 Nested config folder

• 0.4.1 Use ~ instead of repeating previus config

License

Copyright (c) 2016 kystkysto. Licensed under the MIT license.