2016-02-03 8 views
3

В настоящее время я использую Gulp в качестве инструмента построения для проекта. Одной из задач Глотка использует сборку для сборки Рулей страниц/макетов в HTML:Как создать страницы из данных, используя Assemble in Gulp?

var assemble = require('assemble')(); 

gulp.task('assemble', ['clean'], function() { 
    assemble.partials('./partials/**/*.hbs'); 
    assemble.layouts('./layouts/**/*.hbs'); 
    assemble.pages('./pages/**/*.hbs'); 

    loadHelpers(); // Calls assemble.helpers(...) on some Handlebars helpers 

    var data = require('./hbs_context.json'); 
    assemble.data(data); 
    assemble.data({root: process.cwd()}); 

    return assemble.toStream('managements') 
     .pipe(assemble.renderFile()) 
     .pipe(plugins.extname()) // Converts .hbs to .html 
     .pipe(gulp.dest('.tmp/')); 
}); 

Я постиг часть моего проекта, который требует несколько страниц, созданных из массива данных, где каждый объект array будет контекстом для отдельной страницы.

Эта же проблема воспитанные и ответил много раз:

How can I generate multiple pages from a JSON file with Assemble

Assemble: How can I generate pages from json/yaml?

grunt assemble multiple files from one datafile

https://github.com/assemble/assemble/issues/236

https://github.com/assemble/assemble/issues/184

https://github.com/assemble/assemble/pull/234

Однако все предлагаемые решения используют опции Grunt, и я не могу понять, как сделать то же самое в Gulp. Итак, есть ли эквивалентный способ сделать это в Gulp?

ответ

0

Я только что начал создавать сборку, и кажется, что она бежит без проблем в глотке. Это depreciated NPM plugin показал, как это делается, обратите внимание на разницу:

Собрать с Глоток

var gulp = require('gulp'); 
 
var htmlmin = require('gulp-htmlmin'); 
 
var extname = require('gulp-extname'); 
 
var assemble = require('assemble'); 
 
var app = assemble(); 
 
    
 
gulp.task('load', function(cb) { 
 
    app.partials('templates/partials/*.hbs'); 
 
    app.layouts('templates/layouts/*.hbs'); 
 
    app.pages('templates/pages/*.hbs'); 
 
    cb(); 
 
}); 
 
    
 
gulp.task('assemble', ['load'], function() { 
 
    return app.toStream('pages') 
 
    .pipe(app.renderFile()) 
 
    .pipe(htmlmin()) 
 
    .pipe(extname()) 
 
    .pipe(app.dest('site')); 
 
}); 
 
    
 
gulp.task('default', ['assemble']);

Сборка без Глоток

var htmlmin = require('gulp-htmlmin'); 
 
var extname = require('gulp-extname'); 
 
var assemble = require('assemble'); 
 
var app = assemble(); 
 
    
 
app.task('load', function(cb) { 
 
    app.partials('templates/partials/*.hbs'); 
 
    app.layouts('templates/layouts/*.hbs'); 
 
    app.pages('templates/pages/*.hbs'); 
 
    cb(); 
 
}); 
 
    
 
app.task('assemble', ['load'], function() { 
 
    return app.toStream('pages') 
 
    .pipe(app.renderFile()) 
 
    .pipe(htmlmin()) 
 
    .pipe(extname()) 
 
    .pipe(app.dest('site')); 
 
}); 
 
    
 
app.task('default', ['assemble']);

Сборка может использовать все плагины Gulp без проблем.

Если вы хотите узнать больше, посетите эту лекцию: https://www.youtube.com/watch?v=R9kOy2e5koE

До сих пор я узнал, что вы можете вставить данные следующим образом:

app.task('load', function(cb) { 
    app.data('templates/data/*.json'); 
    app.partials('templates/partials/*.hbs'); 
    app.layouts('templates/layouts/*.hbs'); 
    app.pages('templates/pages/*.hbs'); 
    cb(); 
}); 

Она должна быть первой в " load ".

 Смежные вопросы

  • Нет связанных вопросов^_^