farcer / start-template-gulp-4-pug-sass

Стартовый шаблон автора канала FrontCoder

Используется связка Gulp + Pug + SCSS + BrowserSync

Установка

Склонировать репозиторий и выполнить либо npm install

Каналы связи

• youtube канал
• чат в телеграм

start-template-gulp-4-pug-sass's Issues

Компиляция pug

Нашел решение проблемы долгой компиляции pug
До этого у меня pug (лично на моем проекте) компилился где то 5-8 секунд. После некоторых доработок компиляция стала примерно 400-700ms

Что нужно сделать:
в файле pug.js в строку "return $.gulp.src('./dev/pug/*.pug'" - дописать параметр
" {since: $.gulp.lastRun('dev')}"

P.S "dev" - это наша папка с робочими файлами. важно написать именно ее а не "./dev/pug"

Scripts в package.json

Будет отлично, если вы запишите все варианты запуска сборки в scripts в файл package.json

Проблема с импортом стилей из node_nodules

Скачал slick-carousel: yarn add slick-carousel. В файле libs.scss делаю так: "@import "../../../../node_modules/slick-carousel/slick/slick.css" "; и получаю в консоли браузера:

"Refused to apply style from 'http://localhost:3000/node_modules/slick-carousel/slick/slick.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."

У вас такое было? Как ее решить?

Я так понял, что проблема с импортом возникает именно у css файлов, т.к. если импортировать scss, то все хорошо. Вопрос остается открытым: как импортировать css файл?

overrideBrowserslist without global browserslist in the package.json

В одной из недавних правок в опциях autoprefixer была заменена опция browsers: ['last 3 version'] на overrideBrowserslist: ['last 3 versions'], поскольку первая устарела в новой версии автопрефиксера.

Насколько разумно использовать overrideBrowserslist в самом автопрефиксере, если в package.json отсутствует то, что надо перезаписывать?

Не правильнее ли будет добавить в package.json опцию наподобие:

"browserslist": [
"last 2 version",
"> 1%",
"maintained node versions",
"not dead"
]

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

А если так надо, то например, при определенной сборке использовать overrideBrowserslist автопрефиксера...

gulp-changed (Destination directory)

в файле gulp/tasks/pug.js в строке:
.pipe(changed('dist', {extension: '.html'}))

Не верно указано имя папки для слежки.
В доках gulp-changed написано (Destination directory. Same as you put into gulp.dest().)
В вашем шаблоне папка названа build.
Следовательно идёт обработка всех файлов, включая не изменённые.

Откуда берётся JQuery в папке build

Не могу понять, откуда берётся JQuery 3.3.1 каждый раз при создании папки build? В каком таске это прописано? Хочу удалить, так как привык все сторонние библиотеки одним файлом вставлять.
Заранее благодарен

Предложение по внедрению Миксина для font-face

Источник:

https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6

Пояснение:

Мне кажется, использовать многочисленные переменные наподобие:

font-family: $Sans-semi-bold;
font-family: $Sans-bold;
font-family: $Sans-extra-bold;

не очень удобно, так как приходится постоянно вспоминать переменные и лазать по файлу, выясняя, что же у нас semi, extra и т.п.

На примере Вашего урока верстка Venev.ru:

получился бы файл fonts.scss:

@include font-face("Source Sans Pro", "../fonts/sourcesanspro-regular", 400, null, ttf woff2 woff);
@include font-face("Source Sans Pro", "../fonts/sourcesanspro-semibold", 600, null, ttf woff2 woff);
@include font-face("Source Sans Pro", "../fonts/sourcesanspro-bold", 700, null, ttf woff2 woff);
@include font-face("Source Sans Pro", "../fonts/sourcesanspro-black", 900, null, ttf woff2 woff);

что срендерится в:

@font-face {
  font-family: "Source Sans Pro";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sourcesanspro-regular.ttf") format("truetype"), url("../fonts/sourcesanspro-regular.woff2") format("woff2"), url("../fonts/sourcesanspro-regular.woff") format("woff"); }

@font-face {
  font-family: "Source Sans Pro";
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/sourcesanspro-semibold.ttf") format("truetype"), url("../fonts/sourcesanspro-semibold.woff2") format("woff2"), url("../fonts/sourcesanspro-semibold.woff") format("woff"); }

@font-face {
  font-family: "Source Sans Pro";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/sourcesanspro-bold.ttf") format("truetype"), url("../fonts/sourcesanspro-bold.woff2") format("woff2"), url("../fonts/sourcesanspro-bold.woff") format("woff"); }

@font-face {
  font-family: "Source Sans Pro";
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/sourcesanspro-black.ttf") format("truetype"), url("../fonts/sourcesanspro-black.woff2") format("woff2"), url("../fonts/sourcesanspro-black.woff") format("woff"); }

В результате, при использовании одного шрифта Source Sans Pro, как в вышеупомянутом уроке, не надо будет вообще вспоминать конкретную переменную, а указывать только начертание, что просто взять из ФШ, Zeplin или еще откуда-либо:

font-weight: 900;

Task never defined: html:dev

Привет, решил использовать твой классный шаблон, но столкнулся с ошибкой при выполнении таска - выдает ошибку rtionError [ERR_ASSERTION]: Task never defined: html:dev. Пример моего галпфайла - https://codepen.io/anon/pen/mQYjEv

gulp-changed (Destination directory)

.pipe(changed('dist', {extension: '.html'}))

Привет =)
Правильнее наверное все таки dev.

Typos in image.js

Line 8, 14, 34: "ouput" used instead of "output".

"Нелипкий" футер

Размышление верно при условии, что футер задумывался, как "липкий"

Текущая структура шаблона pug:

html
  body
    .wrapper
      header
        p Header content
      .content
        p Main content
      footer
        p Footer content

и стилей:

html {
  height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;  
}

.content {
  flex-grow: 1;
}

footer, header {
  flex-shrink: 0
}

В этом случае футер не прилипает к низу страницы, поскольку .wrapper получает height: auto (по контенту), так как высота родителя (в данном случае это body) не задана явно.

Но если установить:

body {
  height: 100%;
  ...
}

.wrapper {
  ...
  min-height: 100vh;
}

то .wrapper расширится до высоты страницы, сработает flex-grow у .content и футер прижмется к низу.

ПС. Протестировал, вылез баг IE10-11, из-за которого значение min-height флекс-контейнера игнорируется его детьми. Лечится добавлением к обертке (здесь body):

display: flex;
flex-direction: column;

разъяснение: https://github.com/philipwalton/flexbugs#flexbug-3

И напоследок: так же решает задачу установление height: 100% для всех - html, body и .wrapper, без остальных плясок с бубнами.

Placeholder Mixin doesn't work

Миксин Placeholder в файле /dev/static/styles/utils/mixins.scss не работает.

Код Миксина:

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}
}

SCSS:

input {
 @include placeholder {
        color: red;
    }
}

CSS:

input ::-webkit-input-placeholder { color: red; }
input :-moz-placeholder { color: red; }
input ::-moz-placeholder { color: red; }
input :-ms-input-placeholder { color: red; }

И из-за пробела после input код получается не рабочим, хоть валидаторы и не ругаются..

Но если не использовать миксин и воспользоваться псевдоэлементом ::placeholder, то при компиляции автопрефиксер заменит все, как надо:

SCSS:

input {
 &::placeholder{
        color: red;
    }
}

CSS:

input::-webkit-input-placeholder { color: red; }
input::-moz-placeholder { color: red; }
input:-ms-input-placeholder { color: red; }
input::-ms-input-placeholder { color: red; }
input::placeholder { color: red; }

MDN