build - sketch - Usando SemanticUI para mi proyecto Laravel

semantic ui tutorial

Question

Tengo algunas dificultades para integrar SemanticUI en mi proyecto Laravel. Estos son dos marcos hermosos, lamentablemente no hay nada que encontrar sobre este tema.

Primero instalé la semántica usando NPM: npm install semantic-ui . Esto funciona bien, pero el problema es que muchos otros paquetes npm también están instalados. Además, barcos semánticos con muchas tareas de trago que no necesito. Laravel se envía con Elixer para definir las tareas básicas de Gulp, que sí quiero usar.

Fui al repositorio semántico de github y descargué la carpeta /src . Copié la carpeta en mi proyecto de Laravel: /resources/assets/semantic/ . Luego, dentro de los archivos app.less semántica:

/**
* Import the SemanticUI source
*/
@import ''../semantic/src/semantic'';

Entonces, el siguiente paso fue dejar que Elixer hiciera la compilación y la copia en la carpeta /public :

elixir(function(mix) {
// Semantic LESS
mix.less([
''app.less''
], ''public/vendor/semantic/semantic.css'');
// Semantic JS
mix.scriptsIn([
''resources/assets/semantic/src/definitions/''
], ''public/vendor/semantic/semantic.js''); // js: resources/assets/semantic/src/definitions/{folder}/{script}.js
// Semantic Themes
mix.copy(''resources/assets/semantic/src/themes'', ''public/vendor/semantic/themes'');
});

Esto funciona excelente Lo único que me preocupa es que actualizar la semántica debe hacerse de la mano. Si tienes algún consejo para mí o una solicitud alternativa, me encantaría escuchar eso. Así es como se ve mi carpeta public/vendor después de ejecutar gulp :

Ahora el otro problema al que me estoy enfrentando es que cuando echo un vistazo al CSS minimizado, veo que las rutas de los activos son incorrectas:

src: url("../../themes/default/assets/fonts/icons.eot");
// and more wrong paths...

Debería buscar en themes/default/assets/fonts/icons.eot . ¿Algunas ideas?

Gracias por adelantado.

Answer 1

Cuando me preguntaron qué tipo de instalación me gustaría tener, elegí Express (Set components and output folder) .

Luego, elegí [?] Where should we put Semantic UI inside your project? resources/assets/semantic/ [?] Where should we put Semantic UI inside your project? resources/assets/semantic/ .

Elija sus opciones para otras preguntas.

Luego, escriba ../../../public/semantic cuando se le solicite [?] Where should we output Semantic UI?