Share
Ce veți creaA existat o tendință de servere web "servere CMS". Acest lucru se referă pur și simplu la un sistem de management al conținutului (CMS) care nu stochează informațiile sale într-o bază de date. În schimb, toate informațiile sunt stocate în fișiere text simplu. Deoarece multe servere virtuale private (VPS) utilizează în aceste zile unități hard disk bazate pe RAM, această abordare este mai rapidă și puțin mai sigură.
În această serie de tutoriale, vă voi arăta cum să creați propriul CMS sistem de fișiere cu ajutorul unei anumite tehnologii web standard. Aceste sisteme nu sunt la fel de pline ca alții, dar au elementele de bază cu un timp de răspuns bun.
Cu toate informațiile de pe hard disk, organizarea fișierelor devine o problemă mare. Având în vedere acest lucru, informațiile despre site vor fi într-un director diferit de informațiile referitoare la stil și aspect. De asemenea, fiecare tip de pagină are propriul director sub folderul site-ului, cu un director de părți pentru părți mici ale CMS. Aceasta ține totul în propriul său loc și face un sistem flexibil.
În directorul în care veți construi proiectul, creați următoarele directoare: src, teren, și tematică. src director va conține codul de server, teren directorul este pentru toate informațiile site-ului, și tematică director pentru structura și informații tematice.
În tematică director, trebuie să faceți o aspecte și a Coafura director. aspecte va conține diferitele layout-uri ale paginilor web. Prin separarea informațiilor privind aspectul de informațiile de stil, temele devin mult mai flexibile. Deocamdată, va fi un aspect numit SingleCol.
Pentru toate creația de stil și aspect, eu folosesc Sass, Busolă, și Susy. Sass este un limbaj de procesare a stilului personalizat. Acesta oferă o modalitate mai robustă de a crea foi de stil CSS pentru site-ul dvs. Web. Busolă este o extensie a Sass. Sassy-butoane este o extensie Sass pentru a face butoane frumoase pe site. Susy este, de asemenea, o extensie pentru crearea unui sistem de aspect al rețelei pentru site-ul dvs..
Deoarece Ruby este preinstalat pe toate Mac-urile, nu va trebui să-l instalați. Pentru a obține Ruby pe un sistem Windows, va trebui să descărcați Ruby's Windows Installer. Pe Linux, trebuie să utilizați managerul de pachete al sistemului pentru a instala Ruby.
Odată ce Ruby se află pe sistemul dvs., puteți instala Sass, Compass, Sassy-Butoane și Susy cu aceste linii de comandă:
bash gem instalare sass bijuterie instalare sassy-butoane gem instala busola gem instala susy
Pentru acest tutorial, folosesc Sass 3.4.16, butoane Sassy 0.2.6, Compass 1.0.3 și Susy 2.2.5. În funcție de configurația sistemului dvs., s-ar putea să trebuiască să executați aceste comenzi sudo inaintea lor.
Pentru a începe să creați machete, executați aceste comenzi în SingleCol director:
bash compass init
Aceasta va crea Sass și stylesheets directoare și un fișier numit config.rb. Deoarece îmi place să folosesc css pentru directorul stilurilor, redenumiți stylesheets directorul la css. De asemenea, creați un js director pentru toate fișierele JavaScript necesare pentru aspect. Deschide config.rb fișier și face ca acesta să arate ca acesta:
ruby necesită "susy" http_path = "/" css_dir = "css" sass_dir = "sass" imagini_dir = "imagini" javascripts_dir =
Acum, pentru a crea aspectul de bază al site-ului, creați un fișier în schemă director numit template.html. În acest fișier, adăugați acest cod:
„html
"
Acest șablon creează o pagină web standard pentru site. Fiecare pagină are un antet cu o bară de navigare, o singură bară laterală, o zonă de conținut și o zonă de subsol. Ultimul lucru încărcat este javascript-urile necesare site-ului.
Fiecare secțiune este reprezentată cu a ghidon macro. Serverul extinde macro-urile înainte de a le da utilizatorului.
În Sass director, creați un fișier numit base.scss și plasați acest cod:
"css @import 'busola / resetare'; @import 'susy';
$ susy: (debit: ltr, matematică: fluid, ieșire: flotor, jgheab-poziția: după, recipient: auto, poziție container: centru, coloane: 16, jgheaburi: (imagine: ascunde, culoare: rgba (# 66f, .25), ieșire: fundal, comutare: dreapta sus), utilizare-personalizat: (imagine-fundal : adevărat, opțiuni de fundal: false, dimensionare în cutie: adevărat, clarfix: false, rem: true,));
corp
include containerul (16); lățime: 1024px; afișare: bloc;
includeți intervalul (16 din 16); margin-bottom: 20px;
margin-top: 20px; margin-stânga: auto; margin-dreapta: auto; lățime: 95%;
includeți intervalul (11 din 16);
.col1 @ include span (5 din 10);
.col2 @ include span (ultimele 5 din 10);
lățime: auto;
.caseta @ include span (4 din 10);
@ include span (ultimele 4 din 16);
includeți intervalul (16 din 16);
/ ** Meniu derulant CSS ** /
margin-top: 20px; margin-stânga: auto; margin-dreapta: auto; lățime: 95%;
top: 1em; stânga: 1em; afișare: inline; lățime: 100%;
marginea superioară: 1em; afișare: inline; lățime: 100%;
afișare: inline-block; lățime: potrivire;
text-aliniere: centru; display: block; white-space: nowrap; margin: 0; padding: 5px; text-decoration: nici unul;
style-style: none; margine: 0px 20px 0px 20px; padding: 0px;
poziție: relativă; min-înălțime: 1px; vertical-aliniere: fund; lățime: potrivire;
poziție: absolută; z-index: 500; top: 50px; stânga: 20px; afișare: niciunul; umplutură: 0,5 mm; marja: -1em 0 0 -1em;
#menuh ul ul li lățime: 100%;
text-aliniere: stânga;
left: 90px;
div # meniu li: hover cursor: pointer; z-index: 100;
div ############################################################################################################# ##
div # menuh li: hover ul, div # meniuh li li: hover ul, div # meniuh li li: hover ul, div # meniuh li li li: hover ul display: block;
/ * Terminarea meniului derulant CSS * / "
Acest Sass încărcările de cod din stilurile de resetare a compasului pentru a neutraliza valorile implicite ale browserului. Apoi se încarcă și se instalează Susy pentru a crea un aspect adecvat pentru toate elementele paginii web.
css sistemul de navigare este după definirea paginii. Căsuțele ascunse ascunse pentru meniuri devin vizibile cu definiții de mouse-over. Acest lucru oferă o css numai sistemul de meniuri.
Toate aceste stiluri definesc structura de bază a site-ului web. Nimic aici nu creează o privire la pagină, ci doar poziționarea acesteia. Toate stilul devine manipulat de către Coafura conţinut.
Pentru Coafura director, creați un director numit De bază. Inițializați Sass informații ca cele făcute pentru machete / SingleCol director. În acest director, executați următoarea linie de comandă:
bash compass init
Aceasta va crea Sass și stylesheets directoare și un fișier numit config.rb. Deoarece îmi place să folosesc css pentru directorul stilurilor, redenumiți stylesheets directorul la css. De asemenea, creați un js director pentru orice JavaScript pentru crearea temei. Deschide config.rb fișier și face ca acesta să arate ca acesta:
ruby nevoie de butoane sassy http_path = "/" css_dir = "css" sass_dir = "sass" imagini_dir = "imagini" javascripts_dir = "js"
Pentru butoanele de styling de pe site-ul web, îmi place să folosesc Sassy-butoane. Prin urmare, este necesar mai întâi, și apoi structura directorului.
În Basic / Sass director, creați Basic.scss fișier cu aceste informații:
"css // Bine ați venit la Compass // În acest fișier trebuie să vă scrieți principalele stiluri (sau să vă centralizați importurile) // Importați acest fișier folosind următorul cod HTML sau echivalent: // // @import 'compass / css3'; @import 'sassy-buttons';
$ stil-culoare1: rgb (247, 237, 222); $ stil-color2: # ffedd1; $ stil-color3: rgb (245, 213, 166); $ stil-color4: # f0d5ad;
// // Clear Clear // .clearfix: după content: '.'; afișare: bloc; clar: ambele; vizibilitate: ascuns; linia-înălțime: 0; înălțime: 0;
.clarfix display: inline-block;
html [xmlns] .clearfix afișare: bloc;
Styling Principal pentru Lemn. // @mixin standardize padding-top: 10px; padding-left: 15px; font-size: 19px; linia-înălțime: 1.25em;
corp fundal-culoare: $ stil-color2;
Accentsconagua
intrare [tip = 'buton]] @ include butonul sassy ("strălucitor", 10px, 16px, $ stil-color1, întunecat ($ stil-color1, 20%); butonul @include butonul sassy ("strălucitor", 10px, 16px, $ stil-color1, întunecat ($ stil-color1, 20%), # 000, bold); Afișați: moșteniți; margin-stânga: auto; margin-dreapta: auto; margin-top: 10px; margin-bottom: 10px; text-align: centru; #wrap fundal-culoare: $ stil-color1; @ include raza de graniță (.6em, .6em); margin-top: 10px; margin-bottom: 10px; frontieră: 4px solid $ style-color4; #header culoare-fundal: $ style-color2; @ include raza de graniță (15px); background-repeat: nu-repeta; frontieră: 2px solid $ style-color3; înălțime: 130px; text-aliniere: stânga; margin-top: 20px; font-size: 3m; h1 a: link, a: vizitat culoare: # 000; text-decoration: nici unul; padding-top: 40px; padding-left: 20px; h6 font-size: .4em; font-style: italic; padding-left: 20px; #sidebar culoare-fundal: $ stil-color2; @ include raza de graniță (.6em, .6em); padding: .6em; vertical-aliniere: text-top; overflow: ascuns; margin-dreapta: .5em; frontieră: 2px solid $ style-color3; hr culoare: $ stil-culoare2; fundal-culoare: $ stil-color2; p, ul, li @include standardize; ul li list-style-type: disc; margin-stânga: 25px; umplutura: 0; frontieră: 0; contur: 0; font-size: 100%; aliniere verticală: linia de bază; fundal: transparent; li margin-bottom: 10px; h1, h2, h3, h4, h5, h6 @ includ standardizarea; font-weight: bold; margin-top: .25em; margin-bottom: .25em; h1 font-size: 2.5; h2 font-size: 2; h3 font-size: 1.5; h4 font-size: 1em; h5 font-size: .8; h6 font-size: .6em; intrare [tip = 'buton'] margin-left: 120px; clar: ambele; #content introduceți [type = 'butonul]] margin-left: 200px; clar: ambele; h1, h2, h3, h4, h5, h6 @ includ standardizarea; font-weight: bold; margin-top: .25em; margin-bottom: .25em; h1 font-size: 2.5; h2 font-size: 2; h3 font-size: 1.5; h4 font-size: 1em; h5 font-size: .8; h6 font-size: .6em; oră margin-top: 30px; margin-bottom: 30px; p, ul, li, detalii, rezumat, pre @include standardize; detalii p, pre margin-left: 25px; ul li tipul-stil: disc; margin-stânga: 25px; umplutura: 0; frontieră: 0; contur: 0; font-size: 100%; aliniere verticală: linia de bază; fundal: transparent; li margin-bottom: 10px; .box clar: ambele; fundal-culoare: $ stil-color4; float: nici unul; margin-stânga: auto; margin-dreapta: auto; marginea-top: 1.0em; marginea inferioară: 1em; @ include raza de graniță (.6em, .6em); afișare: bloc; padding: .5em; img @include raza de graniță (10px); margine: 20px auto 20px auto; #footer border-top: 5px; stilul frontal: solid; border-color: $ stil-color3; @ include raza de graniță (.6em, .6em); margin-top: 30px; p marginea-jos: .6em; @ include standardize; margin-dreapta: 15px; // meniul derulant CSS #navigation text-align: left; frontieră: 2px solid $ style-color3; fundal-culoare: $ stil-color2; @ include raza de graniță (15px);
font-size: 1.3; font-family: arial, helvetica, sans-serif; fundal-culoare: $ stil-color1;
fundal-culoare: $ stil-color2;
fundal-culoare: $ stil-color2; @ include raza de graniță (15px); frontieră: 2px solid $ style-color3;
fundal-culoare: $ stil-color2; culoare: # 000;
culoare: # 000; fundal-culoare: $ stil-color2;
culoare: # 000; fundal-culoare: $ stil-color4; @ include raza de graniță (5px);
// Sfarsitul meniului CSS Drop Down // Clase diverse .picture border: 3px solid $ style-color3; @ include raza de graniță (8px); plutește la stânga; margine: 5px 15px 15px 15px;
a: link, a: vizitat culoare: darken ($ style-color1, 50); text-decoration: nici unul;
puternic font-weight: bold;
tabel margine: 20px; margine: 3 pixeli solizi; @ include raza de graniță (10px); culoarea frontală: lumină ($ stil-color2, 6); th text-aliniere: centru; font-weight: bold; umplutura: 10px 0 10px 0; tbody td padding: 10px; tr: nth-copil (2n + 1) fundal-culoare: întunecat ($ stil-color2, 5); tr: n-copil (echivalent) background-color: lighten ($ style-color2, 2.5);
lățime: 100%; margin-top: 20px; margin-stânga: 15px;
.tutorial_excerpt margine-stânga: 20px;
.tutorial_thumbnail float: left; margin-dreapta: 20px; margin-stânga: 20px; margin-bottom: 20px;
.tutorial_wrap marginea-jos: 50px; plutește la stânga;
img.wp-imagine post -moz-border-radius: 15px; raza de graniță: 15px; box-shadow: 10px 10px 5px gri;
.showcode margine: 20px auto 20px 30px; -moz-border-radius: 15px; raza de graniță: 15px; frontieră: $ style-color4 3px; stilul frontal: solid; fundal: alb;
lățime: 700px; margin-top: 20px; margin-stânga: 15px;
marja: auto;
opacitate: 0,8; filtru: alfa (opacitate = 80); -webkit-transition: toate usurinta in out 0.2s; -moz-tranziție: toate ușurința-out-out 0.2s; -ms-tranziție: toate ușurința-out-out 0.2s; -o-tranziție: toate ușurința-out-out 0.2s; tranziție: toate ușurința-în-out 0.2s;
opacitate: 1; filtru: alfa (opacitate = 100);
afișare: inline-block; înălțime: 28px; lățime: 30px; Imagine de fundal: url (/images/ico-subscribe-social.png); background-repeat: nu-repeta;
pozitie fundal: -30px 0;
pozitie fundal: -60px 0;
Poziția de fundal: -210px 0;
dl margin-stânga: 20px; margin-top: 20px; margin-bottom: 20px; font-size: 19px; linia-înălțime: 1.25em;
dt margin-stânga: 20px; margin-bottom: 20px; font-weight: bold;
dd marginea-stânga: 40px; margin-bottom: 20px; “
Acest cod definește modul în care va arăta site-ul web. Definește fundalul, colorarea, fonturile etc. care alcătuiesc stilul pentru un site tipic.
Coafura / Basic directorul conține fișierele necesare pentru aspectul implicit al paginilor 404 de pagină, antet, subsol și partea laterală a site-ului web. Prin urmare, creați un fișier numit 404.html și plasați acest cod:
„html
Ne pare rău, nu am putut găsi pagina.
"
Acesta este unul fundamental 404 pagina de eroare. Trebuie să fii atent la informațiile furnizate aici, deoarece nu vrei să dezvălui prea multe informații despre cum funcționează site-ul tău. Deoarece acest lucru va fi plasat în cuprins zona de pagină, va fi ușor pentru utilizator să navigheze departe de ea.
Apoi, creați header.html fișier cu acest conținut:
„html
"
Acesta este doar un antez gol care nu este descriptiv, dar oferă CMS ceva de spus.
Apoi, creați footer.html fișier cu acest conținut:
„html
"Apoi, creați ** sidebar.html ** fișier cu acest conținut:" htmlAceasta este o bara laterala de baza care poate avea alte ori.
"Din nou, acestea sunt deținători de locație.Aceste fișiere sunt copiate pe site-ul ** site-uri / piese ** și modificate în funcție de nevoile site-ului.Acestea sunt aici, astfel încât serverul are ceva cu numele lor de a utiliza în server în cazul în care utilizatorul uită să le creeze. ## Structura site-ului Cu temele și layout-urile definite, este timpul să creați conținutul de bază și structura pentru site-ul actual. În directorul ** site **, creați ** piese * **, ** ** **, ** ** **, ** ** **, ** css **, ** js ** directoare. ### Părțile Directorul ** parts ** va conține fragmente mici de * * html / css / javascript ** care vor face o singură unitate plasată în mai multe locații ale site-ului web.Aceste părți se încarcă pe server și se combină cu conținutul paginii după cum este necesar.Pentru site-ul nostru demo, creați următoarele părți: - * * footer.html ** cu acest cod: "html "- ** head.html ** cu acest cod:" html "- ** header.html ** cu acest cod:" htmlAceasta este pagina principală a site-ului de testare.
"- ** flatcms.md ** cu acest cod:" plain ### Flat CMS Server Aceasta este o pagină despre serverul CMS plat. "- ** about.md ** cu acest cod:" plain ### Despre Acest lucru ar fi un standard despre pagină. "Acestea sunt paginile de demo pentru site-ul dvs. Singurul fișier necesar este ** main.html ** deoarece serverul va încărca conținutul acestei pagini în memorie și va servi din memorie. încărcarea paginii principale a site-ului web. Celelalte două pagini au extensia ** md ** deoarece sunt în format ** Markdown ** Serverul va traduce conținutul în HTML înainte de a încorpora aspectul paginii. , paginile conțin informații care nu se schimbă mult în timp și oferă informații despre site, scopul și obiectivele paginii dvs. Paginile pot fi ierarhice prin crearea de directoare și subdirectoare cu pagini. directorul acestor pagini. ### Posturi Spre deosebire de pagini, postările sunt elemente care se adaugă în mod regulat, de exemplu postări zilnice / săptămânale / lunare de blog și știri. Această zonă este de așteptat să se schimbe des. În directorul ** ** posturi, creați două directoare noi: ** bloguri ** și ** știri **. În fiecare dintre aceste directoare, creați un director ** flatcms **. Acestea vor conține postările de blog și știrile pentru site-ul ** Flat CMS **. În directorul ** posts / blogs / flatcms **, creați următoarele fișiere: - ** index.amber ** cu acest conținut: "plain h3 Flat CMS Blog p Acesta este un blog plin de rahat despre un CMS plat. $ title, $ link, $ excerpt, $ date) div.entry div.tutorial_wrap div.tutorial_div a [href = $ link] h3 # $ date h5 # $ date p.tutorial_excerpt # excerpt div. clar + articol ("Flat CMS Running", "/ posts / blogs / flatcms / flatcms", "Serverul de test plat CMS se execută!", "12 august 2015" : "simplu Noul server se execută ---- După multă muncă și programare, serverul plat CMS se execută .. Rămâi acordat pentru mai multe știri socialmedia" The ** index.amber ** este un * * [Jade] (http://jade-lang.com/) ** șablon pentru a defini postările diferite din blog. Sistemul de șabloane ** Jade ** HTML facilitează adăugarea de conținut nou cu un format exact. Parametrii macrocomenzilor alcătuiesc diferitele elemente. Puteți găsi mai multe informații despre [Jade on Tuts +] (https://webdesign.tutsplus.com/categories/jade). Extensia folosită aici este ** ** ** deoarece limba ** ** este echivalentă cu ** Jade ** este ** [Amber] (https://github.com/eknkc/amber) **. De când a fost locul unde am început, așa am reușit. Dacă doriți să modificați extensia, nu uitați să o modificați și în codul de server corespunzător. În directorul ** posts / news / flatcms **, creați următoarele fișiere: - ** index.amber ** cu următorul conținut: "plain h3 Flat CMS News p Aici găsiți toate știrile despre ceea ce fac ($ 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 + articol ("Flat CMS is Running", "/ posts / news / flatcms / flatcms" 2015 ") - ** flatcms.md ** cu aceste continuturi:" simplu Noul server se executa ---- Dupa mult timp de lucru si programare, am terminat totul intr-un server de tip goPress pe care l-am scris eu. "socialmedia" Acest lucru creează știrile pentru site-ul demo. În site-ul meu, folosesc aceeași structură pentru tutoriale și pagini de demo-cod. ### Imagini Toate site-urile au imagini. În această configurație, toate fotografiile se află în directorul ** site / images **. Pentru acest demo site-ul, vor fi plasate aici doar icoanele de social media. Puteți obține fișierul imagine din fișierul de descărcare. ### Site-ul CSS Chiar și cu ** layout css ** și ** styling css **, vor exista momente când veți dori reguli speciale ** css ** **. Directorul ** site / css ** conține toate fișierele ** css ** care au pus aceste atingeri finale pe site. Toate fișierele ** layout **, ** styling ** și ** site / css ** vor fi compilate împreună într-un singur fișier ** css **. Prin urmare, creați directorul ** site / css / final ** pentru a plasa acest fișier compilat. Acum creați site-ul ** site / css / site.css ** cu următorul conținut: "css .clear clear: both; height: 0px;" Nu prea mult aici - doar o definiție pentru o clasă "clară". Puteți adăuga ceea ce doriți, dar ar trebui să fie ceva care nu intră în categoria aspectului sau a stilului. ### Script-urile site-ului Site-ul ** site / js ** conține toate fișierele JavaScript speciale pentru site. Acestea vor fi compilate împreună și vor fi minimizate pentru o încărcare mai rapidă a site-ului. Pentru moment, creați directorul ** site / js / final ** pentru scriptul compilat și un fișier ** site / js / 01-site.js ** cu următorul conținut: "javascript; // // Fișier: Site. js // // Descriere: Fisierul JavaScript pentru site // jQuery (document) .ready (function () // // Cod aici va fi rulat odata ce o pagina este incarcata. nu prea mult aici chiar acum. Dar, pe măsură ce site-ul dvs. are nevoie de JavaScript personalizat, acesta poate fi plasat aici. Deoarece scripturile vor fi compilate împreună, le numerez în ordinea de încărcare. Rutina pentru compilarea script-urilor împreună le va încărca în ordine numerică. ### Automatizarea cu gulp Cea mai ușoară modalitate de a accelera încărcarea unei pagini web este să aveți cât mai puține cereri HTTP posibil. Prin urmare, este mai bine să combinați toate fișierele CSS și JavaScript într-un singur fișier. Cea mai bună modalitate de a compila aceste fișiere este cu un script de construire. Efectuarea acesteia de fiecare dată când serverul primește o cerere este o pierdere de timp de procesare. Alegerea alergătorilor de script-uri de automatizare este ** [Gulp] (http://gulpjs.com/) **. ** Gulp ** rulează pe ** [Node.js] (https://nodejs.org/) **. Prin urmare, accesați site-ul [Node.js] (https://nodejs.org/) și descărcați programul pentru sistemul dvs. Odată ce ai instalat Node.js, poți instala ** Gulp ** cu următoarele: "bash npm install --global gulp npm instalare --global gulp npm instalare --global gulp -compass npm instalare --global gulp-autoprefixer npm install --global gulp-compressor npm install --global gulp-concat "Aceasta va instala toate modulele ** Gulp ** și ** Gulp ** pe care le folosesc în scriptul de construire. Acum, în partea de sus a directorului dvs., creați fișierul ** gulpfile.js ** cu următorul conținut: "javascript // Cerințe var gulp = requ ('gulp'), compass = require ('gulp-compass' = necesita ('gulp-autoprefixer'), compressor = require ('gulp-compressor'), concat = require ('gulp-concat'); "var / tematică / '+ Temă; var layoutsassRoot =' teme / layouts / '+ Layout; // Gulp task gulp.task (' theme-compass-to-css ' .src (themesassRoot + '/ sass / Basic.scss') .pipe (compasul config_file: themesassRoot + '/config.rb', css: themesassRoot + '/ css', sass: themesassRoot + '/ sass' 'sassy-buttons')) .pipe (prefixul "ultimele 3 versiuni")) .pipe (gulp.dest (themesassRoot + '/ css')) ', funcția () return gulp.src (layoutsassRoot +' / sass / base.scss ') .pipe (compasul config_file: layoutsassRoot +' /config.rb ', css: layoutsassRoot +' / css ', sass: layoutsassRoot + '/ sass', necesită: 'susy')) .pipe (prefix ("ultimele 3 versiuni")) .pipe (gulp.dest (layoutsassRoot + '/ css')); gulp.task ('watch-compass', functie () // Ce sa ma uit la gulp.watch (themesassRoot + '/sass/Basic.scss', function () compass-to-css ');); gulp.watch (layoutsassRoot +' /sass/Basic.scss ', funcție () // Ce să ruleze gulp.run (' layout-compass-to-css '); );); gulp.task ("toate compas", ['temă-compass-to-css', 'layout-compass-to-css')]; // js compresor gulp.task ('js', funcția () gulp.src ([layoutsassRoot + '/ js / *. js', themesassRoot + '/js/*.js', 'site / js / *. ] .pipe (compressor ()) .pipe (concat ("final.js")) .pipe (gulp.dest ('site / js / final')); // css compresor gulp.task ('css', ['all-compass'], funcția () gulp.src ([layoutsassRoot + '/ css / * .css', themesassRoot + '/css/*.css' , "site / css / * .css"]) .pipe (compressor ()) .pipe (concat ("final.css")) .pipe (gulp.dest ('site / css / ; gulp.task ("implicit", ['all-compass', 'js', 'css']); "Aceasta va compila toate CSS și JavaScript într-un singur fișier: fișierul final.css ** pentru CSS și fișierul ** site / js / final / final.js ** pentru JavaScript, care va adăuga regulile prefixului browserului pentru CSS. comanda: "bash gulp" ** Gulp ** va compila toate fișierele noastre și le va lăsa în locația corespunzătoare Fiecare sarcină definită în ** gulpfile.js ** poate fi rulată individual, dând numele sarcinii după "gulp "Puteți afla mai multe despre [Gulp on Tuts +] (https://webdesign.tutsplus.com/categories/gulpjs). ## Fișierul de configurare a serverului Toate serverele au nevoie de informații de configurare, prin urmare, în rădăcina directorului, creați fișierul ** server.json ** cu următoarele informații: "json " CurrentLayout ":" SingleCol "," CurrentStyling ":" Basic "," ServerAddress ":" localhost: 8080 "," SiteTitle " Site "," Sitebase ":" ./site/ "," TemplatBase ":" ./themes/ "," Cache ": false, "MainBase": "" "Acest fișier ** json ** descrie informații despre aspectul de utilizat, stilul de utilizat, adresa și portul pe care serverul trebuie să îl asculte, numele principal al site-ului cu un subtitlu, un stegaj de cache pentru activarea și dezactivarea memorării în cache pentru depanare și localizarea diferitelor directoare utilizate pentru site. Prin furnizarea acestor informații serverului într-un fișier ** json **, serverul poate fi flexibil, cu informații mai puțin codificate. # # Încărcarea site-ului pe un server Majoritatea oamenilor folosesc un client FTP pentru a copia fișierele pe serverul lor. Acest lucru este ușor de făcut, dar variază foarte mult în ceea ce privește sistemul și programele utilizate. Dar există și unele alternative. Puteți configura un ** [Dropbox] (http://dropbox.com/) ** daemon pentru a încărca site-ul dvs. din contul Dropbox. Site-ul [Dropbox Wiki] (http://www.dropboxwiki.com/tips-and-tricks/install-dropbox-in-an-entirely-text-based-linux-environment) conține instrucțiuni detaliate pentru setarea acestuia. Singura problemă este că fișierele sunt încărcate automat pe server când faceți orice schimbare. Uneori, veți dori să faceți modificări fără ca aceștia să meargă la server. În acest caz, aveți o locație non-Dropbox a tuturor fișierelor site-ului și a locației Dropbox. Când ați terminat, creați o sarcină în fișierul ** Gulp ** pentru a copia fișierele de site-uri noi în locația ** Dropbox **. ! [Configurarea Dropzone 3 pentru încărcarea CMS] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F71%2Fposts%2F24547%2Fimage-1438683734928.jpg) Dropzone 3 Configurarea pentru CMS Încărcarea Abordarea mea preferată este de a utiliza ** [Dropzone 3] (https://aptonic.com/dropzone3/) **. Puteți să programați ** Dropzone 3 ** cu ** Ruby ** sau ** Python ** pentru a efectua orice tip de acțiune pe un fișier care este aruncat pe el. De asemenea, are multe funcții încorporate. Există o acțiune de fișier încorporată pentru încărcarea pe un site FTP / SFTP. Creez un singur ** Dropzone 3 ** țintă pentru fiecare dintre directoarele principale de pe site-ul meu. Apoi, când vreau să schimb sau să adaug un fișier, îl trag pur și simplu în directorul de destinație dropzone corespunzător. Puteți afla mai multe despre ** Dropzone 3 ** cu tutorialul meu [Scrierea acțiunilor Dropzone 3] (https://computers.tutsplus.com/tutorials/writing-dropzone-3-actions--cms-21590). ## Concluzie Aceste fișiere de bază vor crea un site care arată astfel:! [Demo Site în Browser] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F71%2Fposts%2F24547%2Fimage-1438683452983.jpg ) Site demo în browser Acesta este doar începutul! Acum, cu structura site-ului stabilit, este timpul pentru a începe construirea de servere web. Vă rugăm să vă alăturați-mă în următoarea tutorial în cazul în care voi construi un ** [Go language] (https://golang.org/) ** server de web bazat pe acest demo site-ul.