Generate a web gallery presenting graphic components from various lib (Ext, React, etc...)
Last updated 5 years ago by daolf .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install grunt-gallery 
SYNC missed versions from official npm registry.


Generate a web gallery presenting graphic components from various lib (ExtJS, React, etc...)

Build Status Codacy Badge Code Climate


This plug-in was developed during a 3 months intership at Lyra Network

Getting Started

This plugin requires Grunt.

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-gallery --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:


The "gallery" task

Documenting your components

All you have to do is add tag within bloc comment like javadoc.

WARNING : only put those tags in bloc comment (/* */) no single comment line.

Currently this plug-in support two tags :

  • @example (instantion code for your component)
  • @info (complementary information) _ @tags (if you want to add tags for component, all tags must be separated by ',')

Others informations (inherit, dependencies, ... ) are directly extracted from the code.

Generating the gallery

In your project's Gruntfile, add a section named gallery to the data object passed into grunt.initConfig().

example :

    var persoTitle = function( path, compName) {
        return 'test'+compName;
        gallery: {
            Ext : {
                title : 'Ext gallery',
                files: {
                    src : './privateRessources/extComp',
                    dest : './dist/gallery'
                template : './views/gallery.jade',
                dependencies : {
                    js : ['ext.min.js'],
                    css : 'custom.css',
                    images : '/images/'
                compNameCallback : persoTitle,
                regexps : {
                    inherit: {
                        pattern : '(?:Ext.extend\\()(.*),',
                        flags : 'g'


The future title of the gallery, default : 'Gallery'



The directory containing all the component you want to generate gallery from. Be careful, only put one and only one directory, multiple source dir is currently not supported.


Directory you want to put the gallery in.


The jade template where each component will be rendered, it is important to note that in order to correctly render component for some lib you will have to slightly modify the folowing template by changing instantiation js code.


    doctype html
            meta(http-equiv="content-type", content="text/html; charset=UTF-8")
            title #{name}
            link(rel='stylesheet', type='text/css', href='../css/iframe.css')
        script(type='text/javascript', src='../js/iframe.js')
        script(type='text/javascript', src='../'+file)
        each ex in example
            // has to be modify
                | Ext.onReady( function() {
                | #{ex} 
                | });


Write here all the dependencies of your templates, all those files will be later concat in a single file.


An optional callback you can define if you want to add additional information when you display name of the component (path for example). Callback will take in parameter path of the component and its name, it should return the future name of the component.



You should define here the regexp making it possible to catch inherithance for your comp. The one given in example is for extJS.

Output directory

    |__ css/                   contains css concat files 
          |__ gallery.css
          |__ index.css
          |__ iframe.css
    |__ fonts/
    |__ gallery/               contains the html page with comp enbeded in iframe + other information
          |__ comp1.html
          |__ comp2.html
    |__ iframe/                contains the html only displaying component, generated from template passed in parameter
          |__ comp1.html
          |__ comp2.html
    |__ images/                   contains all img dependancies
    |__ img/                contains all the screenshot generated from iframe/
          |__ comp1.html.png
          |__ comp2.html.png
    |__ js/                    contains js concat files
          |-- comp/                 copy of components
          |__ gallery.js
          |__ index.js
          |__ iframe.js
    |__ info.json              contains all the information extracted from components in JSON
    |__ index.html             index of the gallery


This is what the output will look like : missing index

And the page for a component will look like : missing comp

Features :

  • Display interactable component
  • Display instanciation code of component
  • Ability to search component from name, dependencies and inherit
  • Autocompletion in research
  • Ability to show multiple example
  • Extract information such as dependencies and inherit
  • Entirely customizable


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 Grunt.

Release History

(Nothing yet)


Copyright (c) 2015 Pierre de Wulf. Licensed under the MIT license.

Current Tags

  • 0.0.5                                ...           latest (5 years ago)

5 Versions

  • 0.0.5                                ...           5 years ago
  • 0.0.4                                ...           5 years ago
  • 0.0.3                                ...           5 years ago
  • 0.0.2                                ...           5 years ago
  • 0.0.1                                ...           5 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (13)
Dependents (2)

Copyright 2014 - 2016 © |