Verwenden der Kit-Sprache in Windows und Linux

Im vorherigen Post haben wir über Kit diskutiert, eine sehr einfache HTML-Template-Sprache. Wenn Sie dies befolgt haben, sollten Sie feststellen, dass die GUI-Anwendung, die Kit in browserkonformes HTML-Format kompilieren kann, Codekit ist.

Leider ist Codekit nur für OS X verfügbar. Es gibt derzeit keine ähnliche Anwendung für Windows und Linux, die Kit unterstützt.

Wenn Sie auf Windows- und Linux-Computern arbeiten, aber Kit verwenden möchten, können Sie Grunt als Alternative verwenden. Grunt hat eine riesige Sammlung von Plugins, die von großzügigen Entwicklern auf der ganzen Welt zur Verfügung gestellt wurden - dazu gehört das Plugin zur Kompilierung der Kit-Sprache, grunt-codekit. Lass es uns überprüfen.

Hinweis: Obwohl der folgende Tipp in erster Linie darauf abzielt, Windows- und Linux-Benutzern eine Alternative zu Codekit zu zeigen, können OS X-Benutzer sie auch verwenden.

Anfangen

Zuerst erstellen wir ein Verzeichnis für unser Projekt. Lassen Sie uns Terminal oder Eingabeaufforderung starten und geben Sie die folgenden Befehlszeilen ein:

 mkdir kit-grunt cd kit-grunt 

Wir haben ein neues Verzeichnis namens kit-grunt erstellt . In der zweiten Zeile können wir sie eingeben. Wenn Sie jedoch zuvor ein Projektverzeichnis erstellt haben, können Sie die erste Zeile überspringen und mit dem Befehl cd sofort zu Ihrem eigenen Verzeichnis in Terminal navigieren.

Innerhalb des Projektverzeichnisses erstellen wir einen neuen Ordner namens kit, in den wir die .kit Dateien .kit . Geben Sie diesen Befehl ein:

 mkdir kit 

Wir installieren dann sowohl Grunt als auch das Plugin mit diesen Befehlen. Beachten Sie, dass Sie Node.js zuerst in Ihrem System installieren müssen.

 npm installieren grunt --save-dev npm installieren grunt-code kit --save-dev 

Sobald der Vorgang abgeschlossen ist, finden Sie einen neuen Ordner, node_modules, der die von uns installierten Module enthält.

Aufbau

Erstellen Sie eine neue Datei mit dem Namen Gruntfile.js im Projektverzeichnis und fügen Sie den folgenden Code ein. Dieser Code ist ein Grunt Wrapper, in dem wir Grunt-Aufgaben registrieren, konfigurieren und ausführen. Wenn Sie Sublime Text verwenden, können Sie diesen Code einfach mit den Grunt Snippets einfügen.

 module.exports = function (grunt) {grunt.initConfig ({}); } 

Dann definieren wir die codekit Aufgabe in der grunt.initConfig wie grunt.initConfig .

 module.exports = function (grunt) {grunt.initConfig ({codekit: {ihr_ziel: {dateien: {'index.html': 'kit / index.kit', }}, }, }); } 

Diese Konfiguration kompiliert index.kit in index.html. Um dies auszuprobieren, können wir dies in index.kit hinzufügen.

... und grunt codekit im Terminal laufen.

Die index.html wurde erfolgreich generiert, und wie Sie unten sehen können, wird der Wert der Variablen auch innerhalb des Absatz-Tags erfolgreich angewendet.

Dateieinschluss

Wie wir in unserem vorherigen Beitrag erwähnt haben, können wir Dateien in eine Kit-Datei einbinden / importieren. Da wir header.kit, sidebar.kit und footer.kit haben (ich nehme an, dass wir entsprechende Inhalte in diesen Dateien hinzugefügt haben), können wir sie in index.kit aufnehmen, so.

 Dies ist der Header 
Das ist der Inhalt

Lassen Sie uns den Befehl grunt codekit im Terminal erneut grunt codekit . Und es geht los! Der Inhalt dieser Dateien wird in index.html zusammengestellt. Nett!

Fazit

Grunt ist eine großartige Alternative zu vielen Web-Entwicklungstools, einschließlich der Kompilierung von Kit-Dateien. Ich hoffe, dass dieser Tipp nützlich ist, insbesondere für Windows- und Linux-Benutzer, die Kit-Sprache in die Hände bekommen möchten.

Panda 5 ist der Smart News Reader Designer und Entwickler werden lieben

Old-School-RSS-Leser sind immer noch beliebt, weil sie Menschen an einem Ort die Dinge, die sie mögen, kuratieren lassen.Panda Reader hat die gleiche Idee, geht aber mit benutzerdefinierten RSS-Feeds für beliebte Design-, Entwickler- und Tech-Blogs einen Schritt weiter. Es ist vollständig anpassbar, sodass Sie festlegen können, welche Feeds in Ihrem Dashboard angezeigt werden und wie viel Speicherplatz sie belegen.Auß

(Tech- und Design-Tipps)

Den neuesten Designtrends zu folgen ist mit Be Theme einfach

(Anmerkung des Herausgebers: Dieser Beitrag wurde von Be Theme erstellt )Designtrends kommen und gehen. Manche sind nur Modeerscheinungen, manche bleiben lange Zeit und manche werden immergrüner. Was auch immer der Fall sein mag, Webdesigner müssen mit diesen Trends Schritt halten. Andernfalls laufen sie Gefahr, gegenüber der Konkurrenz zu verlieren.Es

(Tech- und Design-Tipps)