Есть ли какой-нибудь плагин gulp, который позволяет ему выполнять функцию генератора статических сайтов?

Если все, что вам нужно, - это сгенерировать структуру .json и добавить ее в файл с помощью Gulp, вы можете сделать это одним из нескольких способов. Первые два используют чистую технику Gulp:

• Вы можете написать плагин потока, используя through или through2, который в основном должен будет создавать структуру данных по одному файлу за раз, а затем во второй операции создаст (т.е. push() или queue()) файл в конце

• Вы можете использовать конвейер Highland для .reduce() преобразования файлов в структуру данных, а затем .map() результата в файл, возможно, выполняя .merge() с исходным потоком

В обоих случаях вам понадобится ваш сгенерированный новый vinyl файл с соответствующими .base и .path, которые ваш плагин фактически не знает, поскольку файл, который вы создаете, еще не существует. Таким образом, ваш код должен будет создать фиктивный абсолютный путь, чтобы gulp.dest() поместил его в нужное место.

Третий метод - вместо этого написать плагин Metalsmith, который будет выглядеть примерно так:

function generate_json(files, smith, done) {
    var menu = {};
    Object.keys(files).forEach(function(path) {
        var file = files[path];
        if (path.slice(-5)===".html") {
            menu[path] = ... // whatever you want to store about `file`
        }
    });
    files["path/to/menu.json"] = { contents: new Buffer(JSON.stringify(menu)) };
    done();
}

Хотя он не намного короче, чем код, необходимый для других методов, вам нужно будет понимать гораздо меньше, чтобы делать это правильно. Просто убедитесь, что если у вас есть ошибка, вы вызываете done(err), чтобы передать ошибку.

Если вы хотите объединить этот плагин с конвейером Gulp, вы можете обернуть его так, используя Gulpsmith:

gulp.src(...)
.pipe( things() )
.pipe( gulpsmith().use(generate_json) )
.pipe( other_stuff() )
.pipe( gulp.dest(...);

Это правда, что у Gulp есть определенные преимущества перед Metalsmith. К сожалению, легкость написания плагинов не одна из них. Создание новых файлов из плагина Gulp сложнее, чем должно быть, как и правильная обработка ошибок. Также существует сильное несоответствие импеданса между потоковым подходом и природой статических сайтов, требующих межфайловых операций.

Например, если вы хотите встроить свое меню на каждую страницу .html после его создания, вам понадобится более сложный плагин Gulp, потому что к тому времени, когда ваш плагин "увидел" все файлы, они "пошли бы вниз по течению", иначе вам пришлось бы держаться за них, а затем снова выпустить их после того, как вы закончите. В подключаемом модуле Metalsmith вы просто добавляете второй цикл после создания меню, чтобы снова вернуться к файлам и вставить данные на месте. Вам не нужно ничего делать, чтобы передавать файлы, с которыми вы ничего не делаете.

Для такого рода задач API плагина Metalsmith однозначно превосходит Gulp. Но для задач, которые могут работать только с потоковыми файлами, для победы используйте существующие плагины Gulp.

По сути, Metalsmith - это действительно Gulp генераторов статических сайтов, а Gulp - это Gulp систем потоковой сборки. И вы можете объединить сильные стороны обоих, используя Gulpsmith.

(Кстати, в зависимости от вашей реальной задачи, вы можете найти некоторые существующие плагины Metalsmith, которые полностью или частично ее выполняют. Например, плагин metalsmith-collections создает индексы для файлов, соответствующих определенным шаблонам, есть metalsmith-title, который извлекает заголовок HTML в заголовок собственность и т. д.)

Да, вы можете делать статическую генерацию в gulp.

Вероятно, вам понадобится меньше плагинов, чем вы думаете. Счетчик, возможно, можно округлить до нуля.

Подумайте, что вы можете делать с gulp и без плагинов:

var gulp = require('gulp'),
    browserify = require('browserify');

gulp.task('browserify', function(callback) {
    browserify('app.js').bundle()
        .pipe(fs.createWriteStream('dist/app.js')
        .on('close', callback); // why? read on...
});

Слишком много подключаемых модулей gulp не требуется. Они адаптируют некоторый исходный модуль к потокам объектов винила, используемым между gulp.src и gulp.dest, но потоки объектов винила не являются обязательными.

Нужен модуль X для выполнения какой-то части статической генерации за вас? Возьмите callback в качестве аргумента вашей функции задачи и передайте его X вместе со своими аргументами. Достаточно часто это всего лишь один лайнер: require использование плагина просто сделало бы ваш код длиннее.

Даже для тех частей вашего рабочего процесса, которые лучше всего описать как прочитать все, обработать в памяти и записать один раз, вы можете использовать through2.obj для преобразования виниловых объектов или gulp-filter чтобы выбить их. Плагины Gulp (или, что еще хуже, плагины metalmith через gulpsmith) используются в крайнем случае.

var gulp = require('gulp'),
    filter = require('gulp-filter'),
    through2 = require('through2');

gulp.task('generate-assets', function() {
    return gulp.src('path/to/your/content/and/templates/**')
               .pipe(filter(shouldFileSurvive))
               .pipe(through2.obj(makeFileDifferent))
               .pipe(gulp.dest('dist/'));
});

Примечание: если вы не перезваниваете, вы должны вернуть результат окончательного pipe. В противном случае gulp будет думать, что ваша задача синхронна, и не будет ждать перед запуском зависимых задач.

Если последний конвейер возвращает обычный поток, а не gulp.dest, выполняйте обратный вызов (см. Первый пример) до тех пор, пока не будет b59182c7 земли.

Я писал такой плагин, он здесь gulp-static-site. Глядя на два других ответа, я бы сказал, что его функциональность находится где-то между vanilla gulp и gulpsmith.

Gulp-filetree

Основная функциональность - это вычисление древовидной структуры данных, которое выполняется gulp-filetree. Он постепенно создает дерево, пока поток не закончится. Затем каждый файл (виниловый объект) повторно передается со свойством .tree.

Взгляните на tree.js, чтобы получить дополнительную информацию об этих данных. состав.

Gulp-static-site

Эти плагины принимают поток файлов HTML, отправляют их через gulp-filetree и в нефритовый шаблон, который добавляет базовый макет с меню дерева каталогов и содержимым файла.

Посмотри сюда, чтобы увидеть главный трубопровод. https://github.com/0x01/gulp-static-site/blob/master/index.js#L146 (Как видите, это не самый красивый, но нормальный вариант. Преобразование Markdown необходимо удалить, так как оно может выполняться глотком вне плагина. Вероятно, тот же аргумент относится и к другим вещи...)

В: Как это связано с gulpsmith?

Gulpsmith определенно кажется мощным и законченным, я бы, вероятно, использовал его, если бы знал об этом в то время, когда я изначально писал его.

Что, как говорится; этот плагин простой, легкий и имеет небольшую кодовую базу. Думаю, легко понять, что он делает, и изменить его по своему вкусу, пул-реквесты, безусловно, приветствуются :-)

Если что-то еще неясно, сообщите о проблеме или дайте мне знать здесь, спасибо