Plugin for gulp - collect files in pieces

Recently, the challenge was to create a website not just quickly, but very quickly.



Therefore, it was decided to deploy a gulp-project (until today I have never resorted to his help) and focus directly on coding. Unfortunately, this was not enough.



In the course of the layout it became clear that huge canvases of html- and js-code with each line more and more slow down the process of typesetting. To be honest, this problem has arisen before, and today it has become particularly acute.

')

Therefore, it was necessary to find a solution, thanks to which it is possible to connect an already-installed block in the right place and thereby reduce the size of the code in the source.



Having rummaged in the Internet, found a gulp-rigger plugin . Half an hour was enough to understand that this was not at all what was needed:

• First, strange handling of file names. For some reason, he cannot work with .html files (exactly), maybe there are other limitations - he did not study;
• secondly (and most importantly) that he does not know how to work recursively - if you try to connect in this way a file that already has another file connection, an error will be thrown out.

It became clear that he could not solve my problems.



Therefore, the necessary minimum was studied and a custom plugin for gulp - gulp-pagebuilder was written .



The above problems rigger he solves. Using as simple as possible. Suppose we have a src html source directory, files are going to build



Task for a galp will look something like this:

var gulp = require('gulp'), pagebuilder = require('gulp-pagebuilder')); gulp.task('default', function () { return gulp.src('src/*.html') .pipe(pagebuilder('src')) .pipe(gulp.dest('build/')); }); 

pagebuilder ('src') - here we are passing the source directory for which include files will be searched



In the source file we connect another file:

 <div class="someclass" > [snp tpl="some/block/in/src/somefile.html" class="foo bar" tag="sometag" content="bla bla bla" ] </div> 

Moreover, the parameters that can be passed and used in a plug-in snippet (hence the abbreviation [snp ...]), can be absolutely any - class, tag, and others. The main thing is that tpl points to an existing file, otherwise nothing will connect.



The include file looks like this.

 <div class="otherclass {class}" data-tag="{tag}" > Some content, {content} </div> 

If the build is successful, the resulting file will look like this:

 <div class="someclass" data-tag="sometag" > <div class="otherclass foo bar" > Some content, bla bla bla </div> </div> 

The plugin works with any text formats, you can also use it with js



The plugin is available in npm , the code is posted on github .



I will correct errors / remarks and comb the code to a normal view later when the time comes. Also I will be glad to any feedback