Как добавить Semantic-UI в Phoenix
Как добавить Semantic-UI в Phoenix?
Semantic-UI устанавливается в папку и обновляется с помощью NPM, а фактические файлы CSS и Javascript создаются с использованием GULP. Где находится папка с полной установкой?
Может ли оно автоматически обновляться через Mix, как и остальные зависимости?
Должны ли сгенерированные css и javascript быть помещены в project/web/static/css (или /js) или /vendor?
Как настроить конфигурацию Gulp/Sematic-UI для автоматического размещения файлов в нужных местах?
Опять же, может ли Mix запускать сборку Gulp/Semantic-UI автоматически?
3 ответа
Где находится папка с полной установкой?
На самом деле вам просто нужно 2 файла: semantic.js и semantic.css. если ты сделал npm install --save semantic-ui вы должны найти их в ./semantic/dist/
Итак, где эти 2 файла должны быть размещены? Это зависит от... ты поздний завтрак или веб-пакет? Для приложения phoenix важно найти статические файлы (css, js, font, img, ...) в папке./priv/static, как вы можете видеть в endpoint.ex Plug.Static, Phoenix не знает каталог, куда вы поместили эти файлы перед запуском brunch, webpack или / и gulp.
Может ли он автоматически обновляться через Mix ...
Да, добавить скрипт в package.json, изменить наблюдателей в config/dev.exs
Должны ли сгенерированные css и javascript быть помещены в project/web/static/css (или /js) или /vendor?
Тот же ответ, ты поздний завтрак или веб-пакет? Для приложения phoenix важно найти статические файлы (css, js, font, img, ...) в папке ./priv/static, как вы можете видеть в endpoint.ex Plug.Static, Phoenix не знает каталог, куда вы поместили эти файлы перед запуском brunch, webpack или / и gulp.
Как настроить конфигурацию Gulp/Sematic-UI для автоматического размещения файлов в нужных местах?
Проверьте файл ./semantic.json, чтобы настроить вывод команды gulp build.
может ли Mix запускать сборку Gulp/Semantic-UI автоматически?
Да, добавить скрипт в package.json, изменить наблюдателей в config/dev.exs
Это не легко, и я рекомендую вам сначала начать использовать npm semantic-ui-css и когда ваша сборка работает хорошо, чтобы переключиться на npm semantic-ui
Довольно просто интегрировать дистрибутив Semantic UI LESS only с приложением Phoenix с небольшим фокусом. Я бы посоветовал вам использовать Webpack вместо brunch/gulp, поскольку он довольно популярен среди множества плагинов и прост в настройке.
Перед началом процедуры ожидается, что приложение Phoenix установлено со стандартным инструментом сборки Brunch и работает.
Интегрирование Webpack
Пожалуйста, следуйте моему детальному руководству по интеграции Semantic UI и Webpack с подробной пошаговой процедурой. Этот ответ является ссылкой на эту статью. Ссылка: Как интегрировать приложение Phoenix с семантическим пользовательским интерфейсом и Webpack
Интеграция семантического интерфейса
Перед установкой Semantic UI нам нужно установить некоторые конфигурации. Мы создадим новый файл семантического исправления.
vim web/static/lib/semantic-fix.js
Вставьте следующее содержимое в файл semantic-fix.js, который мы только что создали. Этот файл будет заботиться о размещении всех ресурсов Semantic UI для использования его с нашим приложением
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
var fs = require('fs');
// relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"@import '../../src/semantic/theme.config';\n",
'utf8'
);
// fix well known bug with default distribution
fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/flat/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/material/globals/site.variables');
function fixFontPath(filename) {
var content = fs.readFileSync(filename, 'utf8');
var newContent = content.replace(
"@fontPath : '../../themes/",
"@fontPath : '../../../themes/"
);
fs.writeFileSync(filename, newContent, 'utf8');
}
Мы собираемся сделать собственный файл theme.config для Semantic UI. Следовательно, измените местоположение пути в semantic-fix.js файл следующим образом:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Old default code
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"@import '../../src/semantic/theme.config';\n",
'utf8'
);
Замените его следующим кодом:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"@import '../../web/static/css/theme.config';\n",
'utf8'
);
Недавно я написал подробное пошаговое руководство по интеграции инфраструктуры семантического пользовательского интерфейса с приложением Phoenix на основе Elixir и Webpack.
Добавить semantic-fix.js нужно запускать на каждом postinstall обратный вызов при установке пакетов npm. Следовательно, мы разместим его следующим образом под package.jsonscripts раздел.
// ----------------------------------------------------
// File: package.json
// ----------------------------------------------------
{
...
"scripts": {
...
"postinstall": "node semantic-fix.js",
...
}
...
}
Теперь пришло время установить пакет Semantic UI LESS. После установки semantic-fix.js файл будет вызываться из postinstall скрипт.
npm install --save semantic-ui-less && node semantic-fix.js
После того, как Semantic UI завершит установку, нам нужно скопировать node_modules/semantic-ui-less/theme.config.example в web/static/css/theme.config,
cp node_modules/semantic-ui-less/theme.config.example web/static/css/theme.config
Заменить существующие пути на наши пути
/* Path to site override folder */
@siteFolder : '../../web/static/css/site';
&
// @import "theme.less";
@import "~semantic-ui-less/theme.less";
Копировать семантический файл инициализации LESS node_modules/semantic-ui-less/semantic.less в web/static/css, Этот файл импортирует разные стили компонентов.
Измените расположение для операторов импорта этого файла из @import "definitions/...."' в @import "~semantic-ui-less/definitions/...."
Точно так же нам нужно добавить semantic.js подать в web/static/js папка для импорта всех компонентов JavaScript следующим образом:
//---------------------------------------------
// File: web/statis/js/semantic.js
//---------------------------------------------
import 'semantic-ui-less/definitions/globals/site';
import 'semantic-ui-less/definitions/behaviors/api';
import 'semantic-ui-less/definitions/behaviors/colorize';
import 'semantic-ui-less/definitions/behaviors/form';
import 'semantic-ui-less/definitions/behaviors/state';
import 'semantic-ui-less/definitions/behaviors/visibility';
import 'semantic-ui-less/definitions/behaviors/visit';
import 'semantic-ui-less/definitions/modules/accordion';
import 'semantic-ui-less/definitions/modules/checkbox';
import 'semantic-ui-less/definitions/modules/dimmer';
import 'semantic-ui-less/definitions/modules/dropdown';
import 'semantic-ui-less/definitions/modules/embed';
import 'semantic-ui-less/definitions/modules/modal';
import 'semantic-ui-leKaabilss/definitions/modules/nag';
import 'semantic-ui-less/definitions/modules/popup';
import 'semantic-ui-less/definitions/modules/progress';
import 'semantic-ui-less/definitions/modules/rating';
import 'semantic-ui-less/definitions/modules/search';
import 'semantic-ui-less/definitions/modules/shape';
import 'semantic-ui-less/definitions/modules/sidebar';
import 'semantic-ui-less/definitions/modules/sticky';
import 'semantic-ui-less/definitions/modules/tab';
import 'semantic-ui-less/definitions/modules/transition';
import 'semantic-ui-less/definitions/modules/video';
web/static/js/app.js это входной файл в нашем конфиге веб-пакета Следовательно, нам нужно импортировать все файлы, включая файлы Semantic UI, в app.js. Добавьте следующие строки в конце app.js файл
//---------------------------------------------
// File: web/statis/js/app.js
//---------------------------------------------
...
...
import "./semantic.js";
import '../css/semantic.less';
Интеграция завершена и готова к запуску. Semantic UI теперь полностью интегрирован с webpack, и пришло время попробовать. Запустите сервер Phoenix mix phoenix.server из корня проекта. Это должно вызвать webpack для компиляции всех файлов, включая semantic-ui - mix phoenix.server
Эта процедура более подробно описана в моей статье (ссылка сверху), на которую можно ссылаться, если есть путаница.
Надеюсь, это поможет.
Довольно легко интегрировать Semantic UI LESS only Distribution с приложением Phoenix с небольшой хитростью. Я бы посоветовал вам использовать Webpack вместо brunch/gulp, так как он относительно популярен благодаря большому количеству плагинов и прост в настройке.
Прежде чем приступить к процедуре, ожидается, что приложение Phoenix установлено с инструментом сборки Brunch по умолчанию и работает.
Интеграция веб-пакета
Пожалуйста, следуйте моему подробному руководству по интеграции Semantic UI и Webpack с подробной пошаговой процедурой. Этот ответ относится к этой статье. Ссылка: Как интегрировать ваше приложение Phoenix с семантическим пользовательским интерфейсом и Webpack
Интеграция семантического пользовательского интерфейса
Прежде чем мы установим Semantic UI, нам нужно выполнить некоторые настройки. Мы создадим новый файл семантического исправления.
vim web/static/lib/semantic-fix.js
Вставьте следующее содержимое в только что созданный файл semantic-fix.js. Этот файл позаботится о размещении всех активов семантического пользовательского интерфейса для его использования с нашим приложением.
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
var fs = require('fs');
// relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"@import '../../src/semantic/theme.config';\n",
'utf8'
);
// fix well known bug with default distribution
fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/flat/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/material/globals/site.variables');
function fixFontPath(filename) {
var content = fs.readFileSync(filename, 'utf8');
var newContent = content.replace(
"@fontPath : '../../themes/",
"@fontPath : '../../../themes/"
);
fs.writeFileSync(filename, newContent, 'utf8');
}
Мы собираемся создать собственный файл theme.config для семантического пользовательского интерфейса. Следовательно, измените путь в файле следующим образом:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Old default code
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"@import '../../src/semantic/theme.config';\n",
'utf8'
);
Замените его следующим кодом:
// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------
// Relocate default config
fs.writeFileSync(
'node_modules/semantic-ui-less/theme.config',
"@import '../../web/static/css/theme.config';\n",
'utf8'
);
Недавно я написал подробное пошаговое руководство по интеграции фреймворка Semantic UI с приложением Phoenix на основе Elixir и Webpack.
Добавьте, что semantic-fix.js должен запускаться при каждом обратном вызове при установке пакетов npm. Поэтому мы поместим его следующим образом под
package.json
scriptsраздел.
// ----------------------------------------------------
// File: package.json
// ----------------------------------------------------
{
...
"scripts": {
...
"postinstall": "node semantic-fix.js",
...
}
...
}
Теперь пришло время установить пакет Semantic UI LESS. После установки
semantic-fix.jsфайл будет вызываться из
postinstallсценарий.
npm install --save semantic-ui-less && node semantic-fix.js
После завершения установки Semantic UI нам нужно скопировать
node_modules/semantic-ui-less/theme.config.exampleк
web/static/css/theme.config.
cp node_modules/semantic-ui-less/theme.config.example web/static/css/theme.config
Переопределить существующие пути на наши пути
/* Path to site override folder */
@siteFolder : '../../web/static/css/site';
&
// @import "theme.less";
@import "~semantic-ui-less/theme.less";
Скопировать семантический файл инициализации LESS
node_modules/semantic-ui-less/semantic.lessк
web/static/css. Этот файл импортирует различные стили компонентов.
Измените расположение операторов импорта этого файла с
@import "definitions/...."'к
@import "~semantic-ui-less/definitions/...."
Точно так же нам нужно добавить
semantic.jsфайл в
web/static/jsпапку для импорта всех компонентов JavaScript следующим образом:
//---------------------------------------------
// File: web/statis/js/semantic.js
//---------------------------------------------
import 'semantic-ui-less/definitions/globals/site';
import 'semantic-ui-less/definitions/behaviors/api';
import 'semantic-ui-less/definitions/behaviors/colorize';
import 'semantic-ui-less/definitions/behaviors/form';
import 'semantic-ui-less/definitions/behaviors/state';
import 'semantic-ui-less/definitions/behaviors/visibility';
import 'semantic-ui-less/definitions/behaviors/visit';
import 'semantic-ui-less/definitions/modules/accordion';
import 'semantic-ui-less/definitions/modules/checkbox';
import 'semantic-ui-less/definitions/modules/dimmer';
import 'semantic-ui-less/definitions/modules/dropdown';
import 'semantic-ui-less/definitions/modules/embed';
import 'semantic-ui-less/definitions/modules/modal';
import 'semantic-ui-leKaabilss/definitions/modules/nag';
import 'semantic-ui-less/definitions/modules/popup';
import 'semantic-ui-less/definitions/modules/progress';
import 'semantic-ui-less/definitions/modules/rating';
import 'semantic-ui-less/definitions/modules/search';
import 'semantic-ui-less/definitions/modules/shape';
import 'semantic-ui-less/definitions/modules/sidebar';
import 'semantic-ui-less/definitions/modules/sticky';
import 'semantic-ui-less/definitions/modules/tab';
import 'semantic-ui-less/definitions/modules/transition';
import 'semantic-ui-less/definitions/modules/video';
web/static/js/app.jsэто входной файл в нашей конфигурации веб-пакета. Следовательно, нам нужно импортировать все файлы, включая файлы Semantic UI, в app.js. Добавьте следующие строки в конце
app.jsфайл
//---------------------------------------------
// File: web/statis/js/app.js
//---------------------------------------------
...
...
import "./semantic.js";
import '../css/semantic.less';
Теперь интеграция завершена и готова к запуску. Semantic UI теперь полностью интегрирован с webpack, и пришло время попробовать его. Запустите сервер Phoenix из корня проекта. Это должно вызвать веб-пакет для компиляции всех файлов, включая semantic-ui -
mix phoenix.server
Эта процедура более подробно описана в моей статье (ссылка вверху), на которую можно сослаться, если возникнет путаница.
Надеюсь, это поможет.