Используется связка Gulp
+ Pug
+ SCSS
+ BrowserSync
Склонировать репозиторий и выполнить либо npm install
Используется связка Gulp
+ Pug
+ SCSS
+ BrowserSync
Склонировать репозиторий и выполнить либо npm install
Нашел решение проблемы долгой компиляции 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
Скачал 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 файл?
В одной из недавних правок в опциях 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/tasks/pug.js в строке:
.pipe(changed('dist', {extension: '.html'}))
Не верно указано имя папки для слежки.
В доках gulp-changed написано (Destination directory. Same as you put into gulp.dest().)
В вашем шаблоне папка названа build.
Следовательно идёт обработка всех файлов, включая не изменённые.
Не могу понять, откуда берётся JQuery 3.3.1 каждый раз при создании папки build? В каком таске это прописано? Хочу удалить, так как привык все сторонние библиотеки одним файлом вставлять.
Заранее благодарен
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;
Привет, решил использовать твой классный шаблон, но столкнулся с ошибкой при выполнении таска - выдает ошибку rtionError [ERR_ASSERTION]: Task never defined: html:dev. Пример моего галпфайла - https://codepen.io/anon/pen/mQYjEv
.pipe(changed('dist', {extension: '.html'}))
Привет =)
Правильнее наверное все таки dev
.
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 в файле /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; }
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.