Geek Answers Handbook

Creating files with gulp

I have a project with several files called setup.js in different subfolders in my /src folder. I need a gulp task to copy all setup.js files to the /dist folder and save the subfolder structure. This part is simple.

The tricky part is also creating the index.html file next to each of the setup.js files in the \dist folder. The index.html file will be exactly the same for all of them, except that it will need to reference the setup.js script using the path relative to the /dist folder. I know that I could use some gulp-template to dynamically render an html file, but I do not know how to pass the setup.js path to it. And I do not know how to create index.html for each setup.js .

So, the resulting folder structure for which I am going to look something like this:

 /src template.html /blah1 setup.js /blah2 setup.js /dist /blah1 setup.js index.html /blah2 setup.js index.html

Any idea on how I would do this?

Alternatively, if someone can link me with some detailed gulp docs / examples / tutorials that can explain how to do something like this, I would really appreciate it. I have not found many good articles that actually explain what is going on behind the scenes in gulp, and it is hard to find examples that go beyond the trivial use case of src | uglify | concat | dest src | uglify | concat | dest src | uglify | concat | dest .

Thanks!

+6
source share
2 answers

I'm certainly not a gulp or node specialist, so feel free to fix me / add to my answer ...

I tried to replicate a similar directory structure to what you are describing here ...

Uses gulp-tap and gulp-template

gulpfile.js

 var gulp = require('gulp'); var template = require('gulp-template'); var tap = require('gulp-tap'); gulp.task('default', function () { gulp.src('./src/**/**.js', { base: './src' }) // tap into the stream to get the current file and compile // the template according to that .pipe(tap(function (file) { gulp.src('./src/template.html') // compile the template using the current // file.path as the src attr in the template file .pipe(template({ sourcefile: file.path })) // not sure about this line but I'm sure it could be better // splits the path on the / and then uses the second to last // item in the split array (which is the current directory, minus src plus dist) .pipe(gulp.dest('./dist/' + file.path.split('/')[file.path.split('/').length - 2])) })) // finally put the javascript files where they belong .pipe(gulp.dest('./dist')) });

template.html

 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="<%- sourcefile %>"></script> </head> <body> </body> </html>

Start directory structure

 . |____dist |____gulpfile.js |____src | |____bar | | |____setup.js | |____foo | | |____setup.js | |____template.html

The final directory structure

 . |____dist | |____bar | | |____setup.js | | |____template.html | |____foo | | |____setup.js | | |____template.html |____gulpfile.js |____src | |____bar | | |____setup.js | |____foo | | |____setup.js | |____template.html
+7
source

I did not see the @brbcoding solution, so I solved this solution. I think I like to use it even more:

 var gulp = require('gulp'); var through = require('through2'); var fs = require('fs'); var path = require("path"); var lodash = require('lodash'); var replaceWithFile = function(filePath, outName) { return through.obj(function(file, encoding, callback) { var gulpContext = this; fs.readFile(filePath, 'utf8', function(err,data) { file.contents = new Buffer(data); file.path = path.join(path.dirname(file.path), outName); gulpContext.push(file); callback(); }); }); }; var template = function(data, options) { return through.obj(function(file, encoding, callback) { var resolvedData = {}; for (key in data) { if(typeof data[key] === 'function') { resolvedData[key] = data[key](file); } else { resolvedData[key] = data[key]; } } file.contents = new Buffer(lodash.template(file.contents.toString(), resolvedData, options)); this.push(file); callback(); }); }; gulp.task('test', function() { gulp.src('src/**/setup.js') .pipe(replaceWithFile('src/indexTemplate.html', 'index.html')) .pipe(template({ challengeFolder: function(file) { return path.dirname(file.relative); } })) .pipe(gulp.dest('out1')); });
+1
source

More articles:


All Articles