如何將變量從gulp傳遞給javascript或coffeescript資產

我爲我的前端項目使用Coffeescript，直到現在我一直在使用Middleman，並且我想切換到Gulp。隨着中間人，我能夠做這樣的事：如何將變量從gulp傳遞給javascript或coffeescript資產

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

其中bar是config.rb一個變量。我想用Gulp做同樣的事情。有沒有辦法將變量和/或函數從gulp文件傳遞給腳本資源？

來源

2015-01-15 Andrei Cojea

你指的是這個[中間人（https://www.npmjs.com/package/middleman）？你能否添加一些關於你如何使用中間人的細節，以及你期望在這個系統中扮演什麼樣的角色？ – Ben 2015-01-16 15:52:20

啊不，我指的是我之前使用的[Middleman ruby app]（https://middlemanapp.com/），而不是gulp/grunt來生成資產。這個位''<%= bar %>''是'erb' sintax，所以基本上我能夠將一些變量和一些助手從一個'config.rb'暴露給任何模板：P – 2015-01-16 16:14:04

我最終使用'lodash'模板，發佈一個很快回答我的問題 – 2015-01-16 16:15:17

我結束了使用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 %>

通知<% .. %>之間的代碼不再被紅寶石，是普通的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

對於這種特殊的情況下，另一種是gulp-jade玉模板（與slim類似，但是您可以使用vanilla jade語法而不使用gulp-templates）。

其他通用模板引擎包括：痛飲，鬍子等..

來源

2015-01-22 15:43:28

如何將變量從gulp傳遞給javascript或coffeescript資產

回答

相關問題