如何将变量从 gulp 传递到 javascript 或 coffeescript 资产

Question

我在我的前端项目中使用 Coffeescript，直到现在我一直在使用 Middleman，我想切换到 Gulp。通过 Middleman，我可以做这样的事情：

if foo is "<%= bar %>"
  # do something

其中 bar 是 config.rb 中的一个变量。我想使用 Gulp 做同样的事情。有没有办法将变量 and/or 函数从 gulpfile 传递到脚本资产？

Answer 1

我最终使用 gulp-template 编译 lodash templates，它看起来与 erb 几乎一样。那么让我们举一个 slim 模板的例子，它通常看起来像这样：

doctype html
html
  head
    title = project_title
  body
    #content
      - if html5?
        p Routes look like "example.com/some/route"
      - else
        p Routes look like "example.com/#!/some/route"

    #footer
      | Copyright © #{year} #{author}

现在转换为：

doctype html
html
  head
    title <%= projectTitle %>
  body
    #content
      <% if isHtml5() { %>
      p Routes look like "example.com/some/route"
      <% } else { %>
      p Routes look like "example.com/#!/some/route"
      <% } %>

    #footer
      | Copyright © <%= year %> <%= author %>

注意 <% .. %> 之间的代码不再是 ruby，而是普通的 javascript。您可以将它用于任何您想要的疯狂组合，但您必须仔细考虑那里的输出：if .. else 和段落之间没有缩进差异，正如您对纤薄模板所期望的那样。

要向模板公开数据，将对象传递给 gulp-template，如下所示：

var gulp = require('gulp');
var template = require('gulp-template');
var slim = require('gulp-slim');

gulp.task('slim', function () {
  return gulp.src('src/*.slim')
    .pipe(template({
      projectTitle: 'Example',
      year: '2015',
      author: "Master Yoda"
      isHtml5: function(){
        // ...
      }
    }))
    .pipe(slim({pretty: true}))
    .pipe(gulp.dest('dist'));
});

可在此处找到文档：https://github.com/sindresorhus/gulp-template

对于这种特殊情况，jade 模板的另一种选择是 gulp-jade（类似于 slim，但您可以在不使用 gulp-templates 的情况下使用 vanilla jade 语法）。

其他通用模板引擎包括：swig、mustache 等...

如何将变量从 gulp 传递到 javascript 或 coffeescript 资产

How to pass variables from gulp to javascript or coffeescript assets

javascript

coffeescript

gulp