gulp-from-config-rg

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

Version for rg stack, fork from https://github.com/nanomen/gulp-from-config

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-rg

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-rg
var gulp = require('gulp'),
    gulpFromConfig = require('gulp-from-config-rg');

    // 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-rg
 */
var gulp = require('gulp'),
    gulpFromConfig = require('gulp-from-config-rg')
    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 = {
        expired: "07-22-2018" // task expired date
        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

parameters

If you want run task without expire date, add --no_expire parameter or alias --ne. For example, sudo -u admin gulp tmpl --expire

--no_expire(--ne) parameter

If you want run task without gulp-imagemin plugin, add --imgmin=no parameter. For example, sudo -u admin gulp tmpl --imgmin=no

--imgmin=no parameter

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": {
                // watch if environment: dev
                dev: [ // if array is empty will watch src files
                    "/src/js/*.js", // watch changes on source files
                    "/src/js/_*.js"
                ],
                // unwatch if environment: prod
                prod: false
            },
            "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

watch option examples

{
    ...
    "subTasks": [
        "watch": true
    ]
    ...
}

Example default watch

{
    ...
    "subTasks": [
        "watch": {
            dev: true,
            prod: false
        }
    ]
    ...
}

Example watch in dev environment

{
    ...
    "subTasks": [
        "watch": {
            dev: false, // unwatch in development mode
            prod: [ // if array is empty will watch src files
                "/src/js/*.js", // watch changes on source files
                "/src/js/_*.js"
            ]
        }
    ]
    ...
}

Example watch in prod environment

{
    ...
    "subTasks": [
        "watch":  [ // if array is empty will watch src files
            "/src/js/*.js", // watch changes on source files
            "/src/js/_*.js"
        ]
    ]
    ...
}

Example watch must be array

browserify option example

{
    ...
    "subTasks": [
        "watch": {
            dev: false, // unwatch in development mode
            prod: [ // if array is empty will watch src files
                "/src/js/*.js", // watch changes on source files
                "/src/js/_*.js"
            ]
        }
    ],
    "browserify": {
        "transforms": [
          {
            "name": "eslintify"
          },
          {
            "name": "ractivate",
            "options": {
              "extensions": [
                ".ihtml"
              ]
            }
          }
        ],
        "watchify": {
          "dev": true,
          "prod": false
        }
      },
    ...
}

Example browserify watch

RGRU/gulp-from-config-rg