Share
Como desarrolladores, siempre debemos buscar formas de acelerar y automatizar nuestro flujo de trabajo tanto como podamos, pero esto no siempre es un proceso fácil. Debemos recordar compilar, minimizar, concatenar y, en general, hacer que nuestros archivos sean más eficientes para garantizar tiempos de carga más rápidos para nuestros usuarios finales al tiempo que mantenemos una estructura de archivos organizada que nos permite aplicar cambios fácilmente. Afortunadamente, existen herramientas que nos ayudan con este proceso y me gustaría compartir cómo las he configurado para mejorar el desarrollo de mi tema de WordPress.
Todos sabemos que debemos optimizar nuestros archivos CSS y JavaScript antes de implementar nuestro sitio de WordPress. Bombardeando nuestras hojas de estilo con @importar declaraciones o incluyendo múltiples archivos utilizando > Las etiquetas no son la forma más eficiente, ya que aumentará la cantidad de solicitudes que debe realizar el navegador al cargar nuestros sitios. Cambiar esto manualmente podría ser una tarea desalentadora, agregue el hecho de que también deberíamos estar optimizando nuestras imágenes y páginas HTML; nos espera mucho trabajo.
Afortunadamente, algunas personas realmente inteligentes han creado excelentes herramientas que pueden ayudarnos a hacer que nuestro flujo de trabajo sea lo más sencillo posible:
Me gustaría centrarme en cómo implementar estas tecnologías para el desarrollo de temas de WordPress. No quiero hacer un análisis en profundidad de estas herramientas, ya que hay algunos artículos en Tuts + Network que hacen un gran trabajo explicando cómo instalarlos y configurarlos, como:
Sin más preámbulos, desarrollaré un pequeño tema de prueba que describirá los pasos a seguir para incorporar estas herramientas juntas..
Usaremos el paquete Nettuts + Fetch para descargar la última versión de WordPress, por supuesto, si usa un IDE que no sea Sublime Text 2, deberá usar un método diferente..
Para nuestro tema de prueba crearemos la siguiente estructura de archivos:
Echemos un vistazo rápido a cada carpeta y archivo y veamos para qué sirven:
funciones.php - Puedes incluir cualquier función que necesites en este archivo, comienzo cargando jQuery en mi wp_head acción (las mejores prácticas dicen cargar jQuery y otros scripts antes de la etiqueta de cierre del cuerpo, pero a los complementos les gusta cargar scripts personalizados en wp_head y si confían en jQuery no funcionarán), también carga mis scripts en el wp_footer acción (todavía no hemos creado este archivo).
Accentsconagua
function jvs_theme_setup () // Enqueue jQuery wp_enqueue_script ('jquery'); // Poner en cola los scripts de temas personalizados en el pie de página wp_enqueue_script ('custom-scripts', get_bloginfo ('template_url'). '/Js/script.min.js', array ('jquery'), false, true); add_action ('after_setup_theme', 'jvs_theme_setup'); index.php - No hay nada más especial aquí, solo un archivo con el que me gustaría comenzar en todos mis proyectos. Observe que la hoja de estilo principal se está llamando después. wp_head esto nos permite anular los estilos personalizados agregados por los complementos sin usar desagradables !importante declaraciones.
><?php wp_title(' | '); ?> >
Usted puede haber notado que ni el style.css ni script.min.js Los archivos aún existen, no te preocupes, nosotros nos encargaremos de eso..
Primero tenemos que configurar nuestra config.rb archivo ya que esto le dirá a la brújula dónde están nuestras hojas de estilo y cómo queremos compilarlas, las guardaremos dentro de la src carpeta:
# Directorios de temas: http_path = "" css_dir = "…" sass_dir = "… / sass" images_dir = "… / img" javascripts_dir = "… / js" # Puede seleccionar su estilo de salida preferido aquí (puede sobrescribirse con el comando línea): output_style =: compacto # Para habilitar rutas relativas a activos a través de las funciones de brújula. relative_assets = true # Para deshabilitar los comentarios de depuración que muestran la ubicación original de sus selectores. # line_comments = false
Nada especial aquí, esto solo significa que Compass buscará nuestro .scss archivos dentro de la hablar con descaro a Carpeta y coloque las hojas de estilo compiladas dentro de la carpeta raíz de nuestro tema, si desea saber más acerca de cómo configurar el archivo de configuración, consulte la documentación oficial..
Revisemos nuestra hablar con descaro a Carpeta de nuevo y ver que podemos hacer ahora..
Ahora podemos separar los estilos relacionados en sus propios archivos dentro de una subcarpeta llamada parciales y tener una sola estilo.scss archivo donde podemos poner los principales estilos que deberían verse así:
// Compass library @import "compass"; // Variables globales @import "partials / base.scss"; // Normalizar elementos @import "partials / normalize.scss"; / * == | == Estilos primarios ========================================= ============ Autor: ==================================== ====================================== * / // Los estilos principales van aquí / * == ================================================== =================== * / // Estilos CSS específicos de WP @import "partials / wp.scss"; // Clases de ayuda no semánticas @import "partials / helpers.scss";
Observe cómo prefijamos los archivos parciales con un guión bajo, esto le dice a la brújula que los ignore ya que solo queremos compilar la hoja de estilo principal. Ahora si navegamos a nuestro src carpeta en nuestra terminal y ejecutar compás compás va a crear un nuevo style.css archivo dentro de nuestro hablar con descaro a Carpeta con todos nuestros parciales concatenados en una sola hoja de estilo. Sin embargo, nos faltan las líneas de encabezado de comentario requeridas para los temas de WordPress, a la derecha?
Necesitará tener instalado Grunt, que al mismo tiempo requiere Node.js, pero asumiré que ya lo tiene. Por defecto, Grunt solo admite la funcionalidad de los archivos JavaScript, pero afortunadamente hay extensiones de terceros como grunt-css y grunt-compass que pueden ocuparse del resto de los archivos que necesitamos..
Así que vamos a navegar a nuestra src Carpeta en nuestro terminal y ejecute los siguientes comandos:
npm install grunt-css npm install grunt-compass
Esto instalará ambas extensiones localmente para que podamos importarlas / cargarlas con Grunt.
Ahora vamos a organizar nuestra js carpeta:
He creado una subcarpeta llamada libs donde podamos colocar cualquier script de terceros que necesitemos, también creé una script.js archivo donde codificaremos nuestras funciones personalizadas que se ejecutan generalmente cuando el DOM está listo.
Ahora para configurar las opciones de configuración de Grunt necesitaremos crear un nuevo archivo llamado grunt.js, así que vamos a hacer uno en nuestro src Carpeta con el siguiente contenido:
/ * módulo global: falso * / module.exports = function (grunt) // Configuración del proyecto. grunt.initConfig (meta: version: '0.1.0', banner: '/ *! PROJECT_NAME - v<%= meta.version %> - '+'<%= grunt.template.today("yyyy-mm-dd") %>\ n '+' * http://www.yoursite.com/\n '+' * Copyright (c) <%= grunt.template.today("yyyy") %> '+' Su empresa; Licencia MIT * / ', wpblock:' / *! \ n '+' Nombre del tema: Probar tema \ n '+' Tema URI: http://www.yoursite.com \ n '+' Descripción: Probar tema \ n '+' Autor: Su nombre \ n '+' Autor URI: http://www.yoursite.com \ n '+' Versión: 1.0 \ n '+' * / ', pelusa: archivos: [' grunt.js ','… /js/script.js '], concat: dist: src: ['',' ... /js/libs/*.js ',' ... /js/script.js '], dest:'… /js/script.min.js ', min: dist: src: [ '',''], dest:'', cssmin: dist: src: ['',' ... /sass/style.css '], dest:'… /style.css ', watch: files: ['',' ... /sass/*.scss '], task:' default ', jshint: options: curly: true, eqeqeq: true, immed: true, latedef: true, newcap: true, noarg: true, sub: true, undef: true, boss: true, eqnull: true, jquery: true, devel: true, browser: true, globals: , uglify: , compass: dist: forcecompile: true ); // Tarea por defecto. grunt.registerTask ('predeterminado', 'lint concat min compass cssmin'); // Compass task grunt.loadNpmTasks ('grunt-compass'); // Tareas CSS grunt.loadNpmTasks ('grunt-css'); ; ¡Guauu! Eso es mucho más complejo que nuestro archivo Compass, pero haré todo lo posible para intentar explicarlo. De nuevo, lea la documentación oficial de Grunt para saber más..
Lo que hace el archivo de configuración es decirle a Grunt que haga lo siguiente, en orden, cada
el tiempo que ejecutamos el gruñido comando desde nuestra terminal dentro de nuestra src carpeta:
Aún mejor, podemos correr reloj gruñido en nuestra terminal y vigilará los cambios
en nuestros archivos JavaScript y Sass y ejecuta las tareas automáticamente. Dulce eh?
Por cierto, Grunt no solo minimiza los archivos javascript eliminando espacios en blanco y nuevas líneas, sino que también optimiza sus scripts al renombrar variables como var myLongVariable = true; a var a = verdadero; más otros tipos de magia para hacerlos aún más pequeños! Debo admitir que era un poco escéptico acerca de esta función, pero en realidad es muy inteligente asegurarse de que no rompa tu código (hasta ahora no ha roto el mío).
brújula no se puede minimizar (al menos sin eliminar comentarios) y gruñido-css no puedo leer .scss archivos, es por eso que necesitamos compilar archivos Sass primero en un solo .css expediente.
Podríamos usar lo que tenemos hasta ahora y comenzar a codificar nuestro tema, pero ¿por qué detenernos ahora cuando todavía tenemos plantillas e imágenes sucias? Para manejar esto, he modificado el script de compilación ant que solía venir incluido con HTML5 Boilerplate. Esta depende de hormiga así que asegúrate de tenerlo instalado.
Este es realmente largo y no quiero aburrirlos mostrando el archivo completo de configuración de configuración aquí, pero en resumen, cada vez que esté listo para implementar su tema en el mundo real, solo tenemos que navegar a nuestro construir carpeta en nuestra terminal y ejecutar construcción de hormigas, esta voluntad:
Así que al final terminaremos con una nueva carpeta en nuestra carpeta base de tema llamada
publicar que se verá así:
Todos los archivos de temas listos para su implementación.
Así que ahí lo tienen, ese es básicamente el flujo de trabajo de desarrollo de mi tema. Tenga en cuenta que aunque parece muy largo, solo tiene que configurarlo una vez y obtener los archivos de tema base cada vez que los necesite, por lo que al final solo tendrá que:
gruñido o reloj gruñido en tu terminalEstoy seguro de que hay maneras de mejorarlo, así que avíseme en los comentarios a continuación si ustedes encuentran algo interesante para mejorar esto aún más..
Actualizar: Hemos hecho un par de correcciones menores a los fragmentos de código anteriores. Además, ahora hay un enlace de descarga al repositorio de GitHub para este tutorial, y puedes encontrar los archivos de compilación completos, etc..
