Weitere Ă€hnliche Inhalte Ăhnlich wie Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp (20) KĂŒrzlich hochgeladen (20) Optimising Your Front End Workflow With Symfony, Twig, Bower and Gulp31. Article.php
/**âš
* The title of the Articleâš
*âš
* @var stringâš
*âš
* @ORMColumn(type="string", length=255)âš
*âš
* @AssertNotBlank(message="article.title.not_blank")âš
* @AssertLength(âš
*
max=255,âš
*
maxMessage="article.title.length.max"âš
* )âš
*/âš
protected $title;
46. list.html.twig
{% block body %}âš
<h1>{{ 'article.title.list'|trans({}, 'admin') }}</h1>âš
{% if articles %}âš
<ul class="articles">âš
{% for article in articles %}âš
<li>{{ article.title }}</li>âš
{% endfor %}âš
</ul>âš
{% endif %}âš
âš
<a href="{{ path('admin.article.create') }}â>
{{ 'article.action.create'|trans({}, 'admin') }}
</a>âš
{% endblock body %}
50. base.html.twig
<!DOCTYPE html>âš
<html>âš
<head>âš
<meta charset="UTF-8" />âš
<title>{% block title %}Welcome!{% endblock %}</title>âš
{% block stylesheets %}{% endblock %}âš
<link rel="icon" type="image/x-icon"
href="{{ asset('favicon.ico') }}" />âš
</head>âš
<body>âš
{% block body %}{% endblock %}âš
{% block javascripts %}{% endblock %}âš
</body>âš
</html>
52. base.html.twig
<!doctype html>âš
âš
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->âš
<!--[if IE 7 ]>
<html lang="en" class="no-js ie7 lt-ie9 lt-ie8"> <![endif]-->âš
<!--[if IE 8 ]>
<html lang="en" class="no-js ie8 lt-ie9"> <![endif]-->âš
<!--[if IE 9 ]>
<html lang="en" class="no-js ie9"> <![endif]-->âš
<!--[if (gt IE 9)|!(IE)]><!-->âš
<html lang="en" class="no-js"><!--<![endif]-->âš
<head>âš
<meta charset="utf-8" />âš
<title>{% block title %}{% endblock title %}</title>âš
âš
<!-- Set up mobile viewport for responsive design -->âš
<meta name="viewport" content="width=device-width" />âš
âš
{% block stylesheets %}{% endblock stylesheets %}âš
</head>âš
<body>âš
{% block content %}{% endblock content %}âš
{% block javascripts %}{% endblock javascripts %}âš
</body>âš
</html>âš
58. admin.html.twig
{% extends "::base.html.twig" %}âš
âš
{% block title %}
{{ 'defaults.title'|trans({}, 'admin') }}
{% endblock title %}âš
âš
{% block content %}âš
{% block body %}{% endblock body %}âš
{% endblock content %}âš
59. frontend.html.twig
{% extends "::base.html.twig" %}âš
âš
{% block title %}{{ 'defaults.title'|trans }}{% endblock title %}âš
âš
{% block content %}âš
{% block header %}{% endblock header %}âš
{% block body %}{% endblock body %}âš
{% block footer %}{% endblock footer %}âš
{% endblock content %}
62. list.html.twig
{% extends "MDMainBundle:Layouts:admin.html.twig" %}âš
âš
{% block body %}âš
<h1>{{ 'article.title.list'|trans({}, 'admin') }}</h1>âš
{% if articles %}âš
<ul class="articles">âš
{% for article in articles %}âš
<li>{{ article.title }}</li>âš
{% endfor %}âš
</ul>âš
{% endif %}âš
âš
<a href="{{ path('admin.article.create') }}â>
{{ 'article.action.create'|trans({}, 'admin') }}
</a>âš
{% endblock body %}âš
67. list.html.twig
{% extends "MDMainBundle:Layouts:admin.html.twig" %}âš
âš
{% trans_default_domain "admin" %}âš
âš
{% block body %}âš
<h1>{{ 'article.title.list'|trans }}</h1>âš
{% if articles %}âš
<ul class="articles">âš
{% for article in articles %}âš
<li>{{ article.title }}</li>âš
{% endfor %}âš
</ul>âš
{% endif %}âš
âš
<a href="{{ path('admin.article.create') }}â>
{{ 'article.action.create'|trans }}
</a>âš
{% endblock body %}âš
98. Easy to reference assets
{% block javascripts %}
<script src="{{ asset('/vendor/modernizr/modernizr.js') }}"></script>
{% endblock javascripts %}
99. Easy to reference assets
{% block javascripts %}
<script src="{{ asset('/vendor/modernizr/modernizr.js') }}"></script>
{% endblock javascripts %}
Globally or per âsectionâ
106. â
Every week someone who doesnât
understand Make writes a new build
system in JavaScript.
#gruntjs #gearjs #gulpjs #broccolijs.
Laugh or cry?
https://twitter.com/aslak_hellesoy/status/435506106496851968
119. We have 2 copies in web/
Bower install to /assets/vendor
120. We have 2 copies in web/
Bower install to /assets/vendor
Prevents source being public
124. gulpfile.js
var scss = require('gulp-sass');
!
!
gulp.task('scss', function() {âš
return gulp.src('assets/scss/*.scss')âš
.pipe(scss())âš
.pipe(gulp.dest('web/css'));âš
});
126. matt at Chloe in ~/Sites/workflow.dev on dev *
đ $ gulp scss
[gulp] Using file /Users/matt/Sites/workflow.dev/gulpfile.js
[gulp] Working directory changed to /Users/matt/Sites/workflow.dev
[gulp] Running 'scss'...
[gulp] Finished 'scss' in 11 ms