将随机值传递给一个管道模板 [英] Pass random value to gulp pipe template

问题描述

$ p
$ b

  gulp.task（'markdown'，function（）{
 gulp。 src（'content / *。md'）
 .pipe（newer（'assembler / markdown_out'））
 .pipe（markdown（））
 .pipe（wrap（{src：'汇编程序/ markdowntemp / wrapper.html'}））
 .pipe（fileinclude（{
 prefix：'@@'，
 basepath：'@file'
}））
 .pipe（template（{classname：getClassName（）}））
 .pipe（gulp.dest（'assembler / markdown_out'））; 
}）; 
  

和getClassName函数是

  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）]; 
 
 
 $ / code> 

不幸的是，当我运行这个任务时，它看起来只是模板得到编译一次，而我想要的东西模板得到编译为每个文件被传入，以便我可以生成随机的类名。



是否有一个选项可以将它设置为每次编译，或者是一个可以执行此操作的插件。

解决方案

你的方法存在的主要问题是gulp使用glob并表示文件结构（gulp官方文档）。



所以这就是它的工作方式：它将获取流中的所有文件，处理它们并将它们连续发送到下一个管道。

这就是为什么你的函数getClassName只能执行一次。

我为了完成你想要的任务，必须考虑独立操作每个文件，因此，你将失去吞噬权力。

一旦你有每个文件路径，你可以运行你的任务函数）通过​​这个文件。
该任务基本上将提取流中每个文件的路由并调用函数compileMarkdown，这是您的旧吞咽任务。现在这将每个文件执行一次，因此，您的getClassName函数将为每个文件执行一次，从而生成随机类（没有挖掘该函数，我依赖于正常工作的事实）。

本例使用以下插件： https://www.npmjs.org/package/glob-to-vinyl/ ，以便处理流中的每个文件。

这里是代码，希望它有帮助！

  var gulp = require（'gulp'），
 globToVinyl = require 水珠对乙烯基）; 
 
 gulp.task（'markdown'，function（）{
 globToVinyl（'content / *。md'，function（err，files）{
 for（var file in文件）{
 compileMarkdown（files [file] .path）; 
} 
}）; 
}）; 
 
函数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'） ）; 
 
 
函数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）]; 
} 
  

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.

解决方案

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)];
}

这篇关于将随机值传递给一个管道模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！