Blame view

sources/3rdparty/kriswallsmith/assetic/docs/en/concepts.md 4.32 KB
6d9380f96   Cédric Dupont   Update sources OC...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
  In order to use the Assetic OOP API you must first understand the two central
  concepts of Assetic: assets and filters.
  
  ### What is an Asset?
  
  As asset is an object that has content and metadata which can be loaded and
  dumped. Your assets will probably fall into three categories: Javascripts,
  stylesheets and images. Most assets will be loaded from files in your
  filesystem, but they can also be loaded via HTTP, a database, from a string,
  or virtually anything else. All that an asset has to do is fulfill Assetic's
  basic asset interface.
  
  ### What is a Filter?
  
  A filter is an object that acts upon an asset's content when that asset is
  loaded and/or dumped. Similar to assets, a filter can do virtually anything,
  as long as it implements Assetic's filter interface. 
  
  Here is a list of some of the tools that can be applied to assets using a
  filter:
  
   * CoffeeScript
   * CssEmbed
   * CssMin
   * Google Closure Compiler
   * jpegoptim
   * jpegtran
   * Less
   * LessPHP
   * optipng
   * Packager
   * pngout
   * SASS
   * Sprockets (version 1)
   * Stylus
   * YUI Compressor
  
  ### Using Assets and Filters
  
  You need to start by creating an asset object. This will probably mean
  instantiating a `FileAsset` instance, which takes a filesystem path as its
  first argument:
  
      $asset = new Assetic\Asset\FileAsset('/path/to/main.css');
  
  Once you have an asset you can begin adding filters to it by calling
  `ensureFilter()`. For example, you can add a filter that applies the YUI
  Compressor to the contents of the asset:
  
      $yui = new Assetic\Filter\Yui\CssCompressorFilter('/path/to/yui.jar');
      $asset->ensureFilter($yui);
  
  Once you've added as many filters as you'd like you can output the finished
  asset to the browser:
  
      header('Content-Type: text/css');
      echo $asset->dump();
  
  ### Asset Collections
  
  It is a good idea to combine assets of the same type into a single file to
  avoid unnecessary HTTP requests. You can do this in Assetic using the
  `AssetCollection` class. This class is just like any other asset in Assetic's
  eyes as it implements the asset interface, but under the hood it allows you to
  combine multiple assets into one.
  
      use Assetic\Asset\AssetCollection;
  
      $asset = new AssetCollection(array(
          new FileAsset('/path/to/js/jquery.js'),
          new FileAsset('/path/to/js/jquery.plugin.js'),
          new FileAsset('/path/to/js/application.js'),
      ));
  
  ### Nested Asset Collections
  
  The collection class implements the asset interface and all assets passed into
  a collection must implement the same interface, which means you can easily
  nest collections within one another:
  
      use Assetic\Asset\AssetCollection;
      use Assetic\Asset\GlobAsset;
      use Assetic\Asset\HttpAsset;
  
      $asset = new AssetCollection(array(
          new HttpAsset('http://example.com/jquery.min.js'),
          new GlobAsset('/path/to/js/*'),
      ));
  
  The `HttpAsset` class is a special asset class that loads a file over HTTP;
  `GlobAsset` is a special asset collection class that loads files based on a
  filesystem glob -- both implement the asset interface.
  
  This concept of nesting asset collection become even more powerful when you
  start applying different sets of filters to each collection. Imagine some of
  your application's stylesheets are written in SASS, while some are written in
  vanilla CSS. You can combine all of these into one seamless CSS asset:
  
      use Assetic\Asset\AssetCollection;
      use Assetic\Asset\GlobAsset;
      use Assetic\Filter\SassFilter;
      use Assetic\Filter\Yui\CssCompressorFilter;
  
      $css = new AssetCollection(array(
          new GlobAsset('/path/to/sass/*.sass', array(new SassFilter())),
          new GlobAsset('/path/to/css/*.css'),
      ), array(
          new YuiCompressorFilter('/path/to/yuicompressor.jar'),
      ));
  
  You'll notice I've also applied the YUI compressor filter to the combined
  asset so all CSS will be minified.
  
  ### Iterating over an Asset Collection
  
  Once you have an asset collection you can iterate over it like you would a
  plain old PHP array:
  
      echo "Source paths:
  ";
      foreach ($collection as $asset) {
          echo ' - '.$asset->getSourcePath()."
  ";
      }
  
  The asset collection iterates recursively, which means you will only see the
  "leaf" assets during iteration. Iteration also includes a smart filter which
  ensures you only see each asset once, even if the same asset has been included
  multiple times.
  
  Next: [Defining Assets "On The Fly"](define.md)