Установка и запуск шаблона. Подготовка к работе

Категорії: Документація «Чертоги Фрілансера» v3.0.0

Привет! Этот контент доступен только подписчикам на патреоне с доступом
к стартовому шаблону "Чертоги Фрилансера" версия №3
Буду рад подписке на патреон:
Подписаться на патреон
Уже есть необходимый доступ на патреоне? Обнови страницу для получения доступа.
  • Svitlana
    Автор: Svitlana Добавлено 28 января, 2022 в 14:15

    На странице в разных местах упоминается такая информация:
    «Режим разработчика. Команда запуска npm run dev» и
    «запустим наш шаблон в режиме разработчика, для этого в терминале выполняем команду npm-run-dev».
    «npm-run-dev» — приводит к ошибке.
    Зачем в тексте во втором случае команда написана npm-run-dev, а не npm run dev?

  • Иван
    Автор: Иван Добавлено 4 февраля, 2022 в 02:20

    В общем история такая.

    Работаю я над проектом, 32 страницы. Все изображения красивенько разложены по папкам и подпапкам. В какой-то момент доделываю страницу с невероятно огромным количеством картинок и svg спрайтов, запускаю npm run build и эта штука вешается наглухо. На данный момент висит уже больше часа. При том все задачи завершены кроме images.
    Во второй версии шаблона у меня была проблема с webp, но там выдавал ошибку. Здесь же не знаю на что грешить — либо на свою печку, которая не первой свежести, но и не убогая древность, либо шаблон вешается на webp или на svg.

    В dist папка с иконками даже не создалась. Это наталкивает на размышления о том, что до них шаблон ещё не добрался и проблема в webp.

    При этом всём я могу зайти в dist, запустить любую страницу и всё будет работать как задумано и все изображения отображаются корректно, кроме иконок ибо их в dist не существует.

    • Иван
      Автор: Иван Добавлено 4 февраля, 2022 в 02:42

      А вообще Женя спасибо тебе огромное за всё, что ты делаешь! Нет ничего полезнее опыта, который ты передаёшь. Каждый совет по делу и в точку! Ни один человек не заряжал меня на движение вперёд даже при личном общении так, как это делаешь ты через монитор! Спасибо тебе человечище!

  • Евгений
    Автор: Евгений Добавлено 4 февраля, 2022 в 02:39

    Є одна проблема, яка дуже бісить( Після встановлення Path Autocomplete пропозиції шляхів до файлів дублюються. Ніяк не можу найти найстройку, яка це вимикає. Жека, може ти знайєш як це вимкнути?)

  • Nazar_levchuk
    Автор: Nazar_levchuk Добавлено 4 февраля, 2022 в 17:49

    Не могу открыть документацию, хотя подписка есть шаблон скачан, но меня постоянно кидает из одной страницы на другую в чем проблема?

  • Денис
    Автор: Денис Добавлено 4 февраля, 2022 в 22:02

    Добрый вечер! Почему то нет доступа к документации

  • emblox
    Автор: emblox Добавлено 18 марта, 2022 в 18:10

    Скажите, пожалуйста, нужно ли прописывать npm run dev при каждом запуске в редакторe кода? 😊

  • Ken_Kan
    Автор: Ken_Kan Добавлено 22 марта, 2022 в 20:17

    круто

  • Serhiy
    Автор: Serhiy Добавлено 24 марта, 2022 в 15:59

    Вітання всім. Щось в мене ця штука не працює, видає тільки помилки.
    В dist крім папки fonts нічого не створює, самостійно створював файли їх видаляє.
    Все що видає ЧФ:
    src\scss\style.scss 38:15 root stylesheet
    at Object. (F:\WebSites\luxtrader\node_modules\string-replace-loader\index.js??ruleSet[1].rules[0].use[1]!F:\WebSites\luxtrader\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[0].use[2]!F:\WebSites\luxtrader\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[0].use[3]!F:\WebSites\luxtrader\src\scss\style.scss:1:7)
    at F:\WebSites\luxtrader\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:441:11
    at Hook.eval [as call] (eval at create (F:\WebSites\luxtrader\node_modules\tapable\lib\HookCodeFactory.js:19:10), :7:1)
    at Hook.CALL_DELEGATE [as _call] (F:\WebSites\luxtrader\node_modules\tapable\lib\Hook.js:14:14)
    at F:\WebSites\luxtrader\node_modules\webpack\lib\Compilation.js:5051:39
    at tryRunOrWebpackError (F:\WebSites\luxtrader\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (F:\WebSites\luxtrader\node_modules\webpack\lib\Compilation.js:5049:12)
    at __webpack_require__ (F:\WebSites\luxtrader\node_modules\webpack\lib\Compilation.js:5006:18)
    at F:\WebSites\luxtrader\node_modules\webpack\lib\Compilation.js:5077:20
    at symbolIterator (F:\WebSites\luxtrader\node_modules\neo-async\async.js:3485:9)

    Generated code for F:\WebSites\luxtrader\node_modules\string-replace-loader\index.js??ruleSet[1].rules[0].use[1]!F:\WebSites\luxtrader\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[0].use[2]!F:\WebSites\luxtrader\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[0].use[3]!F:\WebSites\luxtrader\src\scss\style.scss
    1 | throw new Error(«Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: expected \»{\».\n ╷\n38 │ $minWidth: 320;\r\n │ ^\n ╵\n src\\scss\\style.scss 38:15 root stylesheet»);
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: expected «{«.
    ╷
    38 │ $minWidth: 320;
    │ ^
    ╵
    src\scss\style.scss 38:15 root stylesheet
    [14:47:04] assets by status 5.48 KiB [cached] 2 assets

    ERROR in ./src/scss/style.scss
    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
    HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: expected «{«.
    ╷
    38 │ $minWidth: 320;
    │ ^
    ╵
    src\scss\style.scss 38:15 root stylesheet
    at tryRunOrWebpackError (F:\WebSites\luxtrader\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ (F:\WebSites\luxtrader\node_modules\webpack\lib\Compilation.js:5049:12)
    at __webpack_require__ (F:\WebSites\luxtrader\node_modules\webpack\lib\Compilation.js:5006:18)
    at F:\WebSites\luxtrader\node_modules\webpack\lib\Compilation.js:5077:20
    at symbolIterator (F:\WebSites\luxtrader\node_modules\neo-async\async.js:3485:9)
    at done (F:\WebSites\luxtrader\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (F:\WebSites\luxtrader\node_modules\tapable\lib\HookCodeFactory.js:33:10), :15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (F:\WebSites\luxtrader\node_modules\tapable\lib\Hook.js:18:14)
    at F:\WebSites\luxtrader\node_modules\webpack\lib\Compilation.js:4984:43
    at symbolIterator (F:\WebSites\luxtrader\node_modules\neo-async\async.js:3482:9)
    — inner error —
    Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: expected «{«.
    ╷
    38 │ $minWidth: 320;
    │ ^
    ╵
    src\scss\style.scss 38:15 root stylesheet
    at Object. (F:\WebSites\luxtrader\node_modules\string-replace-loader\index.js??ruleSet[1].rules[0].use[1]!F:\WebSites\luxtrader\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[0].use[2]!F:\WebSites\luxtrader\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[0].use[3]!F:\WebSites\luxtrader\src\scss\style.scss:1:7)
    at F:\WebSites\luxtrader\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:441:11
    at Hook.eval [as call] (eval at create (F:\WebSites\luxtrader\node_modules\tapable\lib\HookCodeFactory.js:19:10), :7:1)
    at Hook.CALL_DELEGATE [as _call] (F:\WebSites\luxtrader\node_modules\tapable\lib\Hook.js:14:14)
    at F:\WebSites\luxtrader\node_modules\webpack\lib\Compilation.js:5051:39
    at tryRunOrWebpackError (F:\WebSites\luxtrader\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (F:\WebSites\luxtrader\node_modules\webpack\lib\Compilation.js:5049:12)
    at __webpack_require__ (F:\WebSites\luxtrader\node_modules\webpack\lib\Compilation.js:5006:18)
    at F:\WebSites\luxtrader\node_modules\webpack\lib\Compilation.js:5077:20
    at symbolIterator (F:\WebSites\luxtrader\node_modules\neo-async\async.js:3485:9)

    Generated code for F:\WebSites\luxtrader\node_modules\string-replace-loader\index.js??ruleSet[1].rules[0].use[1]!F:\WebSites\luxtrader\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[0].use[2]!F:\WebSites\luxtrader\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[0].use[3]!F:\WebSites\luxtrader\src\scss\style.scss
    1 | throw new Error(«Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: expected \»{\».\n ╷\n38 │ $minWidth: 320;\r\n │ ^\n ╵\n src\\scss\\style.scss 38:15 root stylesheet»);
    @ ./src/js/app.js 18:0-28

    ERROR in ./src/scss/style.scss (./src/scss/style.scss.webpack[javascript/auto]!=!./node_modules/string-replace-loader/index.js??ruleSet[1].rules[0].use[1]!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/scss/style.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: expected «{«.
    ╷
    38 │ $minWidth: 320;
    │ ^
    ╵
    src\scss\style.scss 38:15 root stylesheet
    @ ./src/scss/style.scss
    @ ./src/js/app.js 18:0-28

    webpack 5.70.0 compiled with 2 errors
    [14:47:04] Finished ‘js’ after 372 ms
    [14:47:04] Starting ‘html’…
    [14:47:04] Starting ‘css’…
    [14:47:04] Starting ‘images’…
    [14:47:04] Starting ‘gitignore’…
    [14:47:04] Finished ‘html’ after 17 ms
    [14:47:04] ‘css’ errored after 18 ms
    [14:47:04] Error: File not found with singular glob: F:/WebSites/luxtrader/dist/css/style.css (if this was purposeful, use `allowEmpty` option)
    at Glob. (F:\WebSites\luxtrader\node_modules\glob-stream\readable.js:84:17)
    at Object.onceWrapper (node:events:646:26)
    at Glob.emit (node:events:526:28)
    at Glob.emit (node:domain:475:12)
    at Glob._finish (F:\WebSites\luxtrader\node_modules\glob\glob.js:194:8)
    at done (F:\WebSites\luxtrader\node_modules\glob\glob.js:179:14)
    at Glob._processSimple2 (F:\WebSites\luxtrader\node_modules\glob\glob.js:685:12)
    at F:\WebSites\luxtrader\node_modules\glob\glob.js:673:10
    at Glob._stat2 (F:\WebSites\luxtrader\node_modules\glob\glob.js:769:12)
    at lstatcb_ (F:\WebSites\luxtrader\node_modules\glob\glob.js:761:12)
    [14:47:04] ‘build’ errored after 12 s
    Женя скажіть будь-ласка що ліпше використовувати Gulp чи ЧФ

  • Арсен
    Автор: Арсен Добавлено 14 апреля, 2022 в 21:57

    а чому в мене не відображається те що я написав у _header.htm

  • Evgeniy
    Автор: Evgeniy Добавлено 16 апреля, 2022 в 12:26

    А при какой команде будет обновляться браузер при сохранении?

    • Фрилансер по жизни
      Автор: Фрилансер по жизни Добавлено 27 апреля, 2022 в 12:04

      в режиме разработчика. все описано подробно документации.
      index.html не обновляется

  • Дмитрий
    Автор: Дмитрий Добавлено 24 апреля, 2022 в 00:19

    Здравствуйте, подскажите если работаешь в phpstorm как там прописать псевдонимы path autocomplete?

  • Yurii
    Автор: Yurii Добавлено 25 апреля, 2022 в 17:25

    Привет, подскажи, почему папка dist может не появляться?, делаю пошагово по видео http://joxi.ru/V2VyjeXCBn8Gbm

  • Artem
    Автор: Artem Добавлено 10 мая, 2022 в 12:56

    Здравствуйте, как подключить стили в этом шаблоне?

  • DronforD
    Автор: DronforD Добавлено 11 мая, 2022 в 10:32

    Может подскажете как сделать так, что бы при запуске npm run dev страница открывалась сразу в Хроме, а не в Опере?

  • Oleksandr
    Автор: Oleksandr Добавлено 31 июля, 2022 в 17:59

    Підкажіть будь ласка..)? Я використовую Gulp на базі вордпреса. Версію Build я підлаштував. Мені не вдається запустити dev збірку — cервер (webpack-dev-server) щоб він підвантажував index.php з папки проекту..? Може підкажете що саме змінити в файлі «webpack.dev.js» щоб в мене сервер запускався з локалки…?) (бо вже там перепробував в змінній config — output:, devServer: — змінювати значення, і по інтернету шукав рішення, не вдається це зробити) дякую)

  • Назар
    Автор: Назар Добавлено 15 августа, 2022 в 21:51

    Привіт, зіткнувся з проблемою: при запуску «npm run dev» сервер не загружається, вибиває помилка: «bad gateway» та просто чорний екран, нічого не міняв та робив все по інструкції, проте, чомусь в мене не прцює, в терміналі помилок немає, все як на твоїх скрінах, не підкажеш в чому може бути проблема?

  • Bekmirzo
    Автор: Bekmirzo Добавлено 17 августа, 2022 в 07:51

    Привет
    imagemin сжимает изображения, но настройки сжатия изображений не работают, что 1 что 7, качество выгружаемого изображения не меняется.
    Только для webp как то могу поменять уровень сжатия

    • Фрілансер по життю
      Автор: Фрілансер по життю Добавлено 19 сентября, 2022 в 08:43

      Мабуть щось змінилось у плагіні.
      Всерівно тобі лише webp і потрібен

  • Анна
    Автор: Анна Добавлено 8 сентября, 2022 в 12:36

    Добрый день! Все этапы установки шаблона прошли успешно, но при запуске npm run dev открывается пустая страница в браузере с надписью bad gateway. Не подскажете как решить проблему?

  • Misha
    Автор: Misha Добавлено 12 сентября, 2022 в 22:34

    Привіт, на моменті налаштувань аліасів для шляхів файлів, можливо простіше просто створити ярлик на потрібну папку?
    Тобто у папці с файлами Html створити ярлик у папку img і в коді файлів писати одразу src=»img/main.jpg» і не потрібно ніяких замін , чи в цьому випадку є якісь нюанси?

    • Фрілансер по життю
      Автор: Фрілансер по життю Добавлено 19 сентября, 2022 в 08:37

      Не зовсім зрозумів що мається на увазі, можна приклад?

  • ARTSIOM
    Автор: ARTSIOM Добавлено 15 сентября, 2022 в 22:28

    Здравствуйте , такая есть проблема с загрузкой на хостинг , нету стилей и сплошные артефакты

Лишити коментар