BW Core - Assets Bundle
This project is currently unlikely to be continued or maintained.
This is unlikely to be maintained or development continued and we are likely to use Assetic at British Websites. Generating manifests for routes has proven to be a sticking point. Also with proper cache use, having more than 1 resources file should end up being faster when browsing around a website than always insisting on just a single js and css file. Sourcemaps are not essential, especially as during development with Assetic, it is not necessary to uglify and combine all files. Sourcemaps are therefore unnecessary in a production environment. The extra steps in a workflow to use Gulp does not seem to be worth it. We may modify this bundle for functionality to include external assets only., (*1)
This Symfony 3 Bundle was created to make the deployment of front-end assets using Bower and Gulp easier. It also provides a simple confirguration for including scripts and styles from remote URLs if you'd prefer to utilise the CDNs available., (*2)
Requirements
- npm
- composer
- gulp-cli
- bower
This bundle has a gulpfile.js using Gulp 4 - provided package.json will install this. The setup console command will guide you. If you choose to copy and modify the configuration files manually, you can copy them from the within this bundle: Resources/_setup/, (*3)
Installation
You can install this bundle using composer (from the current unreleased master branch):, (*4)
composer require silverbackis/bw-assets-bundle:dev-master
Then enable the bundle:, (*5)
// app/AppKernel.php
// ...
class AppKernel extends Kernel
{
// ...
public function registerBundles()
{
$bundles = array(
// ...
new BW\AssetsBundle\BWAssetsBundle(),
);
// ...
}
}
You can also run the following command to automatically add this to your AppKernel.php file, (*6)
php vendor/silverbackis/bw-assets-bundle/Install.php
Once the bundle is enabled you can run the following command to copy the bower.json, gulpfile.js and optionally a package.json file, (*7)
php bin/console bwassets:setup
This will ask interactive questions to determine where you'd like to run your gulp and bower commands from - it will default to your Symfony project's root directory. Bower dependancies will be installed within this bundle. That is so the sourcemaps generated can refer back to them so you can find them when inspecting your assets in a browser. Additionally, all local assets you include in pages will also be copied into this bundle when they are processed., (*8)
Finally, it will be important to install your assets, otherwise your files will not exist to load. Symlink support is a must for an easy workflow:, (*9)
php bin/console assets:install --symlink
Getting Started
To automatically insert tags in your templates you'll need to make a couple of small modifications to your controllers and templates., (*10)
Your controllers must extend the default controller of this bundle. The DefaultController.php file below can be used as a template and will also include a simple test page. You can of course copy the index.html.twig file into your own bundle and include it so you can play around with the functions available and see which resources are included., (*11)
# src/AppBundle/Controller/DefaultController.php
<?php
namespace AppBundle\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Component\HttpFoundation\Request;
use BW\AssetsBundle\Controller\DefaultController as Controller;
class DefaultController extends Controller
{
/**
* @Route("/", name="homepage")
*/
public function indexAction(Request $request)
{
return $this->render('@BWAssets/Default/index.html.twig', [
'base_dir' => realpath($this->getParameter('kernel.root_dir').'/..').DIRECTORY_SEPARATOR,
]);
}
}
Also, you should extend a base twig template with certain blocks that are used by this bundle:, (*12)
{% extends '@BWAssets/base.html.twig' %}
Again, feel free to copy this base template and modify it for your own needs., (*13)
Parameters and configuration
You'll probably want to familiarize yourself with the parameters and default configuration for this bundle (which you can override as usual)., (*14)
parameters.yml:, (*15)
parameters:
google_fonts: null
config.yml:, (*16)
bw_assets:
local:
gulpOnLoad: false
includeBower: true
read_from: '%kernel.root_dir%/../web/'
assets: []
dependancies:
bootstrap:
tether: true
jquery:
slim: true
remote:
googleFonts:
enabled: true
version: null
base: //fonts.googleapis.com/css?family=
files:
css:
enabled: true
extension: css
file: '%google_fonts%'
jquery:
version: 3.1.1
base: //code.jquery.com/
files:
slim:
file: jquery-{version}.slim.min.js
integrity: sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc=
js:
file: jquery-{version}.min.js
integrity: sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=
includes:
jquery: ['slim']
tether:
version: 1.4.0
base: //cdnjs.cloudflare.com/ajax/libs/tether/{version}/
files:
js:
file: js/tether.min.js
integrity: sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb
bootstrap:
version: 4.0.0-alpha.6
base: //maxcdn.bootstrapcdn.com/bootstrap/{version}/
#this also needs jquery OR jquey_slim and tether
files:
css:
file: css/bootstrap.min.css
integrity: sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ
js:
file: js/bootstrap.min.js
integrity: sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn
gsap:
enabled: true
version: 1.19.0
base: //cdnjs.cloudflare.com/ajax/libs/gsap/{version}/
files:
TweenLite:
enabled: true
file: TweenLite.min.js
EasePack:
enabled: true
file: easing/EasePack.min.js
CSSPlugin:
enabled: true
file: plugins/CSSPlugin.min.js
TweenMax:
enabled: false
file: TweenMax.min.js
includes:
gsap: ['TweenLite','EasePack','CSSPlugin','TimelineLite','TimelineMax','AttrPlugin','RoundPropsPlugin','DirectionalRotationPlugin','BezierPlugin']
TimelineLite:
enabled: false
file: TimelineLite.min.js
TimelineMax:
enabled: false
file: TimelineMax.min.js
includes:
gsap: ['TimelineLite']
Draggable:
enabled: false
file: utils/Draggable.min.js
AttrPlugin:
enabled: false
file: plugins/AttrPlugin.min.js
BezierPlugin:
enabled: false
file: plugins/BezierPlugin.min.js
ColorPropsPlugin:
enabled: false
file: plugins/ColorPropsPlugin.min.js
CSSRulePlugin:
enabled: false
file: plugins/CSSRulePlugin.min.js
DirectionalRotationPlugin:
enabled: false
file: plugins/DirectionalRotationPlugin.min.js
EaselPlugin:
enabled: false
file: plugins/EaselPlugin.min.js
EndArrayPlugin:
enabled: false
file: plugins/EndArrayPlugin.min.js
ModifiersPlugin:
enabled: false
file: plugins/ModifiersPlugin.min.js
RaphaelPlugin:
enabled: false
file: plugins/RaphaelPlugin.min.js
RoundPropsPlugin:
enabled: false
file: plugins/RoundPropsPlugin.min.js
ScrollToPlugin:
enabled: false
file: plugins/ScrollToPlugin.min.js
TextPlugin:
enabled: false
file: plugins/TextPlugin.min.js
The parameters and configuration will be referenced in the documentation for remote and local assets:, (*17)
Limitations
- You cannot include assets inside conditional statements within your twig templates. It is possible in future there could be a config for you to specify which routes have conditions and what they are, but it has not been included yet.
Wallogit.com
