Jump to content
  • 0

pug и sass: как сдают верстку и заливают на сервер?


Svetlana_P
 Share

Question

1. Как принято сдавать верстку, если пользуешься, например, pug и sass? До их появления я предоставляла html, css и т.п. Сейчас осваиваю инструменты, но из-за компиляции непонятно, какие файлы теперь отправляют клиенту?

2. В каком виде готовую верстку закачивают на сервер? Например, сайт без CMS: просто готовые html+css+js? Но тогда их менее удобно править при необходимости. Или на сервер как-то компилятор ставят? А если натягивать на CMS, то тогда как быть?

Чувствую, для большинства участников форума это очевидные вещи. Подскажите, как хотя бы называется эта тема, чтобы погуглить. Всё, что находила сама — не по теме.

Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0

1. html и css. попросит, выдадите. лучше всё равно все ваши проекты хранить в гите (битбаките).

2. готовые. редко когда прямо на сервере компилируют. Но можно держать там и сборщик. чтобы последующий разработчик скачал и скомпилировал, а потом залил файлы. + есть всякого рода ftp sync. 

А в целом всё от проекта зависит и разработчиков. 
Можно и локально разрабатывать, делать push в git и чтобы автоматом деплоилось на сервер и т.п. :-) 

  • Like 1
Link to comment
Share on other sites

  • 0

Ну лично у меня организованно следующим образом:

Файлы .scss и .css хранятся в разных папках с такими же названиями для удобства. И когда я сдаю проект, то заливаю на сервер всё. Теоретически для корректной работы проекта нужны только css-файлы. Но если вы перестанете поддерживать проект, а заказчику нужны будут правки, то в случае отстутствия scss-исходников, тому кто будет заниматься поддержкой после вас, придется ковырять сгенерированный css. Сами понимаете удовольствие сомнительное.

Edited by alshend
  • Like 1
Link to comment
Share on other sites

  • 0
2 часа назад, alshend сказал:

Ну лично у меня организованно следующим образом:

Понятно, тоже так стала делать. А можете, пожалуйста, показать структуру папок и файлов своего обычного проекта? Как Вы обычно делаете?

Link to comment
Share on other sites

  • 0

Дак обычно все делают, src папку (исходними), папку dev (live-reload папка на момент разработки) и папку build (конечный результат). 

В общем то, достаточно посмотреть на боле менее популярные сборщики.

Link to comment
Share on other sites

  • 0
13 минуты назад, Svetlana_P сказал:

Понятно, тоже так стала делать. А можете, пожалуйста, показать структуру папок и файлов своего обычного проекта? Как Вы обычно делаете?

Ну если голая верстка без Wordpress, то как-то так: 

 

WHc3eNEHRui8MOkeFzyXbA.png

  • Like 1
Link to comment
Share on other sites

  • 0
45 минут назад, npofopr сказал:

Каждому своё) Проблем никаких нет. Я же за себя отвечаю.

Ну я просто ожидал более развернутый ответ. К примеру, к каким негативным последствиям может привести подобная организация проекта. Возможно у вас есть интересные мысли на этот счет.

Link to comment
Share on other sites

  • 0
1 час назад, alshend сказал:

Ну если голая верстка без Wordpress, то как-то так

alshend, спасибо! А если пользуетесь шаблонизатором, то где файлы хранятся? Например, pug файлы?

Господа, а почему такая организация считается, что "в одной куче"? Ведь здесь файлы вроде распределены по папкам. Что тут не так?

1 час назад, npofopr сказал:

Вот я бы не держал всё в одной куче. При голой вёрстке.

npofopr, можете, пожалуйста, тоже показать свой вариант?

Link to comment
Share on other sites

  • 0

Я пользуюсь tars. Структура по ссылке. 
Хочу ещё этот попробовать.

30 минут назад, Svetlana_P сказал:

"в одной куче"? Ведь здесь файлы вроде распределены по папкам.

Да в целом да, всё в своих местах. Лишь бы собралось в другое место всё, а не тут же. Тут в общем то в удобстве дела для каждого всё. 

Ради удобства я бы объединил js и libs в одну папку, а там уже разветвил, то же самое про css и scss, можно объединить в style и т.п.

Как то более подробно развернуть пока не получается, может позже мысль сформируется :)

И кстати, компонентный подход тоже стоит внимания. Удобно, как оказалось) Обычно для стилей. 

  • Like 1
