Share
Wat je gaat creërenEr is een trend geweest van "platte CMS-ontwerp" -webservers. Dit verwijst eenvoudigweg naar een Content Management Systeem (CMS) dat zijn informatie niet opslaat in een database. In plaats daarvan wordt alle informatie opgeslagen in niet-gecodeerde tekstbestanden. Omdat veel virtuele privéservers (VPS) tegenwoordig RAM-gebaseerde harde schijven gebruiken, is deze aanpak sneller en een beetje veiliger.
In deze reeks zelfstudies laat ik je zien hoe je je eigen platte bestandssysteem CMS maakt met behulp van een aantal standaard webtechnologieën. Deze systemen zijn niet zo volledig uitgerust als andere, maar hebben de basis met een goede responstijd.
Met alle informatie op de harde schijf wordt de bestandsorganisatie een groot probleem. Met dat in gedachten zal de site-informatie zich in een andere directory bevinden dan de styling- en opmaakinformatie. Elk type pagina heeft ook een eigen map onder de sitemap met een onderdelenmap voor kleine delen van de CMS. Dit houdt alles op zijn eigen plaats en maakt een flexibel systeem.
In de map waarin u het project gaat bouwen, maakt u de volgende mappen: src, plaats, en thema's. De src map bevat de servercode, de plaats map is voor alle sitegegevens, en de thema's map voor de lay-out en themainformatie.
In de thema's map, moet u een lay-outs en een styling directory. De lay-outs map bevat de verschillende webpagina-indelingen. Door de lay-outinformatie te scheiden van de stylinginformatie, worden de thema's veel flexibeler. Voor nu wordt er één lay-out genoemd SingleCol.
Voor alle styling en lay-outcreatie die ik gebruik Sass, Kompas, en Susy. Sass is een verwerkingstaal voor een aangepast stijlblad. Het biedt een meer robuuste manier om de CSS-stijlbladen voor uw website te maken. Kompas is een uitbreiding op Sass. Sassy-knoppen is een Sass-extensie voor het maken van mooie knoppen op de website. Susy is ook een uitbreiding voor het maken van een rasterlay-outsysteem voor uw site.
Omdat Ruby vooraf is geïnstalleerd op alle Macs, hoef je het niet te installeren. Om Ruby op een Windows-systeem te krijgen, moet je Ruby's Windows Installer downloaden. Onder Linux moet u de pakketbeheerder van uw systeem gebruiken om Ruby te installeren.
Zodra Ruby op uw systeem staat, kunt u Sass, Compass, Sassy-buttons en Susy installeren met deze opdrachtregels:
bash gem installeren sass gem installeren sassy-knoppen gem installeren kompas gem installeren susy
Voor deze zelfstudie gebruik ik Sass 3.4.16, Sassy-buttons 0.2.6, Compass 1.0.3 en Susy 2.2.5. Afhankelijk van de configuratie van uw systeem, moet u deze opdrachten misschien uitvoeren met sudo voor hen.
Als u aan de slag wilt gaan met het maken van lay-outs, voert u deze opdrachten uit in de SingleCol directory:
bash kompas init
Hiermee maakt u de sass en stylesheets mappen en een bestand met de naam config.rb. Omdat ik graag gebruik css voor de stylesheet-map, hernoem de stylesheets map naar css. Maak ook een js directory voor eventuele benodigde JavaScript-bestanden voor de lay-out. Open de config.rb bestand en laat het er zo uitzien:
ruby vereist 'susy' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "js"
Maak nu een bestand in de. Om de basislay-out van de website te maken lay-out map genoemd template.html. Voeg in dit bestand deze code toe:
"html
"
Deze sjabloon maakt een standaardwebpagina voor de site. Elke pagina heeft een kop met een navigatiebalk, een enkele zijbalk, een inhoudsgebied en een voettekstgebied. Het laatste wat geladen is, zijn de javascripts die nodig zijn voor de site.
Elke sectie wordt weergegeven met een Stuur macro. De server breidt de macro's uit voordat deze aan de gebruiker wordt gegeven.
In de sass map, maak een bestand aan met de naam base.scss en plaats deze code:
"css @import" kompas / reset '; @import' susy ';
$ susy: (flow: ltr, math: fluid, output: float, gutter-position: after, container: auto, container-positie: center, kolommen: 16, goten: .25, kolom-breedte: false, global-box -sizing: inhoud-box, laatste-stroom: naar, debug: (afbeelding: verbergen, kleur: rgba (# 66f, .25), uitvoer: achtergrond, toggle: rechtsboven,), gebruik-aangepast: (achtergrondafbeelding : true, background-options: false, box-sizing: true, clearfix: false, rem: true,));
lichaam
@ include container (16); breedte: 1024 px; weergave: blok;
@ include span (16 van 16); margin-bottom: 20px;
margin-top: 20px; marge links: auto; marge-rechts: auto; breedte: 95%;
@ include span (11 van 16);
.col1 @ include span (5 of 10);
.col2 @omvat span (laatste 5 van 10);
breedte: auto;
.box @ include span (4 of 10);
@ include span (laatste 4 van 16);
@ include span (16 van 16);
/ ** CSS vervolgkeuzemenu ** /
margin-top: 20px; marge links: auto; marge-rechts: auto; breedte: 95%;
top: 1em; links: 1em; weergave: inline; breedte: 100%;
margin-top: 1em; weergave: inline; breedte: 100%;
weergave: inline-block; breedte: fit-inhoud;
text-align: center; display: block; white-space: nowrap; margin: 0; opvulling: 5px; tekstdecoratie: geen;
lijststijl: geen; marge: 0px 20px 0px 20px; opvulling: 0px;
positie: relatief; min-hoogte: 1px; vertical-align: bottom; breedte: fit-inhoud;
positie: absoluut; z-index: 500; top: 50px; links: 20px; Geen weergeven; opvulling: 0,5em; marge: -1em 0 0 -1em;
#menuh ul ul li width: 100%;
text-align: left;
links: 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;
/ * CSS-vervolgkeuzemenu beëindigen * / "
Deze sass code laadt in het kompas om stijlen te resetten om de standaardinstellingen van de browser te neutraliseren. Vervolgens wordt het geladen en ingesteld susy voor het maken van de juiste rasterlay-out voor alle elementen van de webpagina.
De css navigatiesysteem is nadat de pagina definieert. De verborgen vervolgkeuzelijsten voor de menu's worden zichtbaar met mouseover-definities. Dit geeft een css alleen menusysteem.
Al deze stijlen bepalen de basisstructuur van de website. Niets hier creëert een blik op de pagina, alleen de positionering ervan. Alle styling wordt afgehandeld door de styling inhoud.
Voor de styling map, maak een map aan genaamd basis-. Initialiseer de sass informatie zoals gedaan voor de lay-outs / SingleCol directory. Voer in deze map de volgende opdrachtregel uit:
bash kompas init
Hiermee maakt u de sass en stylesheets mappen en een bestand met de naam config.rb. Omdat ik graag gebruik css voor de stylesheet-map, hernoem de stylesheets map naar css. Maak ook een js directory voor JavaScript voor het maken van het thema. Open de config.rb bestand en laat het er zo uitzien:
ruby vereist 'sassy-buttons' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "js"
Voor het stylen van knoppen op de website, vind ik het leuk om te gebruiken sassy-knoppen. Daarom is het eerst vereist, en vervolgens de directorystructuur.
In de Basic / sass map, maak de Basic.scss bestand met deze informatie:
"css // Welkom bij Compass. // In dit bestand moet u uw hoofdstijlen schrijven (of uw import centraliseren) // Importeer dit bestand met de volgende HTML of een equivalent: // // @import 'compass / css3'; @sport-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: '.'; weergave: blok; beiden opschonen; zichtbaarheid: verborgen; regelhoogte: 0; hoogte: 0;
.clearfix display: inline-block;
html [xmlns] .clearfix weergave: blok;
// // Hoofdstijl voor hout. // @mixin standardsize padding-top: 10px; padding-links: 15px; lettertypegrootte: 19px; regelhoogte: 1,25 m;
body achtergrondkleur: $ style-color2;
Accentsconagua
invoer [type = 'knop'] @ include sassy-knop ('glanzend', 10px, 16px, $ style-color1, darken ($ style-color1, 20%), # 000, vetgedrukt); .button @ omvat sassy-knop ('glanzend', 10px, 16px, $ style-color1, darken ($ style-color1, 20%), # 000, vetgedrukt); weergeven: overnemen; marge links: auto; marge-rechts: auto; margin-top: 10px; margin-bottom: 10px; text-align: center; # omloop 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); achtergrondherhaling: geen herhaling; border: 2px solid $ style-color3; hoogte: 130 px; text-align: left; margin-top: 20px; lettergrootte: 3em; h1 a: link, a: visited color: # 000; tekstdecoratie: geen; padding-top: 40px; padding-links: 20px; h6 font-size: .4em; lettertype-stijl: cursief; padding-links: 20px; #sidebar background-color: $ style-color2; @ include border-radius (.6em, .6em); opvulling: .6em; vertical-align: text-top; overloop verborgen; margin-right: .5em; border: 2px solid $ style-color3; hr color: $ style-color2; achtergrondkleur: $ style-color2; p, ul, li @including standardize; ul li list-style-type: disc; marge links: 25 px; opvulling: 0; rand: 0; overzicht: 0; tekengrootte: 100%; vertical-align: basislijn; achtergrond: transparant; li margin-bottom: 10px; h1, h2, h3, h4, h5, h6 @omvat standaardiseren; lettertype: vet; 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; invoer [type = 'knop'] margin-left: 120px; beiden opschonen; #content input [type = 'button'] margin-left: 200px; beiden opschonen; h1, h2, h3, h4, h5, h6 @omvat standaardiseren; lettertype: vet; 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, details, samenvatting, pre @omvat standaardiseren; details p, pre margin-left: 25px; ul li list-style-type: disc; marge links: 25 px; opvulling: 0; rand: 0; overzicht: 0; tekengrootte: 100%; vertical-align: basislijn; achtergrond: transparant; li margin-bottom: 10px; .box duidelijk: beide; achtergrondkleur: $ style-color4; zweven: geen; marge links: auto; marge-rechts: auto; margin-top: 1.0em; margin-bottom: 1em; @ include border-radius (.6em, .6em); weergave: blok; opvulling: .5em; img @ include border-radius (10px); marge: 20px auto 20px auto; #footer border-top: 5px; randstijl: stevig; randkleur: $ style-color3; @ include border-radius (.6em, .6em); margin-top: 30px; p margin-bottom: .6em; @including standardize; margin-right: 15px; // CSS vervolgkeuzemenu #navigatie text-align: left; border: 2px solid $ style-color3; achtergrondkleur: $ style-color2; @ include border-radius (15px);
font-size: 1.3em; font-family: arial, helvetica, sans-serif; achtergrondkleur: $ style-color1;
achtergrondkleur: $ style-color2;
achtergrondkleur: $ style-color2; @ include border-radius (15px); border: 2px solid $ style-color3;
achtergrondkleur: $ style-color2; kleur: # 000;
kleur: # 000; achtergrondkleur: $ style-color2;
kleur: # 000; achtergrondkleur: $ style-color4; @ include border-radius (5px);
// Einde CSS Drop Down Menu // Diverse klassen .picture border: 3px solid $ style-color3; @ include border-radius (8px); zweven: links; marge: 5px 15px 15px 15px;
a: link, a: visited color: darken ($ style-color1, 50); tekstdecoratie: geen;
sterk font-weight: bold;
tabel margin: 20px; rand: 3px vast; @ include border-radius (10px); randkleur: lichter ($ style-color2, 6); th text-align: center; lettertype: vet; opvulling: 10px 0 10px 0; tbody td opvulling: 10px; tr: nth-child (2n + 1) achtergrondkleur: donkerder ($ style-color2, 5); tr: nth-child (even) background-color: lighten ($ style-color2, 2.5);
breedte: 100%; margin-top: 20px; margin-left: 15px;
.tutorial_excerpt margin-left: 20px;
.tutorial_thumbnail float: left; margin-right: 20px; marge links: 20 px; margin-bottom: 20px;
.tutorial_wrap margin-bottom: 50px; zweven: links;
img.wp-post-image -moz-border-radius: 15px; grensradius: 15px; vakschaduw: 10px 10px 5px grijs;
.showcode margin: 20px auto 20px 30px; -moz-border-radius: 15px; grensradius: 15px; border: $ style-color4 3px; randstijl: stevig; achtergrond: wit;
breedte: 700 px; margin-top: 20px; margin-left: 15px;
marge: automatisch;
opaciteit: 0,8; filter: alpha (opacity = 80); -webkit-overgang: alle easy-in-out 0.2s; -moz-overgang: alle gemak-in-out 0.2s; -ms-overgang: alle gemakkelijk in-uit 0.2s; -o-overgang: alle gemak-in-out 0.2s; overgang: alle gemakkelijk in-uit 0.2s;
dekking: 1; filter: alpha (opacity = 100);
weergave: inline-block; hoogte: 28 px; breedte: 30px; background-image: url (/images/ico-subscribe-social.png); achtergrondherhaling: geen herhaling;
achtergrond-positie: -30px 0;
achtergrond-positie: -60 px 0;
achtergrondpositie: -210 px 0;
dl margin-left: 20px; margin-top: 20px; margin-bottom: 20px; lettertypegrootte: 19px; regelhoogte: 1,25 m;
dt margin-left: 20px; margin-bottom: 20px; lettertype: vet;
dd margin-left: 40px; margin-bottom: 20px; "
Deze code bepaalt hoe de website eruit zal zien. Het definieert de achtergrond, kleuren, lettertypen, enz. Die deel uitmaken van de styling voor een typische website.
De styling / Basic map bevat de bestanden die nodig zijn voor het standaard uiterlijk van de 404-pagina, koptekst, voettekst en zijbalkonderdelen van de website. Maak daarom een bestand met de naam 404.html en plaats deze code:
"html
Sorry, we konden de pagina niet vinden.
"
Dit is een basis 404 foutpagina. U moet voorzichtig zijn met de informatie die hier wordt gegeven, omdat u niet te veel informatie wilt vrijgeven over hoe uw site werkt. Aangezien dit in de inhoud gebied van de pagina, zal het voor de gebruiker gemakkelijk zijn om er vanaf weg te gaan.
Maak vervolgens de header.html bestand met deze inhoud:
"html
"
Dit is slechts een ongecodeerde header die niet-beschrijvend is, maar het geeft de CMS wel iets om te laten zien.
Maak vervolgens de footer.html bestand met deze inhoud:
"html
"Maak vervolgens het ** sidebar.html ** -bestand met deze inhoud:" htmlDit is een basiszijbalk die andere tijden kan hebben.
"Nogmaals, dit zijn place-holders.Al deze bestanden worden gekopieerd naar de ** site / parts ** -directory en aangepast aan de behoeften van de site. Deze zijn hier zodat de server iets met hun naam te gebruiken heeft in de server als de gebruiker vergeet ze te maken. ## Sitestructuur Wanneer de thema's en lay-outs zijn gedefinieerd, wordt het tijd om de basisinhoud en -structuur voor de eigenlijke site te maken. Maak in de ** site ** -directory de ** onderdelen * *, ** pagina's **, ** berichten **, ** afbeeldingen **, ** css **, ** js ** mappen. ### Onderdelen De map ** onderdelen ** bevat kleine fragmenten van * * html / css / javascript ** waarmee een enkele eenheid op meerdere locaties van de website wordt geplaatst.Deze onderdelen worden naar behoefte in de server geladen en gecombineerd met de pagina-inhoud.Voor onze demosite maakt u de volgende onderdelen: - * * footer.html ** met deze code: "html "- ** head.html ** met deze code:" html "- ** header.html ** met deze code:" htmlDit is de hoofdpagina van de testsite.
"- ** flatcms.md ** met deze code:" gewoon ### Platte CMS-server Dit is een pagina over de platte CMS-server. "- ** about.md ** met deze code:" gewoon ### Over Dit zou een standaard over de pagina zijn. "Dit zijn de demopagina's voor de site. Het enige vereiste bestand is ** main.html ** omdat de server deze pagina-inhoud in het geheugen zal laden en vanuit het geheugen zal serveren. het laden van de voorpagina van de website. De andere twee pagina's hebben de ** md ** extensie omdat ze zich in ** Markdown ** -indeling bevinden. De server zal de inhoud naar HTML vertalen voordat deze in de paginalay-out wordt ingesloten. , pagina's bevatten informatie die niet veel verandert in de loop van de tijd, ze geven de kijker informatie over de site, het doel en de doelen.pagina's kunnen hiërarchisch van aard zijn door mappen en submappen met pagina's te maken. de pagina's van deze pagina's. ### Berichten In tegenstelling tot pagina's zijn berichten items die regelmatig worden toegevoegd, bijvoorbeeld dagelijkse / wekelijkse / maandelijkse blogposts en nieuwsitems. Dit gebied zal naar verwachting vaak veranderen. Maak in de map ** posts ** twee nieuwe mappen: ** blogs ** en ** nieuws **. Maak in elk van deze mappen een directory ** flatcms **. Deze bevatten de blogberichten en nieuwsitems voor de ** Flat CMS ** -website. Maak in de directory ** posts / blogs / flatcms ** de volgende bestanden: - ** index.amber ** met deze inhoud: "plain h3 Flat CMS Blog p Dit is een wandelblog over een flat CMS. Mixin-artikel ( $ 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 / blogs / flatcms / flatcms", "Flat CMS Test Server is actief!", "12 augustus 2015") "- ** flatcms.md ** met deze inhoud : "plain De nieuwe server wordt uitgevoerd ---- Na veel werk en programmeren is de platte CMS-server actief. Blijf op de hoogte voor meer nieuws! socialmedia" De ** index.amber ** is een * * [Jade] (http://jade-lang.com/) ** sjabloon om de verschillende berichten in de blog te definiëren. Het ** Jade ** HTML-sjabloon systeem maakt het gemakkelijk om nieuwe inhoud toe te voegen met een exacte indeling. De parameters voor de macro's vormen de verschillende items. U kunt meer informatie vinden over [Jade on Tuts +] (https://webdesign.tutsplus.com/categories/jade). Hier is de gebruikte extensie ** oranje ** omdat het ** Go-taal ** equivalent van ** Jade ** ** [Amber] (https://github.com/eknkc/amber) ** is. Sinds dat was waar ik begon, zo heb ik het gemaakt. Als u de extensie wilt wijzigen, vergeet dan niet om deze ook in de juiste servercode te wijzigen. Maak in de directory ** posts / news / flatcms ** de volgende bestanden: - ** index.amber ** met deze inhoud: "plain h3 Flat CMS News p Hier is waar al het nieuws over wat ik aan het doen ben gevonden Kom regelmatig terug om het te proberen! Mixin article ($ 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 ("Platte CMS is actief", "/ posts / news / flatcms / flatcms", "De platte CMS-testserver is actief!", "12 augustus, 2015 ")" - ** flatcms.md ** met deze inhoud: "plain De nieuwe server wordt uitgevoerd ---- Na veel werk en programmeren, heb ik eindelijk alles verplaatst naar een goPress-server die ik zelf heb geschreven. maak dit ook voor u beschikbaar. Blijf op de hoogte! socialmedia "Hiermee maakt u de nieuwsitems voor de demosite. In mijn site gebruik ik dezelfde structuur voor zelfstudies en codedemo-pagina's. ### Afbeeldingen Alle websites hebben foto's. In deze opstelling staan alle afbeeldingen in de map ** site / afbeeldingen **. Voor deze demosite worden alleen de social media-pictogrammen hier geplaatst. U kunt het afbeeldingsbestand van het downloadbestand ophalen. ### Site CSS Zelfs met de ** lay-out css ** en ** styling css **, zullen er tijden zijn dat je speciale ** css ** regels wilt. De ** site / css ** -map bevat alle ** css ** -bestanden die de laatste hand leggen aan de website. Alle ** lay-out **, ** stilering ** en ** site / css ** -bestanden worden samen gecompileerd tot één ** css ** -bestand. Maak daarom de map ** site / css / final ** om dit gecompileerde bestand te plaatsen. Maak nu het bestand ** site / css / site.css ** met deze inhoud: "css .clear clear: both; height: 0px;" Er staat hier niet veel in, alleen een definitie voor een 'clear'-klasse. U kunt toevoegen wat u wilt, maar het moet iets zijn dat niet in de lay-out- of stylingcategorie valt. ### Site Scripts De ** site / js ** map bevat alle speciale JavaScript-bestanden voor de site. Deze worden samen gecompileerd en geminimaliseerd voor een sneller laden van de site. Maak voor dit moment de ** site / js / final ** -directory voor het gecompileerde script en een ** site / js / 01-site.js ** -bestand met deze inhoud: "javascript; // // Bestand: Site. js // // Beschrijving: het JavaScript-bestand voor de site. // jQuery (document) .ready (function () // // De code hier wordt gestart zodra een pagina is geladen. //); "Er is hier niet veel. Maar omdat uw site aangepast JavaScript nodig heeft, kan deze hier worden geplaatst. Omdat de scripts samen worden gecompileerd, nummer ik ze in de volgorde die nodig is om te laden. De routine voor het samenstellen van de scripts laadt ze in numerieke volgorde. ### Automatiseren met slikken De eenvoudigste manier om het laden van een webpagina te versnellen, is om zo min mogelijk HTTP-aanvragen te hebben. Daarom is het het beste om alle CSS- en JavaScript-bestanden in één bestand te combineren. De beste manier om deze bestanden te compileren is met een build-script. Het uitvoeren van het elke keer dat de server een verzoek krijgt is een verspilling van verwerkingstijd. Mijn keuze voor automatiseringsscriptlopers is ** [Gulp] (http://gulpjs.com/) **. ** Gulp ** werkt op ** [Node.js] (https://nodejs.org/) **. Ga daarom naar de [Node.js-website] (https://nodejs.org/) en download het programma voor uw systeem. Als je Node.js eenmaal hebt geïnstalleerd, kun je ** Gulp ** installeren met het volgende: "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 "Hiermee installeer je alle ** Gulp ** - en ** Gulp ** -modules die ik gebruik in het build-script. Maak nu, bovenaan uw directory, het bestand ** gulpfile.js ** met deze inhoud: "javascript // Vereisten var gulp = require ('gulp"), compass = require (' gulp-compass '), prefix = vereisen ('gulp-autoprefixer'), compressor = vereisen ('gulp-compressor'), concat = require ('gulp-concat'); // Bepaalt pad naar sass var Theme = "Basic"; var Layout = "SingleCol "; var themesassRoot = 'themes / styling /' + Theme; var layoutsassRoot = 'themes / lay-outs /' + Layout; // Gulp task gulp.task ('theme-compass-to-css', function () terug gulp .src (themesassRoot + '/ sass / Basic.scss') .pipe (kompas (config_file: themesassRoot + '/config.rb', css: themesassRoot + '/ css', sass: themesassRoot + '/ sass', vereisen: 'sassy-buttons')) .pipe (prefix ("laatste 3 versies")) .pipe (gulp.dest (themesassRoot + '/ css'))); gulp.task ('layout-compass-to-css ', function () return gulp.src (layoutsassRoot +' / sass / base.scss ') .pipe (kompas (config_file: layoutsassRoot +' /config.rb ', css: layoutsassRoot +' / css ', sass: layoutsassRoot + '/ sass', vereisen: 'susy')) .pipe (prefix ("laatste 3 versies")) .pipe (gulp.dest (layoutsassRoot + '/ css'))); gulp.task ('watch-compass', function () // What to watch gulp.watch (themesassRoot + '/sass/Basic.scss', function () // What to run gulp.run ('theme- compass-to-css ');); gulp.watch (layoutsassRoot +' /sass/Basic.scss ', function () // Wat moet gulp.run worden uitgevoerd (' 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 ('standaard', ['all-compass', 'js', 'css']); "Dit compileert alle CSS en JavaScript in een enkel bestand: in de ** site / css / final / final.css ** bestand voor de CSS, en in het ** site / js / final / final.js ** bestand voor de JavaScript. Het zal ook de browser prefix regels voor de CSS toevoegen. command: "bash gulp" ** Gulp ** zal al onze bestanden compileren en ze op de juiste locatie achterlaten. Elke taak gedefinieerd in de ** gulpfile.js ** kan individueel worden uitgevoerd door de taaknaam na de 'gulp' te geven 'command.U kunt meer te weten komen over [Gulp op Tuts +] (https://webdesign.tutsplus.com/categories/gulpjs). ## Serverconfiguratiebestand Alle servers hebben configuratiegegevens nodig. Maak daarom in de hoofdmap van de map een het bestand ** server.json ** met deze informatie: "json " CurrentLayout ":" SingleCol "," CurrentStyling ":" Basic "," ServerAddress ":" localhost: 8080 "," SiteTitle ":" Platte CMS-test Site "," Sitebase ":" ./site/ "," TemplatBase ":" ./themes/ "," Cache ": false, "MainBase": "" "Dit ** json ** -bestand beschrijft informatie over de lay-out die moet worden gebruikt, de styling die moet worden gebruikt, het adres en de poort waarnaar de server moet luisteren, de hoofdnaam voor de site met een ondertitel, een caching-vlag om caching in en uit te schakelen voor foutopsporingsdoeleinden en de locatie van de verschillende directory's die voor de site worden gebruikt. Door deze informatie in een ** json ** -bestand aan de server te leveren, kan de server flexibel zijn, met minder hardgecodeerde informatie. ## Uploaden van de site naar een server De meeste mensen gebruiken een FTP-client om de bestanden naar hun server te kopiëren. Dit is gemakkelijk te doen, maar verschilt sterk van het gebruikte systeem en de gebruikte programma's. Maar er zijn enkele alternatieven. Je kunt een ** [Dropbox] (http://dropbox.com/) ** -daemon instellen om je site te laden vanuit je Dropbox-account. De site [Dropbox Wiki] (http://www.dropboxwiki.com/tips-and-tricks/install-dropbox-in-an-entirely-text-based-linux-environment) heeft gedetailleerde instructies voor het instellen hiervan. Het enige probleem is dat de bestanden automatisch naar de server worden geüpload wanneer u een wijziging aanbrengt. Soms wilt u wijzigingen aanbrengen zonder dat ze naar de server gaan. Als dit het geval is, moet je een niet-Dropbox-locatie hebben van alle bestanden van de site en ook een Dropbox-locatie. Maak wanneer u klaar bent een taak in uw ** Gulp ** -bestand om de nieuwe sitebestanden naar de ** Dropbox ** -locatie te kopiëren. ! [Dropzone 3 instellen voor uploaden naar CMS] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F71%2Fposts%2F24547%2Fimage-1438683734928.jpg) Dropzone 3 instellen voor CMS uploaden Mijn voorkeursaanpak is om te gebruiken ** [Dropzone 3] (https://aptonic.com/dropzone3/) **. Je kunt ** Dropzone 3 ** programmeren met ** Ruby ** of ** Python ** om elk type actie uit te voeren voor een bestand dat erop is neergezet. Het heeft ook veel ingebouwde functies. Er is een bestandsactie ingebouwd om te uploaden naar een FTP / SFTP-site. Ik maak één ** Dropzone 3 ** -doel voor elk van de hoofddirectory's op mijn site. Wanneer ik vervolgens een bestand wil wijzigen of toevoegen, sleep ik het eenvoudig naar het juiste doel voor de doelzone van de directory. Je kunt meer informatie over ** Dropzone 3 ** vinden in mijn zelfstudie [Dropzone 3-acties schrijven] (https://computers.tutsplus.com/tutorials/writing-dropzone-3-actions--cms-21590). ## Conclusie Deze basisbestanden zullen een website maken die er als volgt uitziet:! [Demo Site in Browser] (https://cms-assets.tutsplus.com/uploads%2Fusers%2F71%2Fposts%2F24547%2Fimage-1