Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to on the fly minify and output css and js using their ... #2

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 16 additions & 160 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,37 +1,34 @@
Assets
======

An ultra-simple-to-use assets management PHP library.
A simple laravel assets management PHP library from the view. Forked from [Stolz/Assets](https://github.com/Stolz/Assets).
The main reason for the fork is to add the ability to assign and minify assets from the laravel view on the fly without having to use controllers or routes.

1. [Features](#features).
- [Supported frameworks](#frameworks).
- [Installation](#installation).
- [Usage](#usage).
- [Views](#views).
- [Controllers](#controllers).
- [Configuration](#configuration).
- [Collections](#collections).
- [Pipeline](#pipeline).
- [More options](#options).
- [Non static interface usage](#nonstatic).
- [Sample collections](#samples).

----

<a id="features"></a>
## Features

- **Very easy to use**.
- Can minify and generate multiple times per page.
- Can be used inside laravel views directly.
- Autogenerates tags for including your JavaScript and CSS files.
- Supports programmatically adding assets on the fly.
- Supports local (**including packages**) or remote assets.
- Prevents from loading duplicated assets.
- Included assets **pipeline** (*concatenate and minify all your assets to a single file*) with URL **timestamps** support.
- Automatically prefixes local assets with a configurable folder name.
- Supports secure (*https*) and protocol agnostic (*//*) links.
- Supports **collections** (*named groups of assets*) that can be nested, allowing assets dependencies definitions.
- Automatically detects type of asset (CSS, JavaScript or collection).
- Allows autoloading by default preconfigured assets and collections.


<a id="frameworks"></a>
Expand All @@ -46,13 +43,13 @@ The library is framework agnostic and it should work well with any framework or

In your Laravel base directory run

composer require "stolz/assets:dev-master"
composer require "xees/assets:dev-master"

Then edit `app/config/app.php` and add the service provider within the `providers` array

'providers' => array(
...
'Stolz\Assets\ManagerServiceProvider'
'Xees\Assets\ManagerServiceProvider'

There is no need to add the Facade, the package will add it for you.

Expand All @@ -63,125 +60,27 @@ There is no need to add the Facade, the package will add it for you.
<a id="views"></a>
### In your views/layouts

To generate the CSS `<link rel="stylesheet">` tags
To minify and output the CSS using `<link rel="stylesheet">` tags

echo Assets::css();
echo Assets::css($assets);

To generate the JavaScript `<script>` tags

echo Assets::js();

<a id="controllers"></a>
### In your routes/controllers

Basically all you have to do to add and asset, no matter if it's CSS or JS, is:

Assets::add('filename');

For more advanced use keep reading ...

Add more than one asset at once

Assets::add(array('another/file.js', 'one/more.css'));

Add an asset from a local package

Assets::add('twitter/bootstrap:bootstrap.min.css');

Note all local assets filenames are considered to be relative to you assets directory so you don't need to provide it every time with `js/file.js` or `css/file.css`, using just `file.js` or `file.css` will be enought.

You may add remote assets in the same fashion

Assets::add('//cdn.example.com/jquery.js'));
Assets::add('http://example.com/style.css'));

If your assets have no extension and autodetection fails, then just use canonical functions

Assets::addCss('asset.css');
Assets::addJs('asset.js');

*(Canonical functions also accept an array of assets)*

If at some point you decide you added the wrong assets you can reset them and start over

Assets::reset(); //Both CSS and JS
Assets::resetCss();
Assets::resetJs();

All methods that don't generate output will accept chaining:

Assets::reset()->add('collection')->addJs('file.js')->css();
To minify and output the JavaScript `<script>` tags

echo Assets::js($assets);

It accepts an array or a single asset.

<a id="configuration"></a>
## Configuration

To bring up the config file run

php artisan config:publish stolz/assets
php artisan config:publish xees/assets

This will create `app/config/packages/stolz/config.php` file that you may use to configure your application assets.
This will create `app/config/packages/xees/config.php` file that you may use to configure your application assets.

If you are using the [non static interface](#nonstatic) just pass an associative array of config settings to the class constructor.

<a id="collections"></a>
### Collections

A collection is a named group of assets, that is, a set of JavaScript and CSS files. Any collection may include more collections, allowing dependencies definition and collection nesting.

Let me use an example to show you how easy and convenient to use they are.

'collections' => array(
'one' => 'one.css',
'two' => ['two.css', 'two.js'],
'external' => ['http://example.com/external.css', 'https://secure.example.com/https.css', '//example.com/protocol/agnostic.js'],
'mix' => ['internal.css', 'http://example.com/external.js'],
'nested' => ['one', 'two'],
'duplicates' => ['nested', 'one.css','two.css', 'three.js'],
),

Using `Assets::add('two');` will result in

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="css/two.css" />
<!-- JS -->
<script type="text/javascript" src="js/two.js"></script>

Using `Assets::add('external');` will result in

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="http://example.com/external.css" />
<link type="text/css" rel="stylesheet" href="https://secure.example.com/https.css" />
<!-- JS -->
<script type="text/javascript" src="//example.com/protocol/agnostic.js"></script>

Using `Assets::add('mix');` will result in

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="css/internal.css" />
<!-- JS -->
<script type="text/javascript" src="http://example.com/external.js"></script>

Using `Assets::add('nested');` will result in

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="css/one.css" />
<link type="text/css" rel="stylesheet" href="css/two.css" />
<!-- JS -->
<script type="text/javascript" src="js/two.js"></script>

Using `Assets::add('duplicates');` will result in

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="css/one.css" />
<link type="text/css" rel="stylesheet" href="css/two.css" />
<!-- JS -->
<script type="text/javascript" src="js/two.js"></script>
<script type="text/javascript" src="js/three.js"></script>

Note even this collection had duplicated assets they have been included only once.

<a id="pipeline"></a>
### Pipeline

Expand Down Expand Up @@ -215,9 +114,6 @@ will produce:
<a id="options"></a>
### Other configurable options

- `'autoload' => array(),`

Here you may set which assets (CSS files, JavaScript files or collections) should be loaded by default.
- `'css_dir' => 'css',`
- `'js_dir' => 'js',`

Expand All @@ -234,61 +130,21 @@ will produce:

You can use the library without using static methods. The signature of all methods is the same described above.

require '/path/to/Stolz/Assets/Manager.php';
require '/path/to/Xees/Assets/Manager.php';

// Configure options
$config = array(
'pipeline' => true,
'collections' => array(...),
...
);

// Load the library
$assets = new \Stolz\Assets\Manager($config);
$assets = new \Xees\Assets\Manager($config);

// Add some assets
$assets->add('style.css')->add('script.js');
$assets->addCss('style.css')->addJs('script.js');

// Generate HTML tags
echo $assets->css(),$assets->js();

----

<a id="samples"></a>
## Sample collections

//jQuery (CDN)
'jquery-cdn' => ['//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'],

//jQuery UI (CDN)
'jquery-ui-cdn' => [
'jquery-cdn',
'//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js',
],

//Twitter Bootstrap (CDN)
'bootstrap-cdn' => [
'jquery-cdn',
'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css',
'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css',
'//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'
],

// Twitter Bootstrap
// Install with: composer require twitter/bootstrap:3.0.*; artisan asset:publish twitter/bootstrap --path=vendor/twitter/bootstrap/dist/
'bootstrap' => [
'jquery-cdn',
'twitter/bootstrap:bootstrap.min.css',
'twitter/bootstrap:bootstrap-theme.min.css',
'twitter/bootstrap:bootstrap.min.js'
],

//Zurb Foundation (CDN)
'foundation-cdn' => [
'jquery-cdn',
'//cdn.jsdelivr.net/foundation/4.3.2/css/normalize.css',
'//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css',
'//cdn.jsdelivr.net/foundation/4.3.2/js/foundation.min.js',
'app.js'
],

10 changes: 5 additions & 5 deletions composer.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
{
"name": "stolz/assets",
"description": "An ultra-simple-to-use assets management library",
"name": "xees/assets",
"description": "A simple laravel assets management library",
"keywords": ["assets", "asset", "css", "js", "javascript", "pipeline", "minify", "laravel", "agnostic"],
"authors": [
{
"name": "Stolz",
"homepage": "https://github.com/Stolz/Assets",
"name": "Xees",
"homepage": "https://github.com/Xees/Assets",
"role": "developer"
}
],
Expand All @@ -16,7 +16,7 @@
},
"autoload": {
"psr-0": {
"Stolz\\Assets": "src/"
"Xees\\Assets": "src/"
}
},
"minimum-stability": "dev",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<?php namespace Stolz\Assets\Facades;
<?php namespace Xees\Assets\Facades;

use Illuminate\Support\Facades\Facade;

Expand All @@ -9,5 +9,5 @@ class Assets extends Facade {
*
* @return string
*/
protected static function getFacadeAccessor() { return 'stolz.assets'; }
protected static function getFacadeAccessor() { return 'xees.assets'; }
}
Loading