Share
Ce que vous allez créerIl y a eu une tendance des serveurs Web «de conception plate de CMS». Cela fait simplement référence à un système de gestion de contenu (CMS) qui ne stocke pas ses informations dans une base de données. Au lieu de cela, toutes les informations sont stockées dans des fichiers de texte brut. Étant donné que de nombreux serveurs virtuels privés (VPS) utilisent de nos jours des disques durs à mémoire vive, cette approche est plus rapide et un peu plus sécurisée..
Dans cette série de didacticiels, je vais vous montrer comment créer votre propre système de fichiers à plat en utilisant une technologie Web standard. Ces systèmes ne sont pas aussi complets que les autres, mais ont les bases avec un bon temps de réponse.
Avec toutes les informations sur le disque dur, l'organisation des fichiers devient un gros problème. Dans cet esprit, les informations du site seront dans un répertoire différent de celui du style et de la mise en page. De plus, chaque type de page a son propre répertoire dans le dossier du site avec un répertoire de pièces pour les petites parties du CMS. Cela garde tout à sa place et rend un système flexible.
Dans le répertoire dans lequel vous allez construire le projet, créez les répertoires suivants: src, site, et des thèmes. le src répertoire contiendra le code du serveur, le site répertoire est pour toutes les informations du site, et le des thèmes répertoire pour la mise en page et les informations de thème.
dans le des thèmes répertoire, vous devez faire un mises en page et un coiffant annuaire. le mises en page répertoire contiendra les différentes mises en page Web. En séparant les informations de présentation des informations de style, les thèmes deviennent beaucoup plus flexibles. Pour le moment, il y aura une mise en page appelée SingleCol.
Pour tout le style et la mise en page, j'utilise Toupet, Boussole, et Susy. Toupet est un langage de traitement de feuille de style personnalisé. Il offre un moyen plus robuste de créer les feuilles de style CSS pour votre site Web.. Boussole est une extension de Sass. Boutons impertinents est une extension Sass permettant de créer de jolis boutons sur le site. Susy est également une extension permettant de créer un système de présentation de grille pour votre site.
Comme Ruby est pré-installé sur tous les Mac, vous n’avez pas besoin de l’installer. Pour obtenir Ruby sur un système Windows, vous devez télécharger le programme d'installation Windows de Ruby. Sous Linux, vous devez utiliser le gestionnaire de paquets de votre système pour installer Ruby..
Une fois que Ruby est sur votre système, vous pouvez installer Sass, Compass, Sassy-buttons et Susy avec les lignes de commande suivantes:
bem gem installer sass gem installer sassy-boutons gem installer compas gem installer susy
Pour ce tutoriel, j'utilise Sass 3.4.16, Sassy-buttons 0.2.6, Compass 1.0.3 et Susy 2.2.5. Selon la configuration de votre système, vous devrez peut-être exécuter ces commandes avec sudo avant eux.
Pour commencer à créer des modèles, exécutez ces commandes dans le SingleCol annuaire:
bash boussole init
Cela va créer le toupet et feuilles de style répertoires et un fichier nommé config.rb. Depuis que j'aime utiliser css pour le répertoire de la feuille de style, renommez le feuilles de style répertoire à css. Aussi, créez un js répertoire pour tous les fichiers JavaScript nécessaires à la mise en page. Ouvrez le config.rb fichier et le faire ressembler à celui-ci:
ruby nécessite 'susy' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "js"
Maintenant, pour créer la disposition de base du site Web, créez un fichier dans le disposition répertoire appelé template.html. Dans ce fichier, ajoutez ce code:
"html
"
Ce modèle crée une page Web standard pour le site. Chaque page comporte un en-tête avec une barre de navigation, une barre latérale unique, une zone de contenu et une zone de pied de page. La dernière chose chargée est les javascripts nécessaires au site..
Chaque section est représentée avec un Guidon macro. Le serveur développe les macros avant de les donner à l'utilisateur.
dans le toupet répertoire, créez un fichier appelé base.scss et placez ce code:
"css @import 'compass / reset'; @import 'susy';
$ susy: (débit: ltr, math: fluide, sortie: float, position de la gouttière: après, conteneur: auto, position du conteneur: centre, colonnes: 16, gouttières: 0,25, largeur de colonne: faux, global-box -sizing: content-box, last-flow: to, debug: (image: hide, couleur: rgba (# 66f, .25), sortie: fond, bascule: en haut à droite,), use-custom: (background-image : true, options de fond: false, taille de la boîte: true, clearfix: false, rem: true,));
corps
@include le conteneur (16); largeur: 1024px; bloc de visualisation;
@include span (16 sur 16); marge inférieure: 20 px;
marge supérieure: 20px; marge gauche: auto; marge droite: auto; largeur: 95%;
@include span (11 sur 16);
.col1 @include span (5 sur 10);
.col2 @include span (dernier 5 des 10);
largeur: auto;
.box @include span (4 sur 10);
@include span (dernier 4 des 16);
@include span (16 sur 16);
/ ** Menu déroulant CSS ** /
marge supérieure: 20px; marge gauche: auto; marge droite: auto; largeur: 95%;
en haut: 1em; à gauche: 1em; affichage: en ligne; largeur: 100%;
marge supérieure: 1em; affichage: en ligne; largeur: 100%;
affichage: inline-block; largeur: fit-content;
text-align: center; bloc de visualisation; espace blanc: maintenant; marge: 0; rembourrage: 5px; texte-décoration: aucun;
style de liste: aucun; marge: 0px 20px 0px 20px; remplissage: 0px;
position: relative; hauteur min .: 1px; alignement vertical: bas; largeur: fit-content;
position: absolue; z-index: 500; en haut: 50 px; à gauche: 20px; affichage: aucun; rembourrage: 0.5em; marge: -1em 0 0 -1em;
#menuh ul ul li width: 100%;
text-align: left;
gauche: 90px;
div # menuh li: survol curseur: pointeur; z-index: 100;
div # menuh li: survol ul ul, div # menuh li li: survol ul ul, div # menuh li li: survol ul ul, div # menuh li li li: survol ul ul display: none;
div # menuh li: survol ul, div # menuh li li: survol ul, div # menuh li li: survol ul, div # menuh li li li li: hover ul display: block;
/ * Fin du menu déroulant CSS * / "
Ce toupet le code est chargé dans les styles de réinitialisation de la boussole pour neutraliser les valeurs par défaut du navigateur. Ensuite, il charge et met en place Susy pour créer la grille appropriée pour tous les éléments de la page Web.
le css système de navigation est après la page définit. Les menus déroulants masqués des menus deviennent visibles avec les définitions survolées. Cela donne un css seul système de menu.
Tous ces styles définissent la structure de base du site. Rien ici ne crée un regard sur la page, juste son positionnement. Tout le style est traité par le coiffant contenu.
Pour le coiffant répertoire, créez un répertoire appelé De base. Initialiser le toupet informations comme faites pour la layouts / SingleCol annuaire. Dans ce répertoire, exécutez la ligne de commande suivante:
bash boussole init
Cela va créer le toupet et feuilles de style répertoires et un fichier nommé config.rb. Depuis que j'aime utiliser css pour le répertoire de la feuille de style, renommez le feuilles de style répertoire à css. Aussi, créez un js répertoire pour tout JavaScript pour créer le thème. Ouvrez le config.rb fichier et le faire ressembler à celui-ci:
ruby require 'sassy-buttons' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "js"
Pour les boutons de style sur le site Web, j'aime utiliser boutons impertinents. Par conséquent, il est nécessaire d’abord, puis la structure de répertoires.
dans le Basic / sass répertoire, créez le Basic.scss fichier avec cette information:
"css // Bienvenue dans Compass. // Dans ce fichier, vous devez écrire vos styles principaux. (ou centraliser vos importations) // Importez ce fichier à l'aide du code HTML suivant ou équivalent: // // @import 'compass / css3'; @import 'sassy-buttons';
$ style-color1: rgb (247, 237, 222); $ style-color2: # ffedd1; $ style-color3: rgb (245, 213, 166); $ style-color4: # f0d5ad;
// // Clear Fix // .clearfix: after content: '.'; bloc de visualisation; clarifier les deux; visibilité: cachée; hauteur de ligne: 0; hauteur: 0;
.clearfix display: inline-block;
html [xmlns] .clearfix display: block;
// // Style principal pour le bois. // @mixin standardsize padding-top: 10px; padding-left: 15px; taille de police: 19px; hauteur de ligne: 1,25 m;
body background-color: $ style-color2;
Accentsconagua
input [type = 'button'] @include sassy-button ('brillant', 10px, 16px, $ style-color1, plus foncé ($ style-color1, 20%), # 000, gras); .button @include sassy-button ('brillant', 10px, 16px, $ style-color1, assombrir ($ style-color1, 20%), # 000, gras); display: hériter; marge gauche: auto; marge droite: auto; marge supérieure: 10 px; marge inférieure: 10px; text-align: center; #wrap background-color: $ style-color1; @include border-radius (.6em, .6em); marge supérieure: 10 px; marge inférieure: 10px; bordure: 4px solide $ style-color4; #header background-color: $ style-color2; @include border-radius (15px); répétition de fond: non répétée; bordure: 2px solid $ style-color3; hauteur: 130px; text-align: left; marge supérieure: 20px; taille de police: 3em; h1 a: lien, a: visité color: # 000; texte-décoration: aucun; padding-top: 40px; padding-left: 20px; h6 font-size: .4em; style de police: italique; padding-left: 20px; #sidebar background-color: $ style-color2; @include border-radius (.6em, .6em); rembourrage: .6em; vertical-align: text-top; débordement caché; marge droite: .5em; bordure: 2px solid $ style-color3; hr color: $ style-color2; couleur de fond: $ style-couleur2; p, ul, li @include standardsize; ul li list-style-type: disc; marge gauche: 25px; rembourrage: 0; bordure: 0; contour: 0; taille de police: 100%; alignement vertical: ligne de base; fond: transparent; li margin-bottom: 10px; h1, h2, h3, h4, h5, h6 @include standardsize; poids de police: gras; marge supérieure: 0,25 µm; marge inférieure: 0,25 µm; h1 font-size: 2.5em; h2 font-size: 2em; h3 font-size: 1.5em; h4 font-size: 1em; h5 font-size: .8em; h6 font-size: .6em; input [type = 'button'] margin-left: 120px; clarifier les deux; #content input [type = 'button']] margin-left: 200px; clarifier les deux; h1, h2, h3, h4, h5, h6 @include standardsize; poids de police: gras; marge supérieure: 0,25 µm; marge inférieure: 0,25 µm; h1 font-size: 2.5em; h2 font-size: 2em; h3 font-size: 1.5em; h4 font-size: 1em; h5 font-size: .8em; h6 font-size: .6em; hr margin-top: 30px; marge inférieure: 30 px; p, ul, li, détails, résumé, pre @include standardsize; details p, pre margin-left: 25px; ul li list-style-type: disc; marge gauche: 25px; rembourrage: 0; bordure: 0; contour: 0; taille de police: 100%; alignement vertical: ligne de base; fond: transparent; li margin-bottom: 10px; .box clear: both; couleur de fond: $ style-couleur4; float: aucun; marge gauche: auto; marge droite: auto; marge supérieure: 1,0 µm; marge en bas: 1em; @include border-radius (.6em, .6em); bloc de visualisation; rembourrage: .5em; img @include border-radius (10px); marge: 20px auto 20px auto; #footer border-top: 5px; style de bordure: solide; border-color: $ style-color3; @include border-radius (.6em, .6em); marge supérieure: 30px; p margin-bottom: .6em; @include normaliser; marge droite: 15px; // Menu déroulant CSS #navigation text-align: left; bordure: 2px solid $ style-color3; couleur de fond: $ style-couleur2; @include border-radius (15px);
taille de police: 1.3em; famille de polices: arial, helvetica, sans-serif; couleur de fond: $ style-couleur1;
couleur de fond: $ style-couleur2;
couleur de fond: $ style-couleur2; @include border-radius (15px); bordure: 2px solid $ style-color3;
couleur de fond: $ style-couleur2; couleur: # 000;
couleur: # 000; couleur de fond: $ style-couleur2;
couleur: # 000; couleur de fond: $ style-couleur4; @include border-radius (5px);
// Fin du menu déroulant CSS // Classes diverses .picture border: 3px solid $ style-color3; @include border-radius (8px); float: gauche; marge: 5px 15px 15px 15px;
a: lien, a: visité couleur: assombrir ($ style-color1, 50); texte-décoration: aucun;
fort poids de police: gras;
table marge: 20px; bordure: solide 3px; @include border-radius (10px); border-color: alléger ($ style-color2, 6); th text-align: center; poids de police: gras; remplissage: 10px 0 10px 0; tbody td padding: 10px; tr: nième enfant (2n + 1) background-color: darken ($ style-color2, 5); tr: nième enfant (pair) background-color: lighten ($ style-color2, 2.5);
largeur: 100%; marge supérieure: 20px; marge gauche: 15px;
.tutorial_excerpt margin-left: 20px;
.tutorial_thumbnail float: left; marge droite: 20px; marge gauche: 20px; marge inférieure: 20 px;
.tutorial_wrap margin-bottom: 50px; float: gauche;
img.wp-post-image -moz-border-radius: 15px; border-radius: 15px; box-shadow: 10 pixels 10 pixels 5 pixels gris;
.showcode margin: 20px auto 20px 30px; -moz-border-radius: 15px; border-radius: 15px; bordure: $ style-color4 3px; style de bordure: solide; fond blanc;
largeur: 700px; marge supérieure: 20px; marge gauche: 15px;
marge: auto;
opacité: 0,8; filtre: alpha (opacité = 80); -webkit-transition: tous les 0.2s faciles à installer; -moz-transition: toutes les 0,2 secondes faciles d'accès; -ms-transition: tous les 0.2s faciles à insérer; -o-transition: toutes les 0,2 secondes faciles à sortir; transition: toutes les 0,2 secondes faciles à obtenir;
opacité: 1; filtre: alpha (opacité = 100);
affichage: inline-block; hauteur: 28px; largeur: 30px; background-image: url (/images/ico-subscribe-social.png); répétition de fond: non répétée;
position d'arrière-plan: -30px 0;
position d'arrière-plan: -60px 0;
position d'arrière-plan: -210px 0;
dl margin-left: 20px; marge supérieure: 20px; marge inférieure: 20 px; taille de police: 19px; hauteur de ligne: 1,25 m;
dt marge gauche: 20px; marge inférieure: 20 px; poids de police: gras;
dd margin-left: 40px; marge inférieure: 20 px; "
Ce code définit l'apparence du site. Il définit le fond, la couleur, les polices de caractères, etc. qui composent le style d'un site Web typique..
le style / basique Le répertoire contient les fichiers nécessaires à l'aspect par défaut des parties 404 de la page, de l'en-tête, du pied de page et de la barre latérale du site Web. Par conséquent, créez un fichier appelé 404.html et placez ce code:
"html
Désolé, nous n'avons pas trouvé la page.
"
Ceci est une base 404 page d'erreur. Vous devez faire attention aux informations données ici, car vous ne voulez pas révéler trop d'informations sur le fonctionnement de votre site. Comme cela sera placé dans le Contenu zone de la page, il sera facile pour l'utilisateur de naviguer en dehors de celle-ci.
Ensuite, créez le header.html fichier avec ce contenu:
"html
"
Ceci est juste un en-tête sans description qui est non-descriptif, mais cela donne quelque chose à montrer au CMS.
Ensuite, créez le footer.html fichier avec ce contenu:
"html
"Créez ensuite le fichier ** sidebar.html ** avec ce contenu:" htmlCeci est une barre latérale de base qui peut avoir d'autres moments.
"Encore une fois, ce sont des espaces réservés. Tous ces fichiers sont copiés dans le répertoire ** site / parts ** et modifiés en fonction des besoins du site. Ils sont ici pour que le serveur puisse utiliser quelque chose avec leur nom dans le serveur au cas où l'utilisateur oublierait de les créer. ## Structure du site Une fois les thèmes et les dispositions définis, il est temps de créer le contenu et la structure de base du site actuel. Dans le répertoire ** site **, créez les ** parties *. *, ** pages **, ** publications **, ** images **, ** css **, ** js ** répertoires. ### Parties Le répertoire ** parties ** contiendra de petits extraits de * * html / css / javascript ** permettant de placer une seule unité dans plusieurs emplacements du site Web. Ces parties sont en cours de chargement sur le serveur et combinées au contenu de la page, selon les besoins. Pour notre site de démonstration, créez les parties suivantes: - * * footer.html ** avec ce code: "html "- ** head.html ** avec ce code:" html "- ** header.html ** avec ce code:" htmlCeci est la page principale du site de test.
"- ** flatcms.md ** avec le code suivant:" plain ### Flat CMS Server Ceci est une page consacrée au serveur CMS non hiérarchique. "- ** about.md ** avec le code suivant:" plain ### About Ce serait un standard de page. "Ce sont les pages de démonstration du site. Le seul fichier requis est ** main.html ** car le serveur chargera le contenu de cette page en mémoire et le servira à partir de la mémoire. Cela accélérera le chargement de la page d'accueil du site Web. Les deux autres pages portent l'extension ** md ** car elles sont au format ** Markdown **. Le serveur traduira le contenu au format HTML avant de l'intégrer à la mise en page. En général Les pages contiennent des informations qui ne changent pas beaucoup dans le temps. Elles fournissent au spectateur des informations sur le site, son but et ses objectifs. Les pages peuvent être de nature hiérarchique en créant des répertoires et des sous-répertoires avec des pages. Ces noms de répertoires Répertoire de ces pages. ### Articles Contrairement aux pages, les articles sont ajoutés régulièrement, par exemple des articles de blog quotidiens / hebdomadaires / mensuels. et des nouvelles. Cette zone devrait changer souvent. Dans le répertoire ** posts **, créez deux nouveaux répertoires: ** blogs ** et ** news **. Dans chacun de ces répertoires, créez un répertoire ** flatcms **. Ceux-ci contiendront les articles de blog et les nouvelles pour le site Web ** Flat CMS **. Dans le répertoire ** posts / blogs / flatcms **, créez les fichiers suivants: - ** index.amber ** avec le contenu suivant: "plain h3 Flat CMS Blog p Ceci est un blog de rambling sur un CMS plat. Article mixin ( $ title, $ link, $ extrait, $ date) div.entry div.tutorial_wrap div.tutorial_div a [href = $ link] h3 # $ title h5 # $ date p.tutorial_excerpt # $ excerpt div. clear + article ("Flat CMS Running", "/ posts / blogs / flatcms / flatcms", "Le serveur de test Flat CMS est en cours d'exécution!", "12 août 2015") "- ** flatcms.md ** avec ce contenu : "plain Le nouveau serveur est en cours d'exécution ---- Après beaucoup de travail et de programmation, le serveur CMS plat est en cours d'exécution. Restez à l'écoute pour plus d'informations! socialmedia" Le ** index.amber ** est un * * [Jade] (http://jade-lang.com/) ** modèle pour définir les différents articles du blog. Le système de modèles ** Jade ** HTML facilite l'ajout de nouveau contenu avec un format exact. Les paramètres des macros constituent les différents éléments. Vous pouvez trouver plus d'informations sur [Jade on Tuts +] (https://webdesign.tutsplus.com/categories/jade). Ici, l'extension utilisée est ** orange ** car l'équivalent ** en ** langue ** de ** Jade ** est ** [Orange] (https://github.com/eknkc/amber) **. Depuis que c’est là que j’ai commencé, c’est ainsi que j’ai réussi. Si vous souhaitez modifier l'extension, n'oubliez pas de la modifier également dans le code de serveur approprié. Dans le répertoire ** posts / news / flatcms **, créez les fichiers suivants: - ** index.amber ** avec le contenu suivant: "plain h3 Flat CMS News p Vous trouverez ici toutes les nouvelles concernant mes activités. Mixin article ($ title, $ link, $ extrait, $ date) div.entry div.tutorial_wrap div.tutorial_div une [href = $ link] h3 # $ title h5 # . $ date p.tutorial_excerpt # $ excerpt div.clear + article ("Flat CMS is Running", "/ posts / news / flatcms / flatcms", "Le serveur de test Flat CMS est en cours d'exécution!", "12 août, 2015 ")" - ** flatcms.md ** avec le contenu suivant: "Le nouveau serveur est en cours d'exécution ---- Après beaucoup de travail et de programmation, j'ai finalement tout transféré sur un serveur goPress que j'ai écrit moi-même. soyez également disponible. Restez à l’écoute! socialmedia "Ceci crée les nouvelles pour le site de démonstration. Sur mon site, j'utilise la même structure pour les tutoriels et les pages de démonstration de code. ### Images Tous les sites Web ont des images. Dans cette configuration, toutes les images se trouvent dans le répertoire ** site / images **. Pour ce site de démonstration, seules les icônes de médias sociaux seront placées ici. Vous pouvez obtenir le fichier image à partir du fichier à télécharger. ### Site CSS Même avec les ** layout css ** et ** styling css **, il y aura des moments où vous voudrez des règles spéciales ** css **. Le répertoire ** site / css ** contient tous les fichiers ** css ** qui complètent le site. Tous les fichiers ** layout **, ** styling ** et ** site / css ** seront compilés ensemble dans un fichier ** css **. Par conséquent, créez le répertoire ** site / css / final ** pour placer ce fichier compilé. Maintenant, créez le fichier ** site / css / site.css ** avec le contenu suivant: "css .clear clear: both; height: 0px;" Pas grand chose ici, juste une définition pour une classe 'claire'. Vous pouvez ajouter ce que vous voulez, mais cela devrait être quelque chose qui ne relève pas de la catégorie de mise en page ou de style. ### Scripts de site Le répertoire ** site / js ** contient tous les fichiers JavaScript spéciaux pour le site. Celles-ci seront compilées ensemble et réduites au minimum pour un chargement plus rapide du site. Pour l'instant, créez le répertoire ** site / js / final ** pour le script compilé et un fichier ** site / js / 01-site.js ** contenant le contenu suivant: "javascript; // // File: Site. js // // Description: le fichier JavaScript du site. // jQuery (document) .ready (function () // // Le code sera exécuté une fois la page chargée. //); "Il y a pas grand chose ici maintenant. Mais, comme votre site nécessite du JavaScript personnalisé, il peut être placé ici. Comme les scripts seront compilés ensemble, je les numérote dans l’ordre nécessaire au chargement. La routine de compilation des scripts les chargera dans l’ordre numérique. ### Automatisation avec Gulp Le moyen le plus simple d'accélérer le chargement d'une page Web consiste à avoir le moins de demandes HTTP possible. Par conséquent, il est préférable de combiner tous les fichiers CSS et JavaScript dans un fichier. La meilleure façon de compiler ces fichiers est d'utiliser un script de construction. L'exécuter à chaque fois que le serveur reçoit une demande est une perte de temps de traitement. Mon choix de coureurs de script d'automatisation est ** [Gulp] (http://gulpjs.com/) **. ** Gulp ** fonctionne sur ** [Node.js] (https://nodejs.org/) **. Par conséquent, accédez au site Web [Node.js] (https://nodejs.org/) et téléchargez le programme correspondant à votre système. Une fois que vous avez installé Node.js, vous pouvez installer ** Gulp ** comme suit: "bash npm install --global gulp npm install --global gulp npm install --global gulp-compass npm install --global gulp-autoprefixer npm install --global gulp-compresseur npm install --global gulp-concat "Ceci installera tous les modules ** Gulp ** et ** Gulp ** que j'utilise dans le script de construction. Maintenant, en haut de votre répertoire, créez le fichier ** gulpfile.js ** avec le contenu suivant: "javascript // Configuration requise var gulp = require ('gulp'), compass = require ('gulp-compass'), préfixe = require ('gulp-autoprefixer'), compresseur = require ('gulp-compresseur'), concat = require ('gulp-concat'); // définit le chemin d'accès à sass var Theme = "Base"; var Layout = "SingleCol "; var themesassRoot = 'themes / styling /' + Thème; var layoutsassRoot = 'themes / layouts /' + Layout; // Gulp task gulp.task ('theme-compass-to-css', function () return gulp .src (themesassRoot + '/ sass / Basic.scss') .pipe (compass (fichier_config: themesassRoot + '/config.rb', css: themesassRoot + '/ css', sass: themesassRoot + '/ sass', besoin de: 'boutons sassy')) .pipe (préfixe ("les 3 dernières versions")) .pipe (gulp.dest (themesassRoot + '/ css'))); gulp.task ('layout-compass-to-css ', function () return gulp.src (layoutsassRoot +' / sass / base.scss ') .pipe (compass (fichier_configuration: layoutsassRoot +' /config.rb ', css: layoutsassRoot +' / css ', sass: layoutsassRoot + '/ sass', nécessite: 'susy')) .pipe (prefix ("les 3 dernières versions")) .pipe (gulp.dest (layoutsassRoot + '/ css'))); gulp.task ('watch-compass', function () // Ce qu'il faut regarder gulp.watch (themesassRoot + '/sass/Basic.scss', function () // Ce qu'il faut exécuter gulp.run ('theme- compass-to-css ');); gulp.watch (layoutsassRoot +' /sass/Basic.scss ', function () // Quoi exécuter gulp.run (' layout-compass-to-css '); );); gulp.task ('all-compass', ['theme-compass-to-css', 'layout-compas-to-css']); // js compresseur gulp.task ('js', function () gulp.src ([layoutsassRoot + '/ js / *. js', themesassRoot + '/js/*.js', 'site / js / *. js ']) .pipe (compresseur), .pipe (concat ("final.js")) .pipe (gulp.dest (' site / js / final '));); // css compresseur gulp.task ('css', ['tout boussole'], fonction () gulp.src ([layoutsassRoot + '/ css / *. css', themesassRoot + '/css/*.css' , 'site / css / *. css']) .pipe (compresseur ()) .pipe (concat ("final.css")) .pipe (gulp.dest ('site / css / final'));) ; gulp.task ('default', ['all-compass', 'js', 'css']); "Ceci compilera tous les fichiers CSS et JavaScript dans un seul fichier: dans le ** site / css / final / final.css ** pour le fichier CSS, et dans le fichier ** site / js / final / final.js ** pour le fichier JavaScript. Il ajoutera également les règles de préfixe du navigateur pour le fichier CSS. commande: "bash gulp" ** Gulp ** compilera tous nos fichiers et les laissera au bon endroit. Chaque tâche définie dans le ** gulpfile.js ** peut être exécutée individuellement en donnant le nom de la tâche après le 'gulp Vous pouvez en savoir plus sur [Gulp on Tuts +] (https://webdesign.tutsplus.com/categories/gulpjs). ## Fichier de configuration du serveur Tous les serveurs ont besoin d'informations de configuration. Par conséquent, dans la racine du répertoire, créez le fichier ** server.json ** avec les informations suivantes: "json " CurrentLayout ":" SingleCol "," CurrentStyling ":" Basic "," ServerAddress ":" localhost: 8080 "," SiteTitle ":" Flat CMS Test Site "," Sitebase ":" ./site/ "," TemplatBase ":" ./themes/ "," Cache ": false, "MainBase": "" "Ce fichier ** json ** décrit des informations sur la mise en page à utiliser, le style à utiliser, l'adresse et le port que le serveur doit écouter, le nom principal du site avec un sous-titre, un indicateur de mise en cache pour activer et désactiver la mise en cache à des fins de débogage, ainsi que l'emplacement des différents répertoires utilisés pour le site. En fournissant ces informations au serveur dans un fichier ** json **, le serveur peut être flexible, avec des informations moins codées en dur. ## Téléchargement du site sur un serveur La plupart des gens utilisent un client FTP pour copier les fichiers sur leur serveur. Ceci est facile à faire, mais varie grandement en fonction du système et des programmes utilisés. Mais il y a des alternatives. Vous pouvez configurer un démon ** [Dropbox] (http://dropbox.com/) ** pour charger votre site à partir de votre compte Dropbox. Le site [Dropbox Wiki] (http://www.dropboxwiki.com/tips-and-tricks/install-dropbox-in-an-entirely-text-based-linux-en