Шаблон для быстрого старта верстки.
У вас должны быть установлены:
Далее выполняем:
yarn
gulp build
После выкачивания всех зависимостей проекта и успешной первичной сборки, запустите задачу gulp или gulp serve и можете приступать к работе.
- BrowserSync
- компиляция jade и sass
- сжатие стилей, скриптов (ES2015) и изображений
- проверка javascript-кода на наличие ошибок (eslint)
Задача gulp serve откроет вкладку в браузере, и в консоли вы увидите local и external пути до вашего проекта. Так вы сможете отлаживать верстку сразу в нескольких браузерах и устройствах.
В папке src/jade расположены шаблоны для генерации. После выполнения задачи gulp jade в корне проекта появятся html-файлы, которые будут результатом компиляции из вышеуказанной папки с исходниками.
По умолчанию имеется один index.jade, в котором импортируются includes/head.jade, includes/header.jade и includes/footer.jade. Их стоит использовать в других подобных создаваемых шаблонах.
Файлы, расположенные в папке src/jade/includes, не компилируются.
Все стили находятся в папке src/sass. Gulp собирает их в один файл main.min.css и кладет в папку dist/css.
Все делится на логические блоки (файлы). Если вы хотите добавить еще один, создайте новый sass-файл и подключите его в main.sass.
Вы можете активировать плагин gulp-uncss, чтобы убрать ненужные стили (см. файл gulpfile.js: задача sass-build).
Стоит придерживаться единому стилю написания кода, чтобы обеспечить высокую скорость разработки и поддерживаемость ваших проектов.
В шаблоне для изменения скомпилированного css-кода используются плагины Postcss.
- autoprefixer (автоматически проставляет браузерные префиксы)
- cssnano (сжимает css-код)
За сжатие изображений отвечает задача gulp images (в том числе gulp webp). Вы можете вызывать ее самостоятельно, либо запустить gulp, и после этого каждый файл изображения, размещенный в src/img (включая svg), будет сжат и положен в dist/img с тем же именем. Также используется генерация WebP-изображений. Их можно использовать так:
html:
<picture>
<source srcset="dist/img/image.webp" type="image/webp">
<img src="dist/img/image.jpg">
</picture>
css (вместе с modernizr):
body
background-position: center center
background-attachment: fixed
.no-webp body
background-image: url(#{$img}/bg-main.jpg)
.webp body
background-image: url(#{$img}/bg-main.webp)
Вы можете использовать систему символов SVG. Эти символы описываются единожды в самом начале документа (для этого заводится один скрытый тег svg), а затем их можно использовать повторно где-либо на страницах, менять их заливку, размер, применять трансформации (поворот и др.), а также анимировать какие-либо значения (fill и др.) с помощью transition или применять сложную анимацию на основе keyframes.
Пример:
...
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
<symbol id="icon-test" viewBox="0 0 100 100">
<path d="..."></path>
</symbol>
</svg>
...
<svg class="icon-test">
<use xlink:href="#icon-test"></use>
</svg>
...
Для автоматизации процесса хорошо подходит плагин gulp-svgstore. Именно он используется в Andylight. Все иконки в виде скрытого svg автоматически добавляются в шаблон, располагаясь сперва в подключаемом js-файле, а затем встраиваясь в страницу. Просто кладите нужные иконки в папку src/img/svg/icons и используйте их на страницах с помощью конструкции svg use (задача gulp svgstore).
Для генерации favicons вы можете пользоваться сервисом RealFaviconGenerator. Положите сгенерированные иконки в папку /src/favicons.
Дополнительная информация про иконки.
Для сборки ваших и сторонних модулей используется Browserify.
Все необходимые пакеты устанавливаются через yarn (yarn add package) и после этого их можно использовать у себя в коде. Например:
import _find from 'lodash/find';
Входная точка приложения - src/js/app.js.
После того, как вы закончили работу над очередной частью вашего проекта, выполните задачу gulp build, чтобы привести выходные файлы с правильное состояние. Так, например, вы добьетесь того, что js будет сжат и из него сборщик удалит карты кода.
Откройте отладчик и выполните следующий код:
var a,w=document.createTreeWalker(document,NodeFilter.SHOW_TEXT);while(a=w.nextNode()){if(a.textContent.trim().length)a.textContent='Одиннадцатиклассница пошла посмотреть на достопримечательность, она шла долго, несколько строчек, пока не пришла'}
Это поможет вам увидеть, где что поехало, какие блоки сломались.
Код взят из статьи на Хабрахабре от 2ГИС.
Вы также можете воспользоваться расширением для Google Chrome.
Если у вас имеются какие-либо вопросы или пожелания, пишите письма на nikbelikov@me.com или воспользуйтесь твиттером.
Copyright (c) 2014-2017 nikbelikov.ru
Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.
ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.