gulp - ¿Hay algún complemento que le permita realizar la función de un generador de sitio estático?

static-site

Question

He usado un montón de generadores de sitios estáticos, pero trago es un mejor enfoque porque es muy modular. Me pregunto si hay un complemento que realice algunas de las funciones de un generador de sitio estático. En mi opinión, todo lo que falta es algo que convertirá los archivos de un directorio en una estructura de datos json para su uso en los menús del sitio.

Answer 1

He estado escribiendo un plugin así, está aquí gulp-static-site . Mirando las otras dos respuestas, diría que su funcionalidad encaja en algún lugar entre la vainilla y el gulpsmith .

Gulp-filetree

La funcionalidad principal es la computación de una estructura de datos tipo árbol, que se realiza mediante gulp-filetree . Se acumula de forma incremental un árbol hasta que finaliza la secuencia. Luego, cada archivo (objeto de vinilo) se .tree a .tree con una propiedad .tree .

Eche un vistazo a tree.js para obtener más información sobre esa estructura de datos.

Gulp-static-site

Este complemento toma un flujo de archivos HTML, los envía a través de gulp-filetree y en una plantilla de jade que agrega un diseño básico con un menú de árbol de directorios y el contenido del archivo.

Lookie mira aquí por la tubería principal. https://github.com/0x01/gulp-static-site/blob/master/index.js#L146 (Como puede ver, no es lo más bonito sino lo correcto. La conversión de Markdown debe eliminarse, ya que se puede hacer por fuera) El plugin. Probablemente el mismo argumento va para otras cosas ...)

P: ¿Cómo se relaciona esto con gulpsmith ?

Gulpsmith es definitivamente poderoso y completo, probablemente lo usaría si lo hubiera sabido en el momento en que lo codifiqué inicialmente.

Habiendo dicho eso; Este plugin es simple, ligero y tiene una pequeña base de código. Creo que es fácil entender lo que hace y cambiar a tu gusto, las solicitudes de extracción son bienvenidas :-)

Si algo más no está claro, envíe un problema o hágamelo saber aquí, gracias

Answer 2

Sí, puedes hacer generación estática en trago.

Probablemente necesites menos complementos de los que crees. El conteo quizás podría redondearse a cero.

Considera lo que puedes hacer con trago y sin complementos:

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

Demasiados complementos trillados no necesitan existir . gulp.src algunos módulos originales a los flujos de objetos de vinilo utilizados entre gulp.src y gulp.dest , pero los flujos de objetos de vinilo no son obligatorios.

¿Necesitas el módulo X para hacer parte de tu generación estática por ti? Tome la callback como un argumento para su función de tarea y pásela a X junto con sus argumentos. Con suficiente frecuencia, es de una sola línea: require un plugin solo haría que su código sea más largo.

Incluso para aquellas partes de su flujo de trabajo que se describen mejor como "lea todo, manipúlelo en la memoria y escríbalo una vez", puede usar through2.obj para transformar los objetos de vinilo o gulp-filter para eliminarlos. Los complementos de Gulp (o, peor aún, los complementos de metalsmith a través de Gulpsmith ) son el último recurso.

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/''));
});

Nota: si no está devolviendo la llamada, debe devolver el resultado de la pipe final. De lo contrario, Gulp pensará que su tarea es sincrónica y no esperará antes de iniciar las tareas dependientes.

Si la tubería final devuelve un flujo normal en lugar de gulp.dest , tome una devolución de llamada (vea el primer ejemplo) hasta que b59182c7 aterrice.

Answer 3

Si todo lo que desea es generar una estructura .json y agregarla a un archivo con Gulp, puede hacerlo de varias maneras. Los dos primeros utilizan técnicas puras de Gulp:

• Puede escribir un complemento de flujo mediante through o through2 , que básicamente tendrá que construir la estructura de datos un archivo a la vez, luego, en una segunda operación, creará (es decir, push() o en queue() ) un archivo al final

• Puede usar una canalización de Highland para .reduce() los archivos a una estructura de datos, luego .map() el resultado a un archivo, tal vez haciendo un .merge() con la secuencia original

En ambos casos, necesitará que su nuevo archivo de vinyl generado tenga una .base y .path , que su complemento no sabrá realmente , debido a que el archivo que está creando aún no existe. Por lo tanto, su código tendrá que crear una ruta falsa absoluta para que gulp.dest() lo coloque en el lugar correcto.

La tercera técnica es escribir un complemento de Metalsmith , que se verá así:

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

Aunque no es mucho más corto que el código requerido para los otros métodos, tendrá que entender mucho menos para hacerlo correctamente. Solo asegúrese de que si tiene un error, llame al done(err) para pasar el error.

Si desea combinar este complemento con una tubería Gulp, puede envolverlo así, utilizando Gulpsmith :

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

Es cierto que Gulp tiene ciertas ventajas sobre Metalsmith. La facilidad de escribir complementos, lamentablemente, no es uno de ellos. Crear nuevos archivos desde un complemento de Gulp es más difícil de lo que debería ser, al igual que el correcto manejo de errores. También existe una fuerte falta de coincidencia de impedancia entre el enfoque de transmisión y la naturaleza de los sitios estáticos que necesitan operaciones entre archivos.

Por ejemplo, si desea incrustar su menú en cada página .html después de crearlo, necesitará un complemento Gulp más complejo, ya que cuando el complemento haya "visto" todos los archivos, habrían "ido hacia abajo", o de lo contrario tendrías que aferrarte a ellos, y luego transmitirlos de nuevo después de que hayas terminado. En el complemento Metalsmith, simplemente agregaría un segundo bucle después de generar el menú, para volver a revisar los archivos nuevamente para insertar los datos, en el lugar . No tiene que hacer nada para pasar los archivos a los que no hace nada.

Para este tipo de tareas, la API del complemento Metalsmith es inequívocamente superior a la de Gulp. Pero para las tareas que pueden funcionar solo con archivos transmitidos, use los complementos Gulp existentes para ganar.

Básicamente, Metalsmith es realmente el Gulp de los generadores de sitios estáticos, mientras que Gulp es el Gulp de los sistemas de compilación en tiempo real. Y puedes combinar las fortalezas de ambos, usando Gulpsmith.

(Por cierto, dependiendo de su tarea real, puede encontrar algunos complementos de Metalsmith existentes que lo hacen total o parcialmente. Por ejemplo, el complemento de metalsmith-collections crea índices para los archivos que coinciden con ciertos patrones, hay un metalsmith-title que extrae un HTML encabezado a una propiedad de título, etc.)