hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Utilisation de la langue du kit sous Windows et Linux

Dans le post précédent, nous avons discuté de Kit, un langage de template HTML très simple. Si vous l'aviez suivi, vous devriez trouver que l'application GUI capable de compiler Kit en un format HTML compatible avec le navigateur est Codekit.

Malheureusement, Codekit, n'est disponible que pour OS X, il n'y a actuellement aucune application similaire pour Windows et Linux supportant Kit.

Si vous travaillez sous Windows et Linux, mais que vous souhaitez utiliser Kit, vous pouvez utiliser Grunt comme alternative. Grunt a une collection massive de plugins, apportés par de généreux développeurs à travers le monde - cela inclut le plugin pour compiler le langage Kit, grunt-codekit. Regardons ça.

Remarque: Bien que le conseil suivant vise principalement à montrer aux utilisateurs Windows et Linux une alternative à Codekit, l'utilisateur OS X peut également l'utiliser.

Commencer

Nous allons d'abord créer un répertoire pour notre projet. Lançons Terminal ou Invite de commandes et tapez les lignes de commande suivantes:

 mkdir kit-grunt cd kit-grunt 

Nous avons créé un nouveau répertoire nommé kit-grunt ; la deuxième ligne nous permet de l'entrer. Mais si vous avez déjà créé un répertoire de projet, vous pouvez ignorer la première ligne et accéder immédiatement à votre propre répertoire dans Terminal avec la commande cd .

Dans le répertoire du projet, nous créons un nouveau dossier nommé kit où nous .kit fichiers .kit . Tapez cette commande ci-dessous:

 kit mkdir 

Nous installons ensuite aussi Grunt et le plugin, avec ces commandes. Notez que vous devez d'abord installer Node.js dans votre système.

 npm installer grunt --save-dev npm installer grunt-codekit --save-dev 

Une fois le processus terminé, vous trouverez un nouveau dossier, node_modules, contenant les modules que nous avons installés.

Configuration

Créez un nouveau fichier nommé Gruntfile.js dans le répertoire du projet et insérez le code suivant. Ce code est un Wrapper Grunt où nous allons enregistrer, configurer et exécuter la tâche Grunt. Si vous utilisez Sublime Text, vous pouvez facilement insérer ce code en utilisant les extraits Grunt.

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

Ensuite, nous définissons la tâche de codekit dans le grunt.initConfig, comme ça.

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

Cette configuration compilera index.kit dans index.html. Pour essayer cela, nous pouvons l'ajouter dans index.kit.

... et exécutez grunt codekit dans Terminal.

L'index.html est généré avec succès et comme vous pouvez le voir ci-dessous, la valeur de la variable est également appliquée avec succès dans la balise de paragraphe.

Inclusion de fichier

Comme nous l'avons mentionné dans notre article précédent, nous pouvons inclure / importer des fichiers dans un fichier Kit. Étant donné que nous avons header.kit, sidebar.kit, et footer.kit (je suppose que nous avons ajouté le contenu correspondant dans ces fichiers), nous pouvons les inclure dans index.kit, comme ça.

C'est l'en-tête

C'est le contenu

grunt codekit nouveau la commande grunt codekit dans Terminal. Et c'est reparti! Le contenu de ces fichiers est rassemblé dans index.html. Agréable!

Conclusion

Grunt est une excellente alternative à de nombreux outils de développement web, y compris la compilation du fichier Kit. J'espère que cette astuce est utile, en particulier pour les utilisateurs de Windows et de Linux qui veulent mettre la main sur le langage Kit.

Augmentez la productivité de votre croquis grâce à cet outil gratuit

Augmentez la productivité de votre croquis grâce à cet outil gratuit

Nous voulons tous faire avancer les choses plus vite. Les programmes de conception nous aident à créer des interfaces étonnantes, mais parfois les menus maladroits peuvent ralentir le processus.Avec le plugin Sketch Runner, vous pouvez automatiser votre flux de travail Sketch à l' aide de commandes tapées qui ouvrent des menus, ciblent certains éléments de page et même automatisent les commandes de plugin.Vous pe

(Conseils techniques et de conception)

Comment transformer des pages de Wikipedia en livres électroniques

Comment transformer des pages de Wikipedia en livres électroniques

Si vous êtes comme moi, vous aimerez probablement Wikipédia, l'encyclopédie web préférée de tout le monde. Il contient une énorme base de données de contenu sur presque tous les sujets sous le soleil, et dans une variété de langues. Si vous vous préparez pour un voyage, vous feriez probablement économiser certaines de ces lectures pour les lire plus tard, hors ligne, mais que se passerait-il si vous pouviez les transformer en ebook?Il y a en f

(Conseils techniques et de conception)