Link to comment
Share on other sites

  • 0
5 часов назад, npofopr сказал:

Я пользуюсь tars. ... И кстати, компонентный подход тоже стоит внимания.

Спасибо большое, изучу! С первого наскока, правда, не разобралась.

5 часов назад, Schamil74 сказал:

Привет, Света! Давно не виделись))

А можно и я свои 5 коп вставлю

Шамиль, привет! Давно тебя не было слышно. Рада твоим 5 коп :))) Хорошая демонстрация. Я правильно поняла, что в source хранятся рабочие файлы, а в assets — готовые после компиляции? Кстати, можешь пжл перечислить свои теперешние инструменты? Я пока с Prepros :blush:

Link to comment
Share on other sites

  • 0
20 часов назад, Svetlana_P сказал:

alshend, спасибо! А если пользуетесь шаблонизатором, то где файлы хранятся? Например, pug файлы?

Господа, а почему такая организация считается, что "в одной куче"? Ведь здесь файлы вроде распределены по папкам. Что тут не так?

npofopr, можете, пожалуйста, тоже показать свой вариант?

Шаблонизаторами не пользуюсь, но суть принципиально не изменится. Мне кажется, что вне зависимости от того, какие инструменты вы используете, структура проекта должна быть интуитивно понятной.

  • Like 1
Link to comment
Share on other sites

  • 0

В templates еще лежат pug файлы.

Инструменты:

- для браузера perfectpixel, colorzilla, pageruler и еще floc

- редактор st3

- локальный сервер lamp(у меня linux)

- для деплоя filezilla или gulp

- эмуляция IE и photoshop - virtualbox

- для разработки git, node, yarn, gulp, bower, terminal, pug, scss

- f.lux чтоб глазки не уставали

- онлайн сервисы can I use, favicon generator, jsFiddle

Что вспомнил)))

Edited by Schamil74
  • Like 1
Link to comment
Share on other sites

  • 0
17 минут назад, alshend сказал:

структура проекта должна быть интуитивно понятной

Дак не вопрос. Всё зависит от взглядом на жизнь. Интуиция она у каждого своя :-) 
Чем бы вы и не вы пользовались сегодня, через год вы будете пользоваться другим. 

Вообще тема поста другая :-D 

  • Like 1
Link to comment
Share on other sites

  • 0

alshend, npofopr, Шамиль — всем большое спасибо! Пошла разбираться :)

> Вообще тема поста другая 

Действительно, на основной вопрос по теме уже получила ответ.

Link to comment
Share on other sites

  • 0

А у меня такой стартовый шаблон для верстки, к которому я привык.

Цитата

├── config.json
├── package.json
├── vendors.json
├── gulpfile.js
├── yarn.lock
├── src/
    ├── images/
    ├── other/
        ├── favicons/
        ├── fonts/
    ├── scripts/
        ├── partials/
            ├──app.js  // тут я пишу свой код
            // еще сюда обычно добавляю кастомный bootstrap.js и другие скрипты плагинов с измененным исходным кодом
        ├── main.js  //сюда иклудятся все плагины из node_modules и скрипты из partials/
    ├── styles/
        ├── partials/
            ├── variables.scss
            ├── mixins.scss
            ├── base.scss
            ├── header.scss
            ├── footer.scss
            ├── main.scss
            ...etc.
        ├── style.scss  //cюда иклудятся стили плагинов из node_modules и все что находится в /partials
    ├── templates/
        ├── modules/
            ├── header.hbs
            ├── footer.hbs
            ├── layout.hbs
            ...etc.
        ├── pages/
            ├── index.hbs
            ...etc.

Собирается все сюда

Цитата

build/
  ├── css/
      ├── style.css
  ├── js/
      ├── main.js
  ├── images/
  ├── favicons/
  ├── fonts/
  ├── vendors/
  ├── index.html
    

 

Клиенту передается архив, в котором build папка (с минифицированными стилями\скриптами\изображениями) и dev версия проекта со всеми исходными файлами, конфигами.

Edited by swandev
  • Like 1
Link to comment
Share on other sites

  • 0
2 часа назад, swandev сказал:

Клиенту передается архив, в котором build папка (с минифицированными стилями\скриптами\изображениями) и dev версия проекта со всеми исходными файлами, конфигами.

