Статьи

Интеграция HTML5 Boilerplate с Scalate и Play

Февраль 18, 2019

HTML5 Boilerplate — это проект, который предоставляет ряд базовых файлов, которые помогут вам создать приложение HTML5. По своей сути это HTML-шаблон, который ставит CSS вверху, JavaScript внизу, устанавливает Chrome Frame для пользователей IE6 и использует Modernizr для поддержки устаревших браузеров. Он также включает в себя jQuery с загрузкой. Одним из основных преимуществ HTML5 Boilerplate является то, что он поставляется с системой сборки (работающей на Ant), которая объединяет и минимизирует CSS и JS для максимальной производительности. От html5boilerplate.com :

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

Мне нравится идея его системы сборки минимизировать и gzip, но я бы, вероятно, использовал ее, только если бы работал над проектом, использующим Ant. Поскольку я использую его в проекте Play, вся система сборки Ant мне не помогает. Кроме того, я предпочитаю что-то вроде wro4j . Wro4j позволяет вам указать группу файлов, а затем компилировать, минимизировать и сжимать их все на лету. Насколько я знаю, Play не поддерживает фильтры сервлетов, поэтому использование wro4j в Play не тривиально.

Хорошей новостью является то, что Play имеет модуль GreenScript, который содержит большую часть функциональности wro4j. Тем не менее, так как я использую Scalate в своем проекте, эта доброта для меня недоступна. В будущем команда Scalate Team рассматривает возможность добавления лучшей интеграции wro4j, JavaScript и CSS . В то же время, я собираюсь притвориться, что меня не волнует конкатенация и минимизация, а также обход без этой функции.

Чтобы добавить HTML5 Boilerplate в мой проект Play, я выполнил следующие шаги:

  • Скачал 2.0 Zipball .
  • Скопировал все статические файлы в мой проект. Ниже приведены команды, которые я использовал (где $ilerplate-download — это расширенный каталог загрузки, а ~ / dev / play-more — мой проект): 
    cd $boilerplate-download
cp 404.html ~/dev/play-more/app/views/errors/404.html
cp *.png ~/dev/play-more/public/.
cp crossdomain.xml ~/dev/play-more/public/.
cp -r css ~/dev/play-more/public/stylesheets/.
cp favicon.ico ~/dev/play-more/public/.
cp humans.txt ~/dev/play-more/public/.
cp -r js/libs ~/dev/play-more/public/javascripts/.
cp robots.txt ~/dev/play-more/public/.
  • Скопировал файл index.html в ~ / dev / play-more / app / templates / layouts / default.jade и изменил его для использования синтаксиса Jade . Так как я загрузил версию с комментариями, я изменил многие из них, чтобы они были скрыты в конечном выводе.

    -@ val body: String 
-@ var title: String = "Play More"
-@ var header: String = ""
-@ var footer: String = ""
!!! 5
/ paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ 
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
-# Consider adding an manifest.appcache: h5bp.com/d/Offline 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
head
  meta(charset="utf-8")

  -# Use the .htaccess and remove these lines to avoid edge case issues. More info: h5bp.com/b/378 
  meta(http-equiv="X-UA-Compatible" content="IE=edge,chrome=1")

  title=title
  meta(name="description" content="")
  meta(name="author" content="Matt Raible ~ [email protected]")

  -# Mobile viewport optimized: j.mp/bplateviewport 
  meta(name="viewport" content="width=device-width,initial-scale=1")

  -# Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons

  -# CSS: implied media=all
  link(rel="stylesheet" href={uri("/public/stylesheets/style.css")})
  -# end CSS

  -# More ideas for your <head> here: h5bp.com/d/head-Tips 
  -#
    All JavaScript at the bottom, except for Modernizr / Respond.
    Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
    For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ 

  script(type="text/javascript" src={uri("/public/javascripts/libs/modernizr-2.0.6.min.js")})
body
  #container
    header = header
    #main(role="main")
      != body
    footer = footer

  -# JavaScript at the bottom for fast page loading 
  
  / Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline 
  script(type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js")
  :javascript
    window.jQuery || document.write('<script src={uri("/public/javascripts/libs/jquery-1.6.2.min.js")}><\/script>')

  -# Change UA-XXXXX-X to be your site's ID 
  :javascript
    window._gaq = [['_setAccount','UA-25859875-1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });

  -# Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6. 
  -# http://chromium.org/developers/how-tos/chrome-frame-getting-started 
  /[if lt IE 7]
    script(src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js")
    :javascript
      window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})
        
!= "</html>"
  • Затем мне пришлось добавить поддержку макетов в мою доморощенную поддержку Scalate . Я сделал это, указав layoutStrategy при инициализации TemplateEngine. Из play-more / app / controllers / ScalateTemplate.scala :

    engine.classLoader = Play.classloader
engine.layoutStrategy = new DefaultLayoutStrategy(engine, 
  Play.getFile("/app/templates/layouts/default" + scalateType).getAbsolutePath)
engine

Это оно! Теперь у меня есть HTML5 Boilerplate, интегрированный в мое приложение Play / Scalate / Jade. Чтобы установить заголовок и заголовок в моем index.jade , я просто добавил следующие строки вверху:

- attributes("title") = "Counting"
- attributes("header") = "HTML5 Rocks!"

Подсказка CoffeeScript
Вчера я упомянул, что у меня возникли проблемы с настройкой CoffeeScript для работы со Scalate и что я собираюсь попытаться заставить работать компилятор в браузере. Прежде всего, возврат к Scalate 1.4.1 не работал, потому что в 1.4.1 нет поддержки CoffeeScript. Поэтому я остановился на 1.5.2 и использовал учебник PandaWood для работы с CoffeeScript в браузере . Я скопировал coffee-script.js в ~ / dev / play-more / public / javascripts / libs и добавил ссылку на него в свой макет default.jade:

-# JavaScript at the bottom for fast page loading 
script(type="text/javascript" src={uri("/public/javascripts/libs/coffee-script.js")})

Затем я смог написать CoffeeScript в шаблоне .jade, используя следующий синтаксис:

:plain
  <script type="text/coffeescript">
    alert "hello world"
  </script>

Резюме

Если вы интегрировали HTML5 Boilerplate в свое приложение Play, я хотел бы услышать об этом. Теперь, когда у меня есть вся инфраструктура (Jade, CoffeeScript, HTML5 Boilerplate), я с нетерпением жду возможности закончить некоторые разработки. Кто знает, может быть , я даже придумать с моей собственной
игры Un-Характеристики , которые действительно Irk My Inner Geek .

От http://raibledesigns.com/rd/entry/integrating_html5_boilerplate_with_scalate

36
Share: