gulp-file-contents-to-keys

gulp-file-contents-to-modules

Input some files, output ES6 exports of their contents. Very helpful when working with HTML template files, so each of them could be imported using ES6 syntax.

I recommend using rollup for ES6 modules bundling.

Installation

$ npm install gulp-file-contents-to-modules

How it works

Given a nested directory of files like so,

my-files
├── bar.html
├── foo.html
└── my-folder
    └── baz.html

gulp-file-contents-to-modules reads in each file, and outputs a single JSON file representing the contents of each file within the folder. When a directory is encountered, it becomes a nested object within the JSON blob, like so:

export var bar = "This is bar.";
export var foo = "This is foo.\r\n";
export var my-folder__baz = "This is baz.\r\n";

How to Use

For example, to read in the contents of the my-files folder and output dist/contents.js, simply add the following gulp task inside gulpfile.js:

var gulp    = require('gulp');
var fc2modules = require('gulp-file-contents-to-modules');

gulp.task('default', function() {
  gulp.src('templates/**/*')
      .pipe(fc2modules({
            compile : true, // 'true' (use '_.template') or pass any other string to wrap the template string with
            minify  : true, // remove new lines and whitespaces between tags
      })
      .pipe(gulp.dest('./dist/'));
});

Simply run the following and you're done:

$ gulp

License

MIT