generate collection files from json files and template file.
you may install this plugin with this command:
npm install gulp-multifile --save-dev
Once the plugin has been installed, it may be enabled inside your gulpfile with this line of JavaScript:
var multifile = require('gulp-multifile');
gulp.task('gen:scss', function() {
gulp.src('src/data/*.json')
.pipe(multifile({
template: "src/template/sass.tpl",
rename: function(paths, data, dataFile) {
paths.dirname = path.basename(dataFile.basename, '.json')
paths.basename = data.name;
paths.extname = ".scss";
return paths;
}
}))
.pipe(gulp.dest('src/sass'));
// src/data/file1.json => `{ name: 'file1-0'}`
// output file => src/sass/file1/file1-0.scss
});
Plugin options are:
Property | Necessary | Type | Plugin default value |
---|---|---|---|
template | yes | String |
undefined |
rename | yes | Function |
undefined |
[filter] | no | Function |
null |
[extdata] | no | 'Object' | 'undefined' |
[varname / variable] | no | String |
'data', _.templateSettings.variable |
[escape] | no | 'RegExp' | _.templateSettings.escape |
[evaluate] | no | 'RegExp' | _.templateSettings.evaluate |
[interpolate] | no | 'RegExp' | _.templateSettings.interpolate |
[engine] | no | 'Function' | undefined |
More detailed explanation is below.
Type: String
Default value: undefined
The template file for collection generating
Type: Function
Default value: undefined
Can define rename function to output your file which you should return Object
including keys dirname
, basename
, extname
in order to make file relative path.
rename: function(paths, data, dataFile) {
paths.dirname = path.basename(dataFile.basename, '.json')
paths.basename = data.name;
paths.extname = ".scss";
return paths;
// return the path object for building file relative path
}
Type: Function
Default value: undefined
Can define filter function to skin the item data render which you should return false
.
filter: function(data, file){
// data is json model data
// file is json file
// you should return value here
}
Type: Object
Default value: undefined
extend the json data, this extdata
inject to data.extdata
, if it given.
Type: String
Default value: data
lodash templateSettings _.templateSettings.variable
Used to reference the data object in the template text.
Type: RegExp
Default value: _.templateSettings.escape
lodash templateSettings _.templateSettings.escape
Used to detect data
property values to be HTML-escaped.
Type: RegExp
Default value: _.templateSettings.evaluate
lodash templateSettings _.templateSettings.evaluate
Used to detect code to be evaluated.
Type: RegExp
Default value: _.templateSettings.interpolate
lodash templateSettings _.templateSettings.interpolate
Used to detect data
property values to inject.
Type: Function
Default value: undefined
return {Function} compiled source method
Used to replace lodash template, if the template engine privided.
engine: function(templatefile){
return doT.template(templatefile);
}
the json pass from gulp.src , which their format as following is correct:
Array
[{ 'name': 'I am name'},{ 'name': 'name also'}]
generate two file, which this json is a collection file.
Object
{ 'name' : 'model'}
generate one file, which this json is a model file.
we use lodash.template
to do this, you can use engine
parameter to replace it.
see the cozhihu project or unit testing.
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 Gulp.
Copyright (c) 2017 Terry Cai. Licensed under the MIT license.