start-template-gulp-4-pug-sass's People
Forkers
tatianapost krawster nesterenkoaleksandr shzk alexandrboiko bluesman66 blackfxtalon desmokitsor aligote dziuperduperman rosinskiy-sergey kristina3531 al-ivanov hamalkari isaacdigs zurabpwnz slavapas zelord85 andriybroda kolesnikovdmitry nika0855 ilyagremitskikh tienthanght96 mcwild drekavac3993 juliaavsyuk zlobarchic tannguyent smorev comadaihiep92 zobakka smargelov asverq mikshi vladokbln ddergunov sanaglx timures purposefuleagle jkray17 ulialia luckymalina yokean1605 dmnyra drshvets sleepypancake natakzk jasfayz glasswhite07 sergey-rosinskiy invalid349 chicagoiststart-template-gulp-4-pug-sass's Issues
gulp-changed (Destination directory)
.pipe(changed('dist', {extension: '.html'}))
Привет =)
Правильнее наверное все таки dev
.
Проблема с импортом стилей из 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 файл?
Scripts в package.json
Будет отлично, если вы запишите все варианты запуска сборки в scripts в файл package.json
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, без остальных плясок с бубнами.
Компиляция pug
Нашел решение проблемы долгой компиляции pug
До этого у меня pug (лично на моем проекте) компилился где то 5-8 секунд. После некоторых доработок компиляция стала примерно 400-700ms
Что нужно сделать:
в файле pug.js в строку "return $.gulp.src('./dev/pug/*.pug'" - дописать параметр
" {since: $.gulp.lastRun('dev')}"
P.S "dev" - это наша папка с робочими файлами. важно написать именно ее а не "./dev/pug"
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.
Следовательно идёт обработка всех файлов, включая не изменённые.
Предложение по внедрению Миксина для 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;
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; }
Task never defined: html:dev
Привет, решил использовать твой классный шаблон, но столкнулся с ошибкой при выполнении таска - выдает ошибку rtionError [ERR_ASSERTION]: Task never defined: html:dev. Пример моего галпфайла - https://codepen.io/anon/pen/mQYjEv
Откуда берётся JQuery в папке build
Не могу понять, откуда берётся JQuery 3.3.1 каждый раз при создании папки build? В каком таске это прописано? Хочу удалить, так как привык все сторонние библиотеки одним файлом вставлять.
Заранее благодарен
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 автопрефиксера...
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.