Share
Cosa starai creandoC'è stata una tendenza dei webserver "flat CMS design". Questo si riferisce semplicemente a un Content Management System (CMS) che non memorizza le sue informazioni in un database. Invece, tutte le informazioni sono memorizzate in file di testo. Poiché molti server virtuali privati (VPS) oggigiorno utilizzano dischi rigidi basati su RAM, questo approccio è più veloce e un po 'più sicuro.
In questa serie di tutorial, ti mostrerò come creare il tuo CMS flat file system utilizzando una tecnologia web standard. Questi sistemi non sono così completi come altri, ma hanno le basi con un buon tempo di risposta.
Con tutte le informazioni sul disco rigido, l'organizzazione dei file diventa un grosso problema. Con questo in mente, le informazioni sul sito saranno in una directory diversa rispetto alle informazioni sullo stile e sul layout. Inoltre, ogni tipo di pagina ha la propria directory sotto la cartella del sito con una directory delle parti per piccole parti del CMS. Ciò mantiene tutto al proprio posto e rende un sistema flessibile.
Nella directory in cui stai andando a costruire il progetto, crea le seguenti directory: src, posto, e temi. Il src la directory conterrà il codice del server, il posto directory è per tutte le informazioni del sito, e il temi directory per il layout e le informazioni tematiche.
Nel temi directory, è necessario creare un layout e a messa in piega directory. Il layout directory conterrà i diversi layout di pagina web. Separando le informazioni di layout dalle informazioni sullo stile, i temi diventano molto più flessibili. Per ora, ci sarà un layout chiamato SingleCol.
Sto usando per tutto lo styling e la creazione del layout insolenza, Bussola, e susy. insolenza è un linguaggio di elaborazione di fogli stile personalizzato. Offre un modo più efficace per creare fogli di stile CSS per il tuo sito web. Bussola è un'estensione di Sass. Sassy-pulsanti è un'estensione Sass per creare bellissimi pulsanti sul sito web. susy è anche un'estensione per creare un sistema di layout di griglia per il tuo sito.
Poiché Ruby è preinstallato su tutti i Mac, non è necessario installarlo. Per ottenere Ruby su un sistema Windows, dovrai scaricare Ruby's Windows Installer. Su Linux, è necessario utilizzare il gestore dei pacchetti del sistema per installare Ruby.
Una volta che Ruby è sul tuo sistema, puoi installare Sass, Compass, Sassy-buttons e Susy con queste linee di comando:
bash gem installa sass gem installa sassy-buttons gem installa bussola gem installazione susy
Per questo tutorial, sto usando Sass 3.4.16, Sassy-buttons 0.2.6, Compass 1.0.3 e Susy 2.2.5. A seconda della configurazione del sistema, potrebbe essere necessario eseguire questi comandi con sudo prima di loro.
Per iniziare a creare layout, esegui questi comandi in SingleCol directory:
bussola bash init
Questo creerà il insolenza e fogli di stile directory e un file chiamato config.rb. Dato che mi piace usare css per la directory del foglio di stile, rinominare il file fogli di stile directory a css. Inoltre, crea un js directory per eventuali file JavaScript necessari per il layout. Apri il config.rb file e fallo apparire come questo:
ruby richiede 'susy' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "immagini" javascripts_dir = "js"
Ora, per creare il layout di base del sito Web, creare un file nel disposizione directory chiamata template.html. In questo file, aggiungi questo codice:
"html
"
Questo modello crea una pagina Web standard per il sito. Ogni pagina ha un'intestazione con una barra di navigazione, una barra laterale singola, un'area del contenuto e un'area del piè di pagina. L'ultima cosa caricata sono i javascript necessari per il sito.
Ogni sezione è rappresentata con a Manubrio macro. Il server espande le macro prima di darlo all'utente.
Nel insolenza directory, creare un file chiamato base.scss e inserisci questo codice:
"css @import 'compass / reset'; @import 'susy';
$ susy: (flow: ltr, math: fluid, output: float, gutter-position: after, container: auto, container-position: center, colonne: 16, gutters: .25, column-width: false, global-box -misura: content-box, last-flow: to, debug: (immagine: nascondi, colore: rgba (# 66f, .25), output: background, toggle: in alto a destra,), use-custom: (background-image : true, background-options: false, dimensionamento della casella: true, clearfix: false, rem: true,));
corpo
@include container (16); larghezza: 1024 px; blocco di visualizzazione;
@include span (16 di 16); margin-bottom: 20px;
margin-top: 20px; margin-left: auto; margin-right: auto; larghezza: 95%;
@include span (11 di 16);
.col1 @include span (5 su 10);
.col2 @include span (ultimi 5 di 10);
larghezza: auto;
.box @include span (4 su 10);
@include span (ultimi 4 di 16);
@include span (16 di 16);
/ ** menu a discesa CSS ** /
margin-top: 20px; margin-left: auto; margin-right: auto; larghezza: 95%;
inizio: 1em; a sinistra: 1em; display: inline; larghezza: 100%;
margin-top: 1em; display: inline; larghezza: 100%;
display: blocco in linea; larghezza: contenuto adatto;
text-align: center; blocco di visualizzazione; white-space: nowrap; margin: 0; imbottitura: 5px; decorazione del testo: nessuna;
list-style: none; margine: 0px 20px 0px 20px; imbottitura: 0px;
posizione: relativa; altezza minima: 1px; vertical-align: bottom; larghezza: contenuto adatto;
posizione: assoluta; z-index: 500; top: 50px; a sinistra: 20px; display: nessuno; imbottitura: 0,5em; margine: -1em 0 0 -1em;
#menuh ul ul li larghezza: 100%;
allineamento del testo: a sinistra;
a sinistra: 90px;
div # menuh li: hover cursor: pointer; z-index: 100;
div # menuh li: hover ul ul, div # menuh li li: hover ul ul, div # menuh li li li: hover ul ul, div # menuh li li li li: hover ul ul display: none;
div # menuh li: hover ul, div # menuh li li: hover ul, div # menuh li li li: hover ul, div # menuh li li li li: hover ul display: block;
/ * Fine menu a discesa CSS * / "
Questo insolenza caricamento del codice nella bussola ripristina gli stili per neutralizzare i valori predefiniti del browser. Quindi carica e imposta susy per creare la griglia corretta per tutti gli elementi della pagina web.
Il css il sistema di navigazione è dopo che la pagina è stata definita. I menu a discesa nascosti per i menu diventano visibili con le definizioni del passaggio del mouse. Questo dà a css solo sistema di menu.
Tutti questi stili definiscono la struttura di base del sito. Niente qui crea uno sguardo alla pagina, solo il suo posizionamento. Tutto lo styling viene gestito da messa in piega soddisfare.
Per il messa in piega directory, creare una directory chiamata Di base. Inizializza il insolenza informazioni come fatte per il layout / SingleCol directory. In questa directory, eseguire la seguente riga di comando:
bussola bash init
Questo creerà il insolenza e fogli di stile directory e un file chiamato config.rb. Dato che mi piace usare css per la directory del foglio di stile, rinominare il file fogli di stile directory a css. Inoltre, crea un js directory per qualsiasi JavaScript per la creazione del tema. Apri il config.rb file e fallo apparire come questo:
ruby richiede 'sassy-buttons' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "immagini" javascripts_dir = "js"
Mi piace usare i pulsanti per lo styling sul sito web sassy-pulsanti. Pertanto, è necessario prima e quindi la struttura della directory.
Nel Basic / sass directory, crea il Basic.scss file con queste informazioni:
"css // Benvenuto in Compass. // In questo file devi scrivere i tuoi stili principali (o centralizzare le tue importazioni) // Importa questo file usando il seguente HTML o equivalente: // // @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: '.'; blocco di visualizzazione; chiaro: entrambi; visibilità: nascosta; altezza della linea: 0; altezza: 0;
.clearfix display: inline-block;
html [xmlns] .clearfix display: block;
// // Styling principale per legno. // @mixin standardize padding-top: 10px; padding-left: 15px; dimensione carattere: 19px; line-height: 1.25em;
body background-color: $ style-color2;
Accentsconagua
input [type = 'button'] @include sassy-button ('shiny', 10px, 16px, $ style-color1, darken ($ style-color1, 20%), # 000, grassetto); .button @include sassy-button ('shiny', 10px, 16px, $ style-color1, darken ($ style-color1, 20%), # 000, grassetto); display: inherit; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px; allineamento del testo: centro; #wrap background-color: $ style-color1; @include border-radius (.6em, .6em); margin-top: 10px; margin-bottom: 10px; border: 4px solid $ style-color4; #header background-color: $ style-color2; @include border-radius (15px); background-repeat: no-repeat; border: 2px solid $ style-color3; altezza: 130 px; allineamento del testo: a sinistra; margin-top: 20px; font-size: 3em; h1 a: link, a: visited color: # 000; decorazione del testo: nessuna; padding-top: 40px; padding-left: 20px; h6 font-size: .4em; stile di carattere: corsivo; padding-left: 20px; #sidebar background-color: $ style-color2; @include border-radius (.6em, .6em); imbottitura: .6em; vertical-align: text-top; overflow: nascosto; margine-destra: .5em; border: 2px solid $ style-color3; hr color: $ style-color2; background-color: $ style-color2; p, ul, li @include standardize; ul li list-style-type: disc; margin-left: 25px; padding: 0; confine: 0; contorni: 0; dimensione carattere: 100%; vertical-align: baseline; sfondo: trasparente; li margin-bottom: 10px; h1, h2, h3, h4, h5, h6 @include standardize; font-weight: bold; margin-top: .25em; margin-bottom: .25em; 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; chiaro: entrambi; #content input [type = 'button'] margin-left: 200px; chiaro: entrambi; h1, h2, h3, h4, h5, h6 @include standardize; font-weight: bold; margin-top: .25em; margin-bottom: .25em; 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; margin-bottom: 30px; p, ul, li, dettagli, riepilogo, pre @include standardize; dettagli p, pre margin-left: 25px; ul li list-style-type: disc; margin-left: 25px; padding: 0; confine: 0; contorni: 0; dimensione carattere: 100%; vertical-align: baseline; sfondo: trasparente; li margin-bottom: 10px; .box clear: both; background-color: $ style-color4; float: none; margin-left: auto; margin-right: auto; margin-top: 1.0em; margin-bottom: 1em; @include border-radius (.6em, .6em); blocco di visualizzazione; imbottitura: .5em; img @include border-radius (10px); margine: 20px auto 20px auto; #footer border-top: 5px; border-style: solido; border-color: $ style-color3; @include border-radius (.6em, .6em); margin-top: 30px; p margin-bottom: .6em; @include standardize; margin-right: 15px; // menu a discesa CSS #navigation text-align: left; border: 2px solid $ style-color3; background-color: $ style-color2; @include border-radius (15px);
font-size: 1.3em; font-family: arial, helvetica, sans-serif; background-color: $ style-color1;
background-color: $ style-color2;
background-color: $ style-color2; @include border-radius (15px); border: 2px solid $ style-color3;
background-color: $ style-color2; colore: # 000;
colore: # 000; background-color: $ style-color2;
colore: # 000; background-color: $ style-color4; @include border-radius (5px);
// Fine menu a discesa CSS // Varie classi .picture border: 3px solid $ style-color3; @include border-radius (8px); fluttuare: a sinistra; margine: 5px 15px 15px 15px;
a: link, a: visited color: darken ($ style-color1, 50); decorazione del testo: nessuna;
strong font-weight: bold;
table margin: 20px; bordo: 3 px solido; @include border-radius (10px); border-color: lighten ($ style-color2, 6); th text-align: center; font-weight: bold; imbottitura: 10px 0 10px 0; tbody td padding: 10px; tr: nth-child (2n + 1) background-color: darken ($ style-color2, 5); tr: nth-child (pari) background-color: lighten ($ style-color2, 2.5);
larghezza: 100%; margin-top: 20px; margin-left: 15px;
.tutorial_excerpt margin-left: 20px;
.tutorial_thumbnail float: left; margin-right: 20px; margin-left: 20px; margin-bottom: 20px;
.tutorial_wrap margin-bottom: 50px; fluttuare: a sinistra;
img.wp-post-image -moz-border-radius: 15px; border-radius: 15px; box-shadow: 10px 10px 5px grigio;
.showcode margin: 20px auto 20px 30px; -moz-border-radius: 15px; border-radius: 15px; border: $ style-color4 3px; border-style: solido; sfondo: bianco;
larghezza: 700 px; margin-top: 20px; margin-left: 15px;
margine: auto;
opacità: 0.8; filtro: alfa (opacità = 80); -webkit-transition: tutti gli eas-in-out 0.2s; -moz-transition: tutti gli 0.2-in-out-out; -ms-transition: tutti gli 0.2-in-out-out; -o-transizione: tutti gli eas-in-out 0.2s; transizione: tutti gli 0.2-in-out-out;
opacità: 1; filtro: alfa (opacità = 100);
display: blocco in linea; altezza: 28 px; larghezza: 30 px; background-image: url (/images/ico-subscribe-social.png); background-repeat: no-repeat;
posizione di sfondo: -30px 0;
posizione di sfondo: -60px 0;
background-position: -210px 0;
dl margin-left: 20px; margin-top: 20px; margin-bottom: 20px; dimensione carattere: 19px; line-height: 1.25em;
dt margin-left: 20px; margin-bottom: 20px; font-weight: bold;
dd margin-left: 40px; margin-bottom: 20px; "
Questo codice definisce come apparirà il sito web. Definisce lo sfondo, i colori, i caratteri, ecc. Che costituiscono lo stile di un sito web tipico.
Il styling / base la directory contiene i file necessari per l'aspetto predefinito delle pagine 404, intestazione, piè di pagina e parti della barra laterale del sito Web. Pertanto, creare un file chiamato 404.html e inserisci questo codice:
"html
Siamo spiacenti, non siamo riusciti a trovare la pagina.
"
Questa è una base 404 pagina di errore. Devi stare attento alle informazioni fornite qui, perché non vuoi rivelare troppe informazioni su come funziona il tuo sito. Dal momento che questo sarà inserito nel contenuto area della pagina, sarà facile per l'utente allontanarsi da esso.
Quindi, crea il header.html file con questo contenuto:
"html
"
Questo è solo un header bare-bone che non è descrittivo, ma dà al CMS qualcosa da mostrare.
Quindi, crea il footer.html file con questo contenuto:
"html
"Successivamente, crea il file ** sidebar.html ** con questo contenuto:" htmlQuesta è una barra laterale di base che può avere altre volte.
"Ancora una volta, questi sono segnaposto: tutti questi file vengono copiati nella directory ** sito / parti ** e modificati in base alle esigenze del sito. Sono qui in modo che il server abbia qualcosa con i loro nomi da utilizzare nel server nel caso in cui l'utente si dimentichi di crearli. ## Struttura del sito Con il tema e i layout definiti, è il momento di creare il contenuto e la struttura di base per il sito reale. Nella directory ** site **, creare le ** parti * *, ** pagine **, ** post **, ** immagini **, ** css **, ** js ** directory. ### Parti La directory ** parts ** conterrà piccoli snippet di * * html / css / javascript ** che renderà una singola unità collocata in più posizioni del sito Web. Queste parti vengono caricate nel server e combinate con i contenuti della pagina secondo necessità.Per il nostro sito demo, creare le seguenti parti: - * * footer.html ** con questo codice: "html "- ** head.html ** con questo codice:" html "- ** header.html ** con questo codice:" htmlQuesta è la pagina principale del sito di test.
"- ** flatcms.md ** con questo codice:" plain ### Flat CMS Server Questa è una pagina sul server CMS flat. "- ** about.md ** con questo codice:" plain ### Informazioni Questo sarebbe uno standard sulla pagina. "Queste sono le pagine demo del sito. L'unico file richiesto è ** main.html ** poiché il server caricherà il contenuto di questa pagina in memoria e servirà dalla memoria. il caricamento della prima pagina del sito Web. Le altre due pagine hanno l'estensione ** md ** perché sono in formato ** Markdown **. Il server tradurrà il contenuto in HTML prima di incorporare il layout della pagina. Le pagine contengono informazioni che non cambiano molto nel tempo e forniscono al visitatore informazioni sul sito, il suo scopo e i suoi obiettivi.Le pagine possono essere di natura gerarchica creando directory e sottodirectory con pagine. directory di queste pagine. ### Post A differenza delle pagine, i post sono elementi che vengono aggiunti regolarmente, ad esempio, post di blog giornalieri / settimanali / mensili e notizie Questa zona dovrebbe cambiare spesso. Nella directory ** posts **, crea due nuove directory: ** blog ** e ** notizie **. In ciascuna di queste directory, creare una directory ** flatcms **. Questi conterranno i post del blog e le notizie per il sito Web ** Flat CMS **. Nella directory ** posts / blogs / flatcms **, crea i seguenti file: - ** index.amber ** con questi contenuti: "plain h3 Flat CMS Blog p Questo è un blog sconclusionato su un CMS piatto. $ title, $ link, $ excerpt, $ 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 / blog / flatcms / flatcms", "Flat CMS Test Server è in esecuzione!", "12 agosto 2015") "- ** flatcms.md ** con questi contenuti : "plain The New Server is Running ---- Dopo molto lavoro e programmazione, il server CMS flat è in esecuzione. Resta sintonizzato per ulteriori notizie! socialmedia" Il ** index.amber ** è un * * [Jade] (http://jade-lang.com/) ** modello per definire i diversi post nel blog. Il sistema di template HTML ** Jade ** semplifica l'aggiunta di nuovi contenuti con un formato esatto. I parametri delle macro costituiscono i diversi elementi. Puoi trovare maggiori informazioni su [Jade on Tuts +] (https://webdesign.tutsplus.com/categories/jade). Qui, l'estensione utilizzata è ** ambra ** perché la lingua ** Vai ** equivalente a ** Giada ** è ** [Ambra] (https://github.com/eknkc/amber) **. Poiché è da lì che ho iniziato, è così che sono arrivato. Se si desidera modificare l'estensione, ricordarsi di cambiarla anche nel codice server appropriato. Nella directory ** posts / news / flatcms **, crea i seguenti file: - ** index.amber ** con questi contenuti: "plain h3 Flat CMS News p Ecco dove vengono trovate tutte le notizie su ciò che sto facendo Per favore torna spesso a dare un'occhiata! Articolo mixin ($ title, $ link, $ excerpt, $ date) div.entry div.tutorial_wrap div.tutorial_div a [href = $ link] h3 # $ title h5 # $ date p.tutorial_excerpt # $ excerpt div.clear + article ("CMS flat è in esecuzione", "/ posts / news / flatcms / flatcms", "Il server di test CMS flat è in esecuzione!", "12 agosto, 2015 ")" - ** flatcms.md ** con questi contenuti: "plain Il nuovo server è in esecuzione ---- Dopo molto lavoro e programmazione, finalmente ho spostato tutto su un server goPress che ho scritto io stesso. rendi questo disponibile anche per te. Resta sintonizzato! socialmedia "Questo crea le notizie per il sito demo. Nel mio sito, utilizzo la stessa struttura per esercitazioni e pagine demo di codice. ### Immagini Tutti i siti Web hanno immagini. In questa configurazione, tutte le immagini si trovano nella directory ** sito / immagini **. Per questo sito demo, qui verranno posizionate solo le icone dei social media. È possibile ottenere il file immagine dal file di download. ### CSS del sito Anche con ** layout css ** e ** styling css **, ci saranno volte in cui vorrai regole speciali ** css **. La directory ** site / css ** contiene tutti i file ** css ** che danno il tocco finale al sito web. Tutti i file ** layout **, ** styling ** e ** site / css ** verranno compilati insieme in un file ** css **. Pertanto, crea la directory ** site / css / final ** per posizionare questo file compilato. Ora crea il file ** site / css / site.css ** con questi contenuti: "css .clear clear: both; height: 0px;" Non molto qui - solo una definizione per una classe "clear". È possibile aggiungere ciò che si desidera, ma dovrebbe essere qualcosa che non rientra nella categoria di layout o di stile. ### Script del sito La directory ** site / js ** contiene tutti i file JavaScript speciali per il sito. Questi saranno compilati insieme e ridotti al minimo per un caricamento più rapido del sito. Per ora, crea la directory ** site / js / final ** per lo script compilato e un file ** site / js / 01-site.js ** con questi contenuti: "javascript; // // File: sito. js // // Descrizione: Il file JavaScript per il sito. // jQuery (document) .ready (function () // // Il codice qui verrà eseguito una volta caricata una pagina. //); "C'è non molto qui adesso. Tuttavia, poiché il tuo sito ha bisogno di JavaScript personalizzato, può essere inserito qui. Dal momento che gli script verranno compilati insieme, li numererò nell'ordine necessario per il caricamento. La routine per compilare insieme gli script li caricherà in ordine numerico. ### Automatizzare con Gulp Il modo più semplice per accelerare il caricamento di una pagina web è avere il minor numero possibile di richieste HTTP. Pertanto, è meglio combinare tutti i file CSS e JavaScript in un unico file. Il modo migliore per compilare questi file è con uno script di compilazione. Eseguirlo ogni volta che il server riceve una richiesta è uno spreco di tempo di elaborazione. La mia scelta di script runner di automazione è ** [Gulp] (http://gulpjs.com/) **. ** Gulp ** funziona su ** [Node.js] (https://nodejs.org/) **. Pertanto, andare al sito Web [Node.js] (https://nodejs.org/) e scaricare il programma per il proprio sistema. Una volta installato Node.js, puoi installare ** Gulp ** con il seguente: "bash npm install --global gulp npm install --global gulp npm install --global gulp-compass npm install --global gulp-autoprefixer npm install --global gulp-compressor npm install --global gulp-concat "Questo installerà tutti i moduli ** Gulp ** e ** Gulp ** che uso nello script di build. Ora, nella parte superiore della directory, crea il file ** gulpfile.js ** con questi contenuti: "javascript // Requisiti var gulp = require ('gulp'), compass = require ('gulp-compass'), prefisso = require ('gulp-autoprefixer'), compressor = require ('gulp-compressor'), concat = require ('gulp-concat'); // Definisce path to sass var Theme = "Basic"; var Layout = "SingleCol "; var themesassRoot = 'temi / stile /' + Temi; var layoutsassRoot = 'temi / layouts /' + Layout; // Gulp task gulp.task ('theme-compass-to-css', function () return gulp .src (themesassRoot + '/ sass / Basic.scss') .pipe (bussola (config_file: themesassRoot + '/config.rb', css: themesassRoot + '/ css', sass: themesassRoot + '/ sass', richiede: 'sassy-buttons')) .pipe (prefisso ("ultime 3 versioni")) .pipe (gulp.dest (themesassRoot + '/ css'))); gulp.task ('layout-compass-to-css ', function () return gulp.src (layoutsassRoot +' / sass / base.scss ') .pipe (bussola (config_file: layoutsassRoot +' /config.rb ', css: layoutsassRoot +' / css ', sass: layoutsassRoot + '/ sass', richiede: 'susy')) .pipe (prefisso ("ultime 3 versioni")) .pipe (gulp.dest (layoutsassRoot + '/ css'))); gulp.task ('watch-compass', function () // Cosa guardare gulp.watch (themesassRoot + '/sass/Basic.scss', function () // Cosa lanciare gulp.run ('theme- compass-to-css ');); gulp.watch (layoutsassRoot +' /sass/Basic.scss ', function () // Che cosa deve eseguire gulp.run (' layout-compass-to-css '); );); gulp.task ('all-compass', ['theme-compass-to-css', 'layout-compass-to-css']); // js compressor gulp.task ('js', function () gulp.src ([layoutsassRoot + '/ js / *. js', themesassRoot + '/js/*.js', 'site / js / *. js ']) .pipe (compressor ()) .pipe (concat ("final.js")) .pipe (gulp.dest (' site / js / final '));); // css compressor gulp.task ('css', ['all-compass'], function () gulp.src ([layoutsassRoot + '/ css / *. css', themesassRoot + '/css/*.css' , 'site / css / *. css']) .pipe (compressor ()) .pipe (concat ("final.css")) .pipe (gulp.dest ('site / css / final'));) ; gulp.task ('default', ['all-compass', 'js', 'css']); "Questo compilerà tutti i CSS e JavaScript in un singolo file: nel ** sito / css / final / file final.css ** per il CSS e nel file ** site / js / final / final.js ** per JavaScript. Aggiungerà anche le regole del prefisso del browser per il CSS. Basta eseguire nella directory superiore il comando: "bash gulp" ** Gulp ** compilerà tutti i nostri file e li lascerà nella posizione corretta. Ogni attività definita in ** gulpfile.js ** può essere eseguita singolarmente dando il nome dell'attività dopo il 'gulp' 'comando.Per ulteriori informazioni su [Gulp su Tuts +] (https://webdesign.tutsplus.com/categories/gulpjs). ## File di configurazione del server Tutti i server necessitano di informazioni di configurazione. Pertanto, nella directory principale della directory, creare il file ** server.json ** con queste informazioni: "json " CurrentLayout ":" SingleCol "," CurrentStyling ":" Basic "," ServerAddress ":" localhost: 8080 "," SiteTitle ":" Flat CMS Test Site "," Sitebase ":" ./site/ "," TemplatBase ":" ./themes/ "," Cache ": false, "MainBase": "" "Questo file ** json ** descrive le informazioni sul layout da utilizzare, lo stile da usare, l'indirizzo e la porta che il server deve ascoltare, il nome principale del sito con un sottotitolo, un flag di memorizzazione nella cache per attivare e disattivare la memorizzazione nella cache per scopi di debug e la posizione delle diverse directory utilizzate per il sito. Fornendo queste informazioni al server in un file ** json **, il server può essere flessibile, con informazioni meno codificate. ## Caricamento del sito su un server La maggior parte delle persone utilizza un client FTP per copiare i file sul proprio server. Questo è facile da fare, ma varia notevolmente per quanto riguarda il sistema e i programmi utilizzati. Ma ci sono alcune alternative. Puoi configurare un demone ** [Dropbox] (http://dropbox.com/) ** per caricare il tuo sito dal tuo account Dropbox. Il sito [Dropbox Wiki] (http://www.dropboxwiki.com/tips-and-tricks/install-dropbox-in-an-ent-test-text-based-linux-environment) contiene istruzioni dettagliate per l'impostazione. L'unico problema è che i file vengono automaticamente caricati sul server quando si apportano modifiche. A volte, vorrai apportare modifiche senza che vengano indirizzate al server. Se questo è il caso, avere una posizione non Dropbox di tutti i file del sito e una posizione Dropbox pure. Al termine, crea un'attività nel file ** Gulp ** per copiare i nuovi file del sito nella posizione ** Dropbox **. ! [Installazione di Dropzone 3 per caricamento di CMS] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F71%2Fposts%2F24547%2Fimage-1438683734928.jpg) Installazione di Dropzone 3 per il caricamento di CMS Il mio approccio preferito è quello di utilizzare ** [Dropzone 3] (https://aptonic.com/dropzone3/) **. Puoi programmare ** Dropzone 3 ** con ** Ruby ** o ** Python ** per eseguire qualsiasi tipo di azione su un file a cui è stato fatto cadere. Ha anche molte funzioni integrate. È disponibile un'azione file integrata per il caricamento su un sito FTP / SFTP. Creo un obiettivo ** Dropzone 3 ** per ciascuna delle principali directory sul mio sito. Quindi, quando voglio cambiare o aggiungere un file, semplicemente lo trascino nella destinazion