josephj / assetla

Assetic Wrapper

Assetla

A wrapper for Assetic.

Configuration File

Make modules for your CSS and JavaScript files. These files can be *.css, *.sass, *.coffee, and *.js.

array(
    'output_path' => 'assets',
    'modules' => array(
        'admin_core' => array(
            'css' => array(
                'media/css/admin/reset.css',
                'media/css/admin/text.css',
                'media/css/admin/fluid.css',
                'media/css/admin/core/button.scss', // SCSS
            ),
            'js' => array(
                'media/js/admin/jquery-1.8.1.min.js',
                'media/js/admin/jquery.mousewheel-min.js',
                'media/js/admin/event.coffee', // COFFEE
            ),
        ),
    ),
);
```


## Usage

### General Usage

```php
<?php $assetla = new Assetla('config.php'); ?>
<?php echo $assetla->stylesheet_tags('admin_core'); ?>
<?php echo $assetla->javascript_tags('admin_core'); ?>
```

It will output the following HTML.

```html
<!-- admin_core.css (start) -->
<link type="stylesheet" href="media/css/admin/reset.css"/>
<link type="stylesheet" href="media/css/admin/text.css"/>
<link type="stylesheet" href="media/css/admin/fluid.css"/>
<link type="stylesheet" href="assets/button.css "/> <!-- button.scss -->
<!-- admin_core.css (end) -->
<!-- admin_core.js (end) -->
<script src="media/js/admin/jquery-1.8.1.min.js"></script>
<script src="media/js/admin/jquery.mousewheel-min.js"></script>
<script src="assets/event.js"></script> <!-- event.coffee -->
<!-- admin_core.js (end) -->
```

### Concatenate

Or you can concatenate to single file for less requests.

```php
<?php echo Assetla::stylesheet_tags('admin_core', true); ?>
<?php echo Assetla::javascript_tags('admin_core', true); ?>
```

It will output the following HTML.

```html
<!-- admin_core.css (start) -->
<link type="stylesheet" href="assets/admin_core.css"/>
<!-- admin_core.css (end) -->
<!-- admin_core.js (end) -->
<script src="assets/admin_core.js"></script>
<!-- admin_core.js (end) -->
```

### For Precompiliation

Execute the following command.

```
vendor/assetla/bin/assetla precompile config.php
```

It will do minification, concatenation, and overwriting the configuration tasks.

```php
array(
    'modules' => array(
        'admin_core' => array(
            'css' => 'media/css/admin_core_31a85b.min.css',
            'js' => 'media/js/admin_core_6f5a8a.min.js'
        ),
    ),
);
```

### For Deployment

Currently it only supports S3. You need to provide some information in `config.php`.

```php
return array(
    'deploy' => array( // For S3 deployment
        'key' => '<api-public-key>',
        'secret' => '<api-secret-key>',
        'acl' => '<public-read>',
        'bucket' => '<bucket-name>',
        'path' => '<save-path>'
    ),
    // other settings        
),
```

Similar to precompilation, but it saves file to S3 instead.

````php
array(
    'modules' => array(
        'admin_core' => array(
            'css' => 'https://<bucket-name>.s3.amazonaws.com/<path>/admin_core_31a85b.min.css',
            'js' => 'https://<bucket-name>.s3.amazonaws.com/<path>/admin_core_6f5a8a.min.js'
        ),
    ),
);

Installation

1. Grab the code [email protected]:josephj/assetla.git

2. You need to install several different packages from different package management systems. These steps make sure you could get required compilers (ex. SASS, CoffeeScript, and UglifyJS) installed in local directory.

3. composer install

4. bundle install --path vendor/bundler

5. npm install .

6. Create a writable folder for outputing the compiled files.

   mkdir assets/out
   chmod 777 assets/out
   

7. Set config

   return array(
       'output_path' => 'assets/out',
       'modules' => array(
           'welcome' => array(
               'css' => array(
                   'assets/css/foo.sass',
               ),
               'js' => array(
                   'assets/js/bar.coffee',
               ),
           ),
       ),
   );

8. Sample PHP view file using Assetla:

   <?php
   require 'vendor/autoload.php';
   $assetla = new Assetla('config.php');
   ?>
   <!DOCTYPE html>
   <html>
   <head>
   <meta charset="utf-8">
   <meta name="created" content="2014-09-02">
   <title>Welcome</title>
   <?php echo $assetla->stylesheet_tags('welcome'); ?>
   </head>
   <body>
       <h1>Welcome</h1>
       <div>
          <p>Hello World!</p>
       </div>
       <?php echo $assetla->javascript_tags('welcome'); ?>
   </body>
   </html>

assetla's Issues

Ability to specify output path in module level

Ability to correct background image path in CSS

It would be an issue if we combine CSS files without handling background image path. We need to apply CSSRewriteFilter for that.

Use npm/grunt compilers instead of ruby ones

Replace SASS compiler (vendor/bundler/ruby/2.0.0/bin/sass)

Refactor CLI tool

• CLIMate
• Class Style