Share
Lo que vas a crearHa habido una tendencia de servidores web de "diseño plano de CMS". Esto simplemente se refiere a un Sistema de gestión de contenido (CMS) que no almacena su información en una base de datos. En su lugar, toda la información se almacena en archivos de texto plano. Dado que muchos servidores privados virtuales (VPS) en la actualidad utilizan discos duros basados en RAM, este enfoque es más rápido y un poco más seguro.
En esta serie de tutoriales, le mostraré cómo crear su propio sistema de archivos planos CMS utilizando alguna tecnología web estándar. Estos sistemas no son tan completos como los otros, pero tienen lo básico con un buen tiempo de respuesta.
Con toda la información en el disco duro, la organización de archivos se convierte en un gran problema. Teniendo eso en cuenta, la información del sitio estará en un directorio diferente al de la información de diseño y estilo. Además, cada tipo de página tiene su propio directorio en la carpeta del sitio con un directorio de partes para partes pequeñas del CMS. Esto mantiene todo en su lugar y hace un sistema flexible..
En el directorio en el que va a construir el proyecto, cree los siguientes directorios: src, sitio, y temas. los src directorio contendrá el código del servidor, el sitio directorio es para toda la información del sitio, y la temas Directorio para la información de diseño y tematización..
En el temas directorio, necesitas hacer un diseños y un estilo directorio. los diseños directorio contendrá los diferentes diseños de páginas web. Al separar la información de diseño de la información de estilo, los temas se vuelven mucho más flexibles. Por ahora, habrá un diseño llamado SingleCol.
Para todo el estilo y creación de diseño, estoy usando Hablar con descaro a, Brújula, y Susy. Hablar con descaro a es un lenguaje de procesamiento de hojas de estilo personalizado. Proporciona una forma más robusta de crear las hojas de estilo CSS para su sitio web.. Brújula Es una extensión de Sass.. Botones descarados es una extensión de Sass para hacer bonitos botones en el sitio web. Susy También es una extensión para crear un sistema de diseño de cuadrícula para su sitio..
Dado que Ruby está preinstalado en todos los Mac, no necesitará instalarlo. Para obtener Ruby en un sistema Windows, deberá descargar el Instalador de Windows de Ruby. En Linux, debe usar el administrador de paquetes de su sistema para instalar Ruby.
Una vez que Ruby esté en su sistema, puede instalar Sass, Compass, Sassy-buttons y Susy con estas líneas de comando:
bash gema instalar sass gema instalar sassy-buttons gema instalar brújula gema instalar susy
Para este tutorial, estoy usando Sass 3.4.16, Sassy-buttons 0.2.6, Compass 1.0.3 y Susy 2.2.5. Dependiendo de la configuración de su sistema, es posible que tenga que ejecutar estos comandos con sudo Antes que ellos.
Para comenzar a crear diseños, ejecute estos comandos en el SingleCol directorio:
bash compass init
Esto creará el hablar con descaro a y hojas de estilo directorios, y un archivo llamado config.rb. Ya que me gusta usar css para el directorio de hojas de estilo, renombra hojas de estilo directorio a css. Además, crea un js Directorio para cualquier archivo JavaScript necesario para el diseño. Abre el config.rb archiva y hazlo como este:
ruby require 'susy' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "js"
Ahora, para crear el diseño básico del sitio web, cree un archivo en el diseño directorio llamado template.html. En este archivo, agregue este código:
"html
"
Esta plantilla crea una página web estándar para el sitio. Cada página tiene un encabezado con una barra de navegación, una barra lateral única, un área de contenido y un área de pie de página. Lo último que se carga son los javascripts necesarios para el sitio..
Cada sección está representada con una Manillar macro. El servidor expande las macros antes de dárselas al usuario..
En el hablar con descaro a directorio, crea un archivo llamado base.scss y coloque este código:
"css @import 'compass / reset'; @import 'susy';
$ susy: (flow: ltr, math: fluid, output: float, gutter-position: after, container: auto, container-position: center, columnas: 16, cunetas: .25, ancho de columna: false, global-box -tamaño: cuadro de contenido, último flujo: a, depuración: (imagen: ocultar, color: rgba (# 66f, .25), salida: fondo, alternar: arriba a la derecha,), uso-custom: (fondo-imagen : true, background-options: false, tamaño de caja: true, clearfix: false, rem: true,));
cuerpo
@incluir contenedor (16); ancho: 1024px; bloqueo de pantalla;
@include span (16 de 16); margen inferior: 20px;
margen superior: 20px; margen izquierdo: auto; margen derecho: auto; ancho: 95%;
@include span (11 de 16);
.col1 @include span (5 de 10);
.col2 @include span (últimos 5 de 10);
ancho: auto;
.caja @include span (4 de 10);
@include span (últimos 4 de 16);
@include span (16 de 16);
/ ** Menú desplegable de CSS ** /
margen superior: 20px; margen izquierdo: auto; margen derecho: auto; ancho: 95%;
arriba: 1em; izquierda: 1em; pantalla: en línea; ancho: 100%;
margen superior: 1em; pantalla: en línea; ancho: 100%;
pantalla: bloque en línea; ancho: ajuste de contenido;
text-align: center; bloqueo de pantalla; espacio en blanco: nowrap; margen: 0; relleno: 5px; texto-decoración: ninguno;
estilo de lista: ninguno; margen: 0px 20px 0px 20px; relleno: 0px;
posición: relativo; min-height: 1px; alineación vertical: parte inferior; ancho: ajuste de contenido;
posición: absoluta; índice z: 500; superior: 50px; izquierda: 20px; pantalla: ninguna; relleno: 0.5em; margen: -1em 0 0 -1em;
#menuh ul ul li ancho: 100%;
alineación de texto: izquierda;
izquierda: 90px;
div # menuh li: hover cursor: puntero; índice z: 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: hover ul, div # menuh li li li li: hover ul pantalla: bloque;
/ * Finalizar menú desplegable CSS * / "
Esta hablar con descaro a el código se carga en los estilos de restablecimiento de la brújula para neutralizar los valores predeterminados del navegador. Luego se carga y configura. susy para crear el diseño de cuadrícula adecuado para todos los elementos de la página web.
los css El sistema de navegación es después de que la página define. Los menús desplegables ocultos para los menús se hacen visibles con las definiciones del mouse-over. Esto da una css único sistema de menús.
Todos estos estilos definen la estructura básica del sitio web. Nada aquí crea un vistazo a la página, solo su posicionamiento. Todo el estilo es manejado por el estilo contenido.
Para el estilo directorio, crea un directorio llamado BASIC. Inicializar el hablar con descaro a información como se hace para el diseños / SingleCol directorio. En este directorio, ejecute la siguiente línea de comando:
bash compass init
Esto creará el hablar con descaro a y hojas de estilo directorios, y un archivo llamado config.rb. Ya que me gusta usar css para el directorio de hojas de estilo, renombra hojas de estilo directorio a css. Además, crea un js Directorio para cualquier JavaScript para crear el tema. Abre el config.rb archiva y hazlo como este:
ruby require 'sassy-buttons' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "js"
Para los botones de estilo en el sitio web, me gusta usar botones descarados. Por lo tanto, se requiere primero, y luego la estructura de directorios.
En el Básico / sass directorio, crea el Basic.scss archivo con esta información:
"css // Bienvenido a Compass. // En este archivo debe escribir sus estilos principales. (o centralizar sus importaciones) // Importe este archivo utilizando el siguiente HTML o equivalente: // // @import 'compass / css3'; @importar '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: '.'; bloqueo de pantalla; Limpia los dos; visibilidad: oculta; línea de altura: 0; altura: 0;
.clearfix display: inline-block;
html [xmlns] .clearfix display: block;
// // Estilismo principal para madera. // @mixin standardize padding-top: 10px; relleno-izquierda: 15px; tamaño de fuente: 19px; altura de la línea: 1.25em;
body background-color: $ style-color2;
Accentsconagua
ingrese [type = 'button'] @include sassy-button ('shiny', 10px, 16px, $ style-color1, darken ($ style-color1, 20%), # 000, negrita); .botón @include sassy-button ('shiny', 10px, 16px, $ style-color1, darken ($ style-color1, 20%), # 000, negrita); pantalla: heredar; margen izquierdo: auto; margen derecho: auto; margen superior: 10px; margen inferior: 10px; text-align: center; #wrap background-color: $ style-color1; @include radio-borde (.6em, .6em); margen superior: 10px; margen inferior: 10px; borde: 4px solid $ style-color4; #header background-color: $ style-color2; @include radio-borde (15px); repetición de fondo: no repetición; borde: 2px solid $ style-color3; altura: 130px; alineación de texto: izquierda; margen superior: 20px; tamaño de letra: 3em; h1 a: enlace, a: visitó color: # 000; texto-decoración: ninguno; padding-top: 40px; relleno-izquierda: 20px; h6 font-size: .4em; estilo de letra: cursiva; relleno-izquierda: 20px; #sidebar background-color: $ style-color2; @include radio-borde (.6em, .6em); relleno: .6em; vertical-align: text-top; desbordamiento: oculto; margen derecho: .5em; borde: 2px solid $ style-color3; hr color: $ style-color2; color de fondo: $ style-color2; p, ul, li @include standardize; ul li list-style-type: disc; margen izquierdo: 25px; relleno: 0; borde: 0; esquema: 0; tamaño de letra: 100%; alineación vertical: línea de base; fondo: transparente; li margen inferior: 10px; h1, h2, h3, h4, h5, h6 @include standardize; font-weight: negrita; margen superior: .25em; margen inferior: .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; entrada [type = 'button'] margin-left: 120px; Limpia los dos; #content input [type = 'button'] margin-left: 200px; Limpia los dos; h1, h2, h3, h4, h5, h6 @include standardize; font-weight: negrita; margen superior: .25em; margen inferior: .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; margen inferior: 30px; p, ul, li, detalles, resumen, pre @include standardsize; detalles p, pre margen izquierdo: 25 px; ul li list-style-type: disc; margen izquierdo: 25px; relleno: 0; borde: 0; esquema: 0; tamaño de letra: 100%; alineación vertical: línea de base; fondo: transparente; li margen inferior: 10px; .box claro: ambos; color de fondo: $ style-color4; flotar: ninguno; margen izquierdo: auto; margen derecho: auto; margen superior: 1.0em; margen inferior: 1em; @include radio-borde (.6em, .6em); bloqueo de pantalla; relleno: .5em; img @include border-radius (10px); margen: 20px auto 20px auto; #footer border-top: 5px; estilo de borde: sólido; color de borde: $ style-color3; @include radio-borde (.6em, .6em); margen superior: 30px; p margen inferior: .6em; @include standardize; margen derecho: 15px; // menú desplegable de CSS #navigation text-align: left; borde: 2px solid $ style-color3; color de fondo: $ style-color2; @include radio-borde (15px);
tamaño de letra: 1.3em; Familia tipográfica: arial, helvética, sans-serif; color de fondo: $ style-color1;
color de fondo: $ style-color2;
color de fondo: $ style-color2; @include radio-borde (15px); borde: 2px solid $ style-color3;
color de fondo: $ style-color2; color: # 000;
color: # 000; color de fondo: $ style-color2;
color: # 000; color de fondo: $ style-color4; @include radio-borde (5px);
// Fin del menú desplegable de CSS // Clases varias .picture border: 3px solid $ style-color3; @include radio-borde (8px); flotador izquierdo; margen: 5px 15px 15px 15px;
a: enlace, a: visitado color: oscurecer ($ style-color1, 50); texto-decoración: ninguno;
fuerte font-weight: negrita;
tabla margen: 20px; borde: 3px sólido; @include radio-borde (10px); color de borde: aclarar ($ style-color2, 6); th text-align: center; font-weight: negrita; relleno: 10px 0 10px 0; tbody td padding: 10px; tr: nth-child (2n + 1) background-color: darken ($ style-color2, 5); tr: nth-child (even) background-color: lighten ($ style-color2, 2.5);
ancho: 100%; margen superior: 20px; margen izquierdo: 15px;
.tutorial_excerpt margin-left: 20px;
.tutorial_thumbnail float: left; margen derecho: 20px; margen izquierdo: 20px; margen inferior: 20px;
.tutorial_wrap margin-bottom: 50px; flotador izquierdo;
img.wp-post-image -moz-border-radius: 15px; radio del borde: 15px; caja de sombra: 10px 10px 5px gris;
.showcode margin: 20px auto 20px 30px; -moz-border-radius: 15px; radio del borde: 15px; borde: $ style-color4 3px; estilo de borde: sólido; fondo: blanco;
ancho: 700px; margen superior: 20px; margen izquierdo: 15px;
margen: auto;
opacidad: 0,8; filtro: alfa (opacidad = 80); -webkit-transición: todos los 0.2s de facilidad de entrada; -moz-transición: todos los 0.2s de facilidad de entrada; -ms-transición: todos los 0.2s de facilidad de entrada; -o-transición: todos los 0.2s de facilidad de entrada; transición: todos los 0.2s de facilidad de entrada;
opacidad: 1; filtro: alfa (opacidad = 100);
pantalla: bloque en línea; altura: 28px; ancho: 30px; imagen de fondo: url (/images/ico-subscribe-social.png); repetición de fondo: no repetición;
posición de fondo: -30px 0;
posición de fondo: -60px 0;
posición de fondo: -210px 0;
dl margen izquierdo: 20px; margen superior: 20px; margen inferior: 20px; tamaño de fuente: 19px; altura de la línea: 1.25em;
dt margen izquierdo: 20 px; margen inferior: 20px; font-weight: negrita;
dd margen izquierdo: 40px; margen inferior: 20px; "
Este código define cómo se verá el sitio web. Define el fondo, el color, las fuentes, etc. que conforman el estilo de un sitio web típico.
los estilo / básico directorio contiene los archivos necesarios para el aspecto predeterminado de la página 404, el encabezado, el pie de página y las partes de la barra lateral del sitio web. Por lo tanto, crea un archivo llamado 404.html y coloque este código:
"html
Lo sentimos, no pudimos encontrar la página..
"
Este es un básico 404 página de error Debe tener cuidado con la información que se proporciona aquí, ya que no desea revelar demasiada información sobre cómo funciona su sitio. Dado que esto se colocará en el contenido Área de la página, será fácil para el usuario navegar lejos de ella.
A continuación, crea el header.html archivo con este contenido:
"html
"
Esto es solo un encabezado básico que no es descriptivo, pero le da al CMS algo que mostrar.
A continuación, crea el footer.html archivo con este contenido:
"html
"A continuación, cree el archivo ** sidebar.html ** con este contenido:" htmlEsta es una barra lateral básica que puede tener otras veces..
"Una vez más, estos son marcadores de posición. Todos estos archivos se copian en el directorio ** sitio / partes ** y se modifican de acuerdo con las necesidades del sitio. Están aquí para que el servidor tenga algo con sus nombres para usar en el servidor. en caso de que el usuario se olvide de crearlos. ## Estructura del sitio Con la temática y los diseños definidos, es el momento de crear el contenido y la estructura básicos del sitio real. En el directorio ** sitio **, cree las ** partes * *, ** páginas **, ** publicaciones **, ** imágenes **, ** css **, ** js ** directorios. ### Partes El directorio ** partes ** contendrá pequeños fragmentos de * * html / css / javascript ** que hará que una sola unidad se coloque en varias ubicaciones del sitio web. Estas partes se cargan en el servidor y se combinan con el contenido de la página según sea necesario. Para nuestro sitio de demostración, cree las siguientes partes: - * footer.html ** con este código: "html "- ** head.html ** con este código:" html "- ** header.html ** con este código:" htmlEsta es la página principal del sitio de prueba..
"- ** flatcms.md ** con este código:" plain ### Flat CMS Server Esta es una página sobre el servidor plano de CMS. "- ** about.md ** con este código:" plain ### About Esto sería un estándar acerca de la página ". Estas son las páginas de demostración del sitio. El único archivo requerido es ** main.html ** ya que el servidor cargará el contenido de esta página en la memoria y se enviará desde la memoria. Eso ayuda a acelerar la carga de la página principal del sitio web. Las otras dos páginas tienen la extensión ** md ** porque están en formato ** Markdown **. El servidor traducirá el contenido a HTML antes de incrustarlo en el diseño de la página. En general , las páginas contienen información que no cambia mucho con el tiempo. Le brindan al espectador información sobre el sitio, su propósito y sus objetivos. Las páginas pueden ser de naturaleza jerárquica al crear directorios y subdirectorios con páginas. Estos nombres de directorios crean las direcciones para directorio de estas páginas. ### Publicaciones A diferencia de las páginas, las publicaciones son elementos que se agregan regularmente, por ejemplo, publicaciones de blog diarias / semanales / mensuales y noticias. Se espera que esta área cambie con frecuencia. En el directorio ** posts **, cree dos nuevos directorios: ** blogs ** y ** noticias **. En cada uno de estos directorios, cree un directorio ** flatcms **. Estos contendrán las publicaciones del blog y las noticias del sitio web ** Flat CMS **. En el directorio ** posts / blogs / flatcms **, cree los siguientes archivos: - ** index.amber ** con estos contenidos: "plain h3 Flat CMS Blog p Este es un blog confuso sobre un CMS plano. Artículo sobre mixin ( $ title, $ link, $ extracto, $ 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 se está ejecutando!", "12 de agosto de 2015") "- ** flatcms.md ** con estos contenidos : "plain El nuevo servidor se está ejecutando ---- Después de mucho trabajo y programación, el servidor plano de CMS se está ejecutando. ¡Manténgase atento a más noticias! socialmedia" El ** index.amber ** es un * * [Jade] (http://jade-lang.com/) ** plantilla para definir las diferentes publicaciones en el blog. El sistema de plantillas HTML ** Jade ** facilita la adición de nuevo contenido con un formato exacto. Los parámetros a las macros componen los diferentes elementos. Puede encontrar más información sobre [Jade on Tuts +] (https://webdesign.tutsplus.com/categories/jade). Aquí, la extensión utilizada es ** ámbar ** porque el ** Go language ** equivalente a ** Jade ** es ** [Amber] (https://github.com/eknkc/amber) **. Desde ahí fue donde comencé, así es como lo hice. Si desea cambiar la extensión, recuerde cambiarla también en el código de servidor apropiado. En el directorio ** posts / news / flatcms **, cree los siguientes archivos: - ** index.amber ** con estos contenidos: "plain h3 Flat CMS News p Aquí es donde se encuentran todas las noticias sobre lo que estoy haciendo ¡Por favor, vuelva con frecuencia para verlo! Artículo mixin ($ title, $ link, $ extracto, $ date) div.entry div.tutorial_wrap div.tutorial_div a [href = $ link] h3 # $ title h5 # $ date p.tutorial_excerpt # $ excerpt div.clear + artículo ("Flat CMS is Running", "/ posts / news / flatcms / flatcms", "¡El servidor de prueba Flat CMS se está ejecutando!", "12 de agosto, 2015 ")" - ** flatcms.md ** con estos contenidos: "plain El nuevo servidor se está ejecutando ---- Después de mucho trabajo y programación, finalmente tengo todo movido a un servidor de goPress que escribí yo mismo. Lo haré también estará disponible para ti. ¡Mantente atento! socialmedia "Esto crea las noticias para el sitio de demostración. En mi sitio, uso la misma estructura para tutoriales y páginas de demostración de código. ### Imágenes Todos los sitios web tienen imágenes. En esta configuración, todas las imágenes están en el directorio ** sitio / imágenes **. Para este sitio de demostración, solo los iconos de redes sociales se colocarán aquí. Puede obtener el archivo de imagen desde el archivo de descarga. ### Sitio CSS Incluso con el ** diseño css ** y ** el estilo css **, habrá ocasiones en que querrá reglas especiales ** css **. El directorio ** site / css ** contiene todos los archivos ** css ** que dan los toques finales al sitio web. Todos los archivos ** layout **, ** styling ** y ** site / css ** se compilarán juntos en un archivo ** css **. Por lo tanto, cree el directorio ** site / css / final ** para colocar este archivo compilado. Ahora, cree el archivo ** site / css / site.css ** con estos contenidos: "css .clear clear: both; height: 0px;" No hay mucho aquí, solo una definición para una clase 'clear'. Puede agregar lo que desee, pero debería ser algo que no se incluya en la categoría de diseño o estilo. ### Scripts del sitio El directorio ** site / js ** contiene todos los archivos especiales de JavaScript para el sitio. Estos serán compilados juntos y minimizados para una carga más rápida del sitio. Por ahora, cree el directorio ** site / js / final ** para el script compilado y un archivo ** site / js / 01-site.js ** con estos contenidos: "javascript; // // File: Site. js // // Descripción: El archivo JavaScript para el sitio. // jQuery (document) .ready (function () // // El código aquí se ejecutará una vez que se cargue una página. //); "Hay No hay mucho aquí ahora mismo. Pero, como su sitio necesita JavaScript personalizado, se puede colocar aquí. Dado que los scripts se compilarán juntos, los numero en el orden necesario para la carga. La rutina para compilar los scripts juntos los cargará en orden numérico. ### Automatización con Gulp La forma más sencilla de acelerar la carga de una página web es tener la menor cantidad de solicitudes HTTP posibles. Por lo tanto, es mejor combinar todos los archivos CSS y JavaScript en un archivo cada uno. La mejor manera de compilar estos archivos es con un script de compilación. Realizarlo cada vez que el servidor recibe una solicitud es una pérdida de tiempo de procesamiento. Mi elección de corredores de scripts de automatización es ** [Gulp] (http://gulpjs.com/) **. ** Gulp ** se ejecuta en ** [Node.js] (https://nodejs.org/) **. Por lo tanto, vaya al [sitio web de Node.js] (https://nodejs.org/) y descargue el programa para su sistema. Una vez que tenga instalado Node.js, puede instalar ** Gulp ** con lo siguiente: "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 "Esto instalará todos los módulos ** Gulp ** y ** Gulp ** que utilizo en el script de compilación. Ahora, en la parte superior de su directorio, cree el archivo ** gulpfile.js ** con estos contenidos: "javascript // Requisitos var gulp = require ('gulp'), compass = require ('gulp-compass'), prefijo = require ('gulp-autoprefixer'), compressor = require ('gulp-compressor'), concat = require ('gulp-concat'); // Define la ruta a sass var Theme = "Basic"; var Layout = "SingleCol "; var themesassRoot = 'themes / styling /' + Theme; var layoutsassRoot = 'themes / layouts /' + Layout; // Gulp task gulp.task ('theme-compass-to-css', function () return gulp .src (themesassRoot + '/ sass / Basic.scss') .pipe (compass (config_file: themesassRoot + '/config.rb', css: themesassRoot + '/ css', sass: themesassRoot + '/ sass', require: 'sassy-buttons')) .pipe (prefijo ("3 últimas versiones")) .pipe (gulp.dest (themesassRoot + '/ css'))); gulp.task ('layout-compass-to-css ', function () return gulp.src (layoutsassRoot +' / sass / base.scss ') .pipe (compass (config_file: layoutsassRoot +' /config.rb ', css: layoutsassRoot +' / css ', sass: layoutsassRoot + '/ sass', requiere: 'susy')) .pipe (prefijo ("últimas 3 versiones")) .pipe (gulp.dest (layoutsassRoot + '/ css'))); gulp.task ('watch-compass', function () // Qué ver gulp.watch (themesassRoot + '/sass/Basic.scss', function () // What to run gulp.run ('theme- compás a css ');); gulp.watch (layoutsassRoot +' /sass/Basic.scss ', function () // Qué ejecutar 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']); "Esto compilará todo el CSS y JavaScript en un solo archivo: en ** site / css / final / archivo final.css ** para el CSS, y en el archivo ** site / js / final / final.js ** para el JavaScript. También agregará las reglas de prefijo del navegador para el CSS. Simplemente ejecute en el directorio superior comando: "bash gulp" ** Gulp ** compilará todos nuestros archivos y los dejará en la ubicación correcta. Cada tarea definida en el ** gulpfile.js ** se puede ejecutar individualmente dando el nombre de la tarea después de 'gulp 'Puede obtener más información sobre [Gulp on Tuts +] (https://webdesign.tutsplus.com/categories/gulpjs). ## Archivo de configuración del servidor Todos los servidores necesitan información de configuración. Por lo tanto, en la raíz del directorio, cree el archivo ** server.json ** con esta información: "json " CurrentLayout ":" SingleCol "," CurrentStyling ":" Basic "," ServerAddress ":" localhost: 8080 "," SiteTitle ":" Flat CMS Test Sitio "," Sitebase ":" ./site/ "," TemplatBase ":" ./themes/ "," Cache ": false, "MainBase": "" "Este archivo ** json ** describe información sobre el diseño a usar, el estilo a usar, la dirección y el puerto que el servidor debe escuchar, el nombre principal del sitio con un subtítulo, un indicador de almacenamiento en caché para activar y desactivar el almacenamiento en caché para fines de depuración, y la ubicación de los diferentes directorios utilizados para el sitio. Al proporcionar esta información al servidor en un archivo ** json **, el servidor puede ser flexible, con menos información codificada. ## Cargar el sitio en un servidor La mayoría de las personas usan un cliente FTP para copiar los archivos en su servidor. Esto es fácil de hacer, pero varía mucho con respecto al sistema y los programas utilizados. Pero hay algunas alternativas. Puede configurar un demonio ** [Dropbox] (http://dropbox.com/) ** para cargar su sitio desde su cuenta de Dropbox. El sitio [Dropbox Wiki] (http://www.dropboxwiki.com/tips-and-tricks/install-dropbox-in-an-entirely-text-based-linux-environment) tiene instrucciones detalladas para configurar esto. El único problema es que los archivos se cargan automáticamente en el servidor cuando realiza cualquier cambio. A veces, querrá hacer cambios sin que vayan al servidor. Si este es el caso, tenga una ubica