Giter VIP home page Giter VIP logo

gulp-directory-map's Introduction

gulp-directory-map

NPM version Build Status Coverage Status Dependency Status Dependency Status

Convert a buffer of files into a JSON representation of the directory structure using gulp

Usage

First, install gulp-directory-map as a development dependency:

npm install --save-dev gulp-directory-map

Then, add it to your gulpfile.js:

var directoryMap = require("gulp-directory-map");
  
gulp.src('app/**/*.html')
  .pipe(directoryMap({
    filename: 'urls.json'
  }))
  .pipe(gulp.dest('dist'));

Given this directory structure...

app
  |_nested-folder-1
    |_nested-folder-1-1
      |_index.html
    |_faq.html
    |_index.html
  |_nested-folder-2
    |_nested-folder-2-1
      |_index.txt
    |_index.html
  |_index.html
  |_index.txt

... this JSON object would be written to dist/urls.json:

{
  "index.html": "index.html",
  "nested-folder-1": {
    "faq.html": "nested-folder-1/faq.html",
    "index.html": "nested-folder-1/index.html",
    "nested-folder-1-1": {
      "index.html": "nested-folder-1/nested-folder-1-1/index.html"
    }
  },
  "nested-folder-2": {
    "index.html": "nested-folder-2/index.html"
  }
}

This is useful for mapping out a directory structure after passing files through a pre-processor, generating data to create navigation during build, and more. Have fun!

API

directory-map(options)

options.filename

Type: String
Default: urls.json

The path to write the directory structure JSON file to.

options.prefix

Type: String Default: none

The a string to prepend to every url.

Given the directory structure above, specifiying prefix: 'prefixed-folder' would generate this JSON:

{
  "prefixed-folder": {
    "index.html": "prefixed-folder/index.html",
    "nested-folder-1": {
      "faq.html": "prefixed-folder/nested-folder-1/faq.html",
      "index.html": "prefixed-folder/nested-folder-1/index.html",
      "nested-folder-1-1": {
        "index.html": "prefixed-folder/nested-folder-1/nested-folder-1-1/index.html"
      }
    },
    "nested-folder-2": {
      "index.html": "prefixed-folder/nested-folder-2/index.html"
    }
  }
}

License

MIT License

Thanks

Thanks to @hparra for creating the generator-gulp-plugin. It has lots of great examples and boilerplate setup, and was used to get this plugin bootstrapped.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.