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

Привет! Этот контент доступен только подписчикам на патреоне с доступом
к стартовому шаблону "Чертоги Фрилансера" версия №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 страница открывалась сразу в Хроме, а не в Опере?

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