Czy jest jakiś plugin gulp, który pozwala mu wykonywać funkcję statycznego generatora stron?

Question

Użyłem kilku statycznych generatorów stron, ale łyk jest lepszym podejściem, ponieważ jest tak modułowy. Zastanawiam się, czy istnieje wtyczka, która wykonuje niektóre funkcje statycznego generatora witryn. Moim zdaniem, wszystko, czego brakuje, zamieni pliki w katalogu w strukturę danych Json do wykorzystania w menu na stronie.

Answer 1

Jeśli chcesz tylko wygenerować strukturę .json i dodać ją do pliku za pomocą Gulp, możesz to zrobić na kilka sposobów. Pierwsze dwa stosowanie czystego techniki haustem:

• można napisać plugin strumienia używając through lub through2, które w zasadzie mają budować struktury danych jeden plik na raz, po czym w drugiej operacji, stworzy (tj push() lub queue()) plik na końcu

• można użyć Highland rurociągu do .reduce() pliki do struktury danych, a następnie .map() wynik do pliku, może robi .merge() z pierwotnym strumieniu

W obu przypadkach musisz swój wygenerowany nowy plik vinyl mieć odpowiednią .base i .path, który swoją wtyczki nie będzie faktycznie znasz, ze względu na tworzenie pliku jesteś jeszcze nie istnieje. W związku z tym twój kod będzie musiał nadrobić fałszywą ścieżkę absolutną, aby gulp.dest() umieścił go we właściwym miejscu.

Trzecia technika jest napisanie Metalsmith wtyczki zamiast tego, który będzie wyglądać następująco:

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

Chociaż nie znacznie krótszy niż kod wymagany do innych metod, trzeba zrozumieć dużo mniej, aby zrobić to poprawnie. Po prostu upewnij się, że jeśli masz błąd, zadzwoń pod numer done(err), aby przekazać błąd.

Jeśli chcesz połączyć tę wtyczkę z rurociągu haustem, można owinąć go tak jak, używając Gulpsmith:

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

To prawda, że ​​Gulp ma pewne zalety w stosunku Metalsmith. Łatwość pisania wtyczek, niestety, jest jedną z nich. Tworzenie nowych plików z wtyczki Gulp jest trudniejsze niż powinno być, podobnie jak poprawna obsługa błędów. Istnieje również silne niedopasowanie impedancji między podejściem strumieniowym, a naturą witryn statycznych wymagających operacji na wielu plikach.

Na przykład, jeśli chcesz, aby utworzyło twoje menu po utworzeniu, potrzebna byłaby bardziej skomplikowana wtyczka Gulp, ponieważ do czasu, gdy wtyczka "zobaczyła" wszystkie pliki, "zejdź w dół", bo inaczej będziesz musiał trzymać się ich, a następnie wypuścić je ponownie po zakończeniu. W plugin Metalsmith wystarczy dodać drugą pętlę po wygenerowaniu menu, aby wrócić do plików ponownie, aby wstawić dane, w miejscu. Nie musisz robić nic, aby przekazać pliki, których nic nie robisz.

W przypadku tego rodzaju zadań API wtyczek Metalsmith jest jednoznacznie lepsze od Gulpa. Ale w przypadku zadań, które mogą działać tylko na plikach strumieniowych, użyj wygranych wtyczek Gulp.

W gruncie rzeczy, Metalsmith jest prawdziwą odmianą statycznych generatorów stron, podczas gdy Gulp to potok strumieniowych systemów kompilacji. I możesz połączyć mocne strony obu, używając Gulpsmitha.

(Nawiasem mówiąc, w zależności od rzeczywistego zadania, możesz znaleźć niektóre wtyczki Metalsmith, które wykonują całość lub część tego procesu, na przykład wtyczka metalsmith-collections tworzy indeksy dla plików pasujących do określonych wzorców, jest tam metalsmith-title, który wyodrębnia kod HTML nagłówek do własności tytułu, itp.)

Answer 2

Tak, możesz wykonywać generowanie statyczne w łyku.

Prawdopodobnie potrzebujesz mniej wtyczek, niż ci się wydaje. Liczba może zaokrąglić do zera.

Zastanów się, co można zrobić z łykiem i żadnych wtyczek:

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

Too many gulp plugins don't need to exist. Przystosowują jakiś oryginalny moduł do strumieni obiektów winylowych używanych między gulp.src i gulp.dest, ale strumienie obiektów winylowych nie są obowiązkowe.

Potrzebujesz modułu X, aby wykonać dla ciebie jakąś część swojego statycznego generowania? Weź callback jako argument do funkcji zadania i przekaż ją do X wraz z argumentami. Często jest to jedna linijka: require - dzięki wtyczce po prostu wydłużymy twój kod.

Nawet w tych częściach przepływu pracy, które najlepiej opisuje się jako "przeczytaj wszystko, zrób to w pamięci i napisz raz", możesz użyć narzędzia through2.obj do przekształcenia obiektów winylowych lub gulp-filter, aby je znokautować. Wtyczki Gulp (lub, co gorsza, metalsmith za pośrednictwem gulpsmith) są ostatnią deską ratunku.

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

Uwaga: jeśli nie jesteś oddzwanianie, należy zwrócić wynik końcowy pipe. W przeciwnym razie, gulp będzie myślał, że twoje zadanie jest synchroniczne i nie czekać przed wyrzuceniem zadań zależnych.

Jeśli ostatnia potocznia zwraca normalny strumień zamiast gulp.dest, wykonaj wywołanie zwrotne (patrz pierwszy przykład), aż wyląduje na b59182c7.

Answer 3

Pisałem taką wtyczkę, to jest tutaj gulp-static-site. Patrząc na pozostałe dwie odpowiedzi powiedziałbym, że jego funkcjonalność pasuje gdzieś pomiędzy waniliowy łyk i gulpsmith.

Gulp-filetree

Główną funkcjonalność rzeczywiście jest obliczeniowa struktury danych drzewiastej, która jest wykonywana przez gulp-filetree. Stopniowo buduje drzewo aż do końca strumienia. Następnie każdy plik (obiekt winylowy) jest ponownie wyposażony w właściwość .tree.

Zajrzyj do tree.js, aby uzyskać więcej informacji na temat tej struktury danych.

Gulp-static-site

tej wtyczki odbywa strumień plików HTML, wysyła je za pośrednictwem gulp-filetree i jade do szablonu, który dodaje podstawowy układ z menu drzewa katalogów i zawartości plików.

Wygląda tu na główny rurociąg. https://github.com/0x01/gulp-static-site/blob/master/index.js#L146 (Jak widać nie jest najładniejszy, ale OK konwersji Markdown muszą być usunięte jak można to zrobić w haustem zewnątrz wtyczki Prawdopodobnie sam argument odnosi się do innych rzeczy ....).

Q: Jak czy to dotyczy gulpsmith?

Gulpsmith z pewnością wydaje się potężny i kompletny, prawdopodobnie użyłbym go, o czym wiedziałem na ten temat w czasie, kiedy to początkowo kodowałem.

To powiedziane; ta wtyczka jest prosta, lekka i ma mały kod źródłowy. Myślę, że to jest łatwe do zrozumienia, co robi i zmieniać według własnych upodobań, wyciągnąć wnioski z pewnością mile widziane :-)

Jeśli cokolwiek jest niejasne, prosimy o zgłoszenie problemu lub daj mi znać tutaj, dzięki