gulp-lib-generator v2.1.13

Gulp Lib Generator

A gulp task that creates a mass exports file from directories that contain exported vars, functions, etc. Great for use with frameworks!

Install

npm install --save-dev gulp-lib-generator
# or
npx install --save-dev gulp-lib-generator

Setup

const gulp = require('gulp');
const { createLib, createRelativePath } = require('gulp-lib-generator');


const libOptions = [
  {
    type: 'REQUIRE',
    libFile: 'index.js',
    ignore: ['^_', '^(.(?!\.js$))+$'],
    src: './_dev/gulp_tasks/lib',
    dest: './_dev/gulp_tasks/',
  },
  {
    type: 'IMPORT',
    libFile: 'index.js',
    ascending: false,
    src: './src/views/templates',
  },
  {
    type: 'SASS',
    libFile: 'main.sass',
    ignore: ['^_demo']
    src: './dev/sass/styles/lib',
    dest: './dev/sass/styles/',
  },
  {
    src: './src/api/routes/',
    customFormat(fileInDir, fileIndex, isLastFile, fullOptions) {
      let customLibFormat = '';
      // ... custom library formatting ...
      customLibFormat += 'formatting logic';
      return customLibFormat; // must return a string
    }
  }
];

gulp.task('lib', gulp.series( createLib(libOptions) ));

// # command in terminal:
// $ gulp lib

Use

Required

src: // REQUIRED
  './path/to/library/directory/' // Fully qualified paths are auto generated

Optional

type: // OPTIONAL
  'CUSTOM'  // user provided `customFormat` function will be used
  'REQUIRE' // for module.exports files
  'IMPORT'  // for exports files
  'SASS'    // for SASS || SCSS files

libFile: // OPTIONAL
  'index.js' // custom name of library file

ascending: // OPTIONAL
  true      // export files in ascending order: [_, 0 -> 99999 , A -> Z]
  false     // export files in descending order: [Z -> A, 9999 -> 0, _]

ignore: // OPTIONAL
  []        // array of string values of file names to not include in library. Regex strings are accepted

dest: // OPTIONAL
  './path/to/library/directory/' // Fully qualified paths are auto generated
                                // if none provided the `src` path will be used

customFormat: // OPTIONAL
  function(fileName, index, isLastFile, self) { return null }
  // passed arguments are:
  //  - fileName: current file name from iterated files in directory
  //  - index: index of file position of directory files array
  //  - isLastFile: true if is the last file in directory, else false
  //  - self: the full object of library options, including defaults if applicable

Defaults

{
  type: 'REQUIRE',
  libFile: 'index.js',
  ignore: [],
  ascending: true,
  src: null,
  dest: null,
  customFormat(fileName, index, isLastFile, self) { return null },
}

const gulp = require('gulp');
const path = require('path');
const { createLib, createRelativePath } = require('gulp-lib-generator');

const { PWD: ROOT_DIR } = process.env;

const libOptions = [
  {
    type: 'CUSTOM',
    src: './_dev/gulp_tasks/lib/',
    // custom formatting function
    customFormat(fileName, index, isLastFile, self) {
      let tempLibContent = '';
      const [ file ] = fileName.split('.');
      // start library file line
      if(index === 0) {
        tempLibContent += 'module.exports = {';
      }
      // format for files to be exported as an object
      tempLibContent += `\n\t${file}: require('${createRelativePath(self.src, './'+file)}'),`;
      // final library file line
      if(isLastFile) {
        tempLibContent += '\n};';
      }
      // must return string to be written to lib file
      return tempLibContent;
    }
  }
];

gulp.task('lib', gulp.series( createLib(libOptions) ));

// './_dev/gulp_tasks/lib/index.js'

module.exports = {
  component_1: require('fully/qualified/path/to/component_1'),
  component_2: require('fully/qualified/path/to/component_2'),
};

Why use a library file

Old way of importing components

├── components_dir/
    ├── component_1.js
    ├── component_2.js
    ├── component_3.js
    └── component_4.js

using require();

const component_1 = require('./path/to/components_dir/component_1');
const component_2 = require('./path/to/components_dir/component_2');
const component_3 = require('./path/to/components_dir/component_3');
const component_4 = require('./path/to/components_dir/component_4');

using import

import component_1 from './path/to/components_dir/component_1';
import component_2 from './path/to/components_dir/component_2';
import component_3 from './path/to/components_dir/component_3';
import component_4 from './path/to/components_dir/component_4';

Importing components as a library

├── components_dir/
    ├── component_1.js
    ├── component_2.js
    ├── component_3.js
    ├── component_4.js
    └── index.js  # <--- new generated component library for this directory

using require();

const {
  component_1,
  component_2,
  component_3,
  component_4,
} = require('./path/to/components_dir');

import {
  component_1,
  component_2,
  component_3,
  component_4,
} from './path/to/components_dir';

Notice

// ./path/to/components_dir/component_1.js

const component_1 = () => {
  // ... component logic ...
  return some_data;
}

export { component_1 };