Pass random value to gulp pipe template

问题

I have a gulp task

gulp.task('markdown', function () {
    gulp.src('content/*.md')
        .pipe(newer('assembler/markdown_out'))
        .pipe(markdown())
        .pipe(wrap({ src: 'assembler/markdowntemp/wrapper.html'}))
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(template({classname: getClassName()}))
        .pipe(gulp.dest('assembler/markdown_out'));
});

and the function getClassName is

function getClassName(){
 var classnames_size = ["big", "medium", "small", "extrabig"];

 var classShape = ["tvscreen", "oval"];

 return classnames_size[Math.floor(Math.random()*classnames_size.length)] + " " + classShape[Math.floor(Math.random()*classShape.length)];

}

unfortunately when I run this task it looks like the template only gets compiled once, whereas I want something where the template gets compiled for every file being passed in, so that I can generate the random classnames.

Is there an option to set it to compile each time, or a different plugin that will do that.

回答1:

The main problem you have with your approach is that gulp uses "a glob and represents a file structure" (gulp official documentation).

So this is how it works: it will take all files in the stream, process them and send them to the next pipe "in a row".

Thats why your function getClassName gets executed only one time.

I order to accomplish what you want, you must think about manipulate each file independently, and thus, you will loose "power" with gulp.

Once you have each file path, you can run your task (now a function) over this file. The task basically will extract the route of each file in the stream and call the functioncompileMarkdown, which is your "old" gulp task. Now this will be executed one time per file, thus, your getClassName function will be executed one time for each file, and thus generate the "random class" (didnt dig on that function, I rely on the fact that is working properly).

This example uses the following plugin: https://www.npmjs.org/package/glob-to-vinyl/ in order to process each files from the stream.

Here is the code, hope it helps !

var gulp = require('gulp'),
    globToVinyl = require('glob-to-vinyl');

gulp.task('markdown', function() {
  globToVinyl('content/*.md', function(err, files){
    for (var file in files) {
      compileMarkdown(files[file].path);
    }
  });
});

function compileMarkdown(file) {
  gulp.src('file')
    .pipe(newer('assembler/markdown_out'))
    .pipe(markdown())
    .pipe(wrap({ src: 'assembler/markdowntemp/wrapper.html'}))
    .pipe(fileinclude({
        prefix: '@@',
        basepath: '@file'
    }))
    .pipe(template({classname: getClassName()}))
    .pipe(gulp.dest('assembler/markdown_out'));
}

function getClassName(){
  var classnames_size = ["big", "medium", "small", "extrabig"];
  var classShape = ["tvscreen", "oval"];
  return classnames_size[Math.floor(Math.random()*classnames_size.length)] + " " + classShape[Math.floor(Math.random()*classShape.length)];
}

来源：https://stackoverflow.com/questions/24712684/pass-random-value-to-gulp-pipe-template

标签

gulp