Спасибо большое, что поделились! И за подробные комментарии. Поможет настроить свой :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By ket-verbitskaya
      Привет!
      Недавно проходила первый этап на собесе с заданием и провалила. Нужно было создать копию отправленного изображения (прикреплено). Предполагаю, что ошибка была изначально в том, что требование "Use SASS variables by changing width and background, it has to change completely, the shape must be responsive (all its parts grow or shrink respectively)" не было выполнено. Фидбека не было, к сожалению. Работа проделана была только с html css. Но быть может были допущены другие другие ошибки? Буду признательна, если кто-нибудь укажет на них.
      Код ниже и по ссылке: https://codepen.io/qizqepml-th... ls/LYeYqjX
       
      <div class="wrapper"> <div class="circle"> <div class="panel panel--1"> </div> <div class="panel panel--2"> </div> <div class="panel panel--3"> </div> <div class="panel panel--4"> </div> <div class="circle--2"> </div> </div> </div>  
      * { box-sizing: border-box; } body { background-color: #2b2b2b; } .wrapper { background-color: #2b2b2b; position: absolute; display: flex; align-items: center; justify-content: center; top: 50%; left: 50%; transform: translate(-50%, -50%); } .circle { height: 29vw; width: 29vw; border-radius: 50%; position: absolute; transform: rotateZ(25deg); background-color: #333333; } .panel { height: 17.5vw; width: 17.5vw; border-radius: 50%; border: 1.5vw solid #f14100; } .panel--1 { float: left; position: absolute; } .panel--2 { float: right; position: relative; } .panel--3 { bottom: 0; position: absolute; } .panel--4 { bottom: 0; right: 0; position: absolute; } .circle--2 { border: 1.5vw solid #f14100; position: relative; border-radius: 50%; height: 25vw; width: 25vw; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); outline: 10vw solid #2b2b2b; }  

    • By yeldos23
      Всем привет народ! Очень надеюсь на вашу помощь! Дело в том что я создавал сайты по видео урокам некого Михаила Базарова. Вот собственно его видео уроки https://camouf.ru/video/new_store/phpstorm.html?PAGEN_2=2
      Теперь конкретно о проблеме: Дело в том, что данный человек использует bootstrap и sass. Он компилирует все стили в сжатый css. В этом то и проблема. У меня не компилируется, а стили на сайте не работают.
      Что я сделал: установил Ruby, прописал в командной строке gem install sass, успешно установился. Перезагрузил компьютер и подключился к своему удаленному серверу через PhpStorm. Обмен между локальным и удаленным сервером идет успешно. Но на сайте не работают стили прописанные в sass
      Скрин https://imgur.com/a/vV6QZBV
       
      UPD: Оказалось что путь к файлам неверный, мог бы кто нибудь помочь настроить?
    • By Liza1999
      Здравствуйте!
      У меня есть сборка проекта gulp. мне необходимо установить шаблонизатор pug для моего проекта. Node.js у меня установлен. Пишу сначала npm install pug, затем npm install pug-cli - все устанавливается. Когда пишу pug --help консоль пишет pug: command not found
    • By azaqwerty
      Здравствуйте! Не могу сделать импорт в sass. Не могу понять в чем дело? По урокам делал, как все показывали, но не выходит! Импорт для оптимизаций и адаптаций сайта 




    • By VeraVostro
      Заранее прошу прощения если этот вопрос уже задавался, но, несмотря на обширное кол-во информации по теме, найти ответа на свой вопрос я не смогла.

      Суть в следующем:
      Например, у меня есть два отдельных scss файла - header.scss и footer.scss. Стили футера почти полностью совпадают со стилями хедера, за исключением пары свойств.
      Но если я прописываю в файле footer.scss @extend header - стили хедера не могут использоваться, т.к. это другой файл.

      Подскажите, как идеологически вернее делать в данной ситуации? Чтобы новый класс/элемент получал стили существующего класса из другого файла + добавлял свои или менял некоторые стили на свои.
  • Обсуждения

    • <div class="modal-body"> <?php if (!empty($_SESSION['cart'])): ?> <?php else: ?> <p>Корзина пуста...</p> <?php endif; ?> <?php if (!empty($_SESSION['cart'])): ?> <table class="table"> <thead> <tr> <th scope="col">Изображение</th> <th scope="col">Название</th> <th scope="col">Цена</th> <th scope="col">Количество</th> </tr> </thead> <tbody> <?php foreach ($_SESSION['cart'] as $id => $item): ?> <tr> <td><a href="#"><img class="br-3" src="images/<?= $item['img'] ?>" alt="<?= $item['title'] ?>"></a></td> <td><p><?= $item['title'] ?></p></td> <td><?= $item['price'] ?></td> <td> <?= $id ?> <a id="min-to-cart" href="?cart=minus&id=<?= $id ?>" class="min-to-cart minus-btn badge-light minus-to-cart" data-id="<?php echo $id ?>"></a> <?= $item['qty'] ?> <a id="plus-to-cart" href="?cart=plus&id=<?= $id ?>" class="plus-btn badge-light plus-to-cart" data-id="<?php echo $id ?>"></a> <a href="#" class="delete-btn remove-from-cart badge-light" data-id="<?php echo $id ?>"></a> <button type="button" class="btn delete-btn remove-from-cart" id="remove-from-cart" data-id="<?php echo $id ?>"></button> </td> </tr> <?php endforeach; ?> <tr> <td colspan="4" align="right">Товаров: <span id="modal-cart-qty"><?= $_SESSION['cart.qty'] ?></span> <br> На сумму: <?= $_SESSION['cart.sum'] ?> руб.</td> </tr> </tbody> </table> <form action="telegram.php" method="POST"> <legend>Введите имя, номер телефона и адрес:</legend> <div class="form-group"> <input type="text" class="form-control" id="" name="name" placeholder="Введите имя"> </div> <div class="form-group"> <input type="text" class="form-control" id="" name="phone" placeholder="Введите телефон"> </div> <div class="form-group"> <input type="text" class="form-control" id="" name="address" placeholder="Введите адрес"> </div> <div class="form-group"> <textarea name="msg" placeholder="Ваш комментарий..."></textarea> </div> <button type="submit" class="btn btn-success">Оформить заказ</button> <button type="button" class="btn btn-danger" id="clear-cart">Очистить корзину</button> </form> <!--<script src="common/scripts.js"></script>--> <?php endif; ?> </div> <div class="modal-footer"> <?php foreach ($_SESSION['cart'] as $id => $item): ?> <a href="#" class="delete-btn remove-from-cart badge-light" data-id="<?php echo $id ?>"></a> <?php endforeach; ?> </div>               функция полной очистки работает, видимо потому что этот класс есть изначально, а не появляется из-за сессии   $('.add-to-cart').on('click', function (e){ e.preventDefault(); let id = $(this).data('id'); $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'add', id: id}, dataType: 'json', success: function (res) { if (res.code == 'ok') { showCart(res.answer); } else { alert(res.answer); } }, error: function () { alert('Error'); } }); }); $('#cart-modal .modal-cart-content .remove-from-cart').on('click', function (e){ e.preventDefault(); let id = $(this).data('id'); console.log(id); }); $('#get-cart').on('click', function (e){ e.preventDefault(); $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'show'}, success: function (res) { showCart(res); }, error: function () { alert('Error'); } }); }); $('#cart-modal .modal-cart-content').on('click', '#clear-cart', function (){ $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'clear'}, success: function (res) { showCart(res); }, error: function () { alert('Error'); } }); });
    • Например, добавить  .wrapper li {     clear: both; } http://jsfiddle.net/e3f9ozLr/
    • Добрый день.На сайте после удаления переводчика gtranslate появилась такая вот проблема:при переадресации с http://tto-studio.com.ua/ на https://tto-studio.com.ua/ru/ вылетает такая вот страница <strong>https://tto-studio.com.ua/wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=ru&gurl=</strong>Что мне делать, как это можно исправить? А точнее — на странице https://tto-studio.com.ua/ru/ в адресной строке я удаляю букву s с http s:// и нажимаю enter. И заместь того чтобы меня кинуло на страницу — https://tto-studio.com.ua/ru/ меня кидает на — https://tto-studio.com.ua/wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=ru&gurl=
    • Ты в стрелочной функции из-за того что у тебя одно выражение опустил { }. А это ведет к неявному возврату результата выражения.
    • Здравстуйте, каким образом можно получить доступ к Mathcad Application Server для получения доступа к документам и функциям Mathcad через Интернет. Может быть, есть другой способ связать интернет с Mathcad ?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy