Giter Club home page Giter Club logo

asset-compiler's Introduction

Asset Compiler

This package will allow you to compile multiple assets into a single file and minify single or compiled assets. Currently supported types are css and javascript.

An additional benefit to this package is that is adds a cache buster.

Files are compiled, minified, and cache busted using the last modified time of the newest file. New files are not compiled every page load, only when a file changes in the compilation.

Installation

Add "bpedroza/asset-compiler": "1.1.*" to your composer.json require array

Configuration

Start by creating a new instance of the AssetCcompiler and give it paths it needs to build your files. The constructor takes arguments for the absolute path to the assets and an http path. The http path can be relative or include the full web address.

$AssetCompiler = new \Bpedroza\AssetCompiler\AssetCompiler('/path/to/my/assets/', '/assets/');

OR

$AssetCompiler = new \Bpedroza\AssetCompiler\AssetCompiler('/path/to/my/assets/', 'http://www.example.com');

Next you can configure the paths to specific assets, debug, and exception behavior.

By default the css folder is assumed to be /css and the javascript folder is assumed to be /js

All configuration options are getters and setters and can be chained when setting. When the parameter is missing, it will return the current configuration value.

// As Setters
$AssetCompiler->config()
        ->cssPath('mycssfolder')
        ->jsPath('myjsfolder');

// As getter
$compiledFolderName = $AssetCompiler->config()->compiledFolder();

Available configuration options

Method Description Default
rootPath The absolute path (set in constructor) null
httpPath The http path (set in constructor) null
cssPath Path relative to root path where your css files live 'css'
jsPath Path relative to root path where your javascript files live 'js'
compiledFolder Name of folder that will be created in both js and css folders for compiled files 'compiled'
debug When in debug, we won't compile or minify items to make it easier to debug. false
ignoreMissing When true, we won't throw exceptions for missing files. false
minify When true, we will minify file contents. true

Usage

Generate single, cache busted, files.

// Single css file
$AssetCompiler->getStyle('test1.css', ['attr1' => 'some value', 'type' => 'text/css']);

// Single js file
$AssetCompiler->getScript('test1.js', ['attr1' => 'some value', 'type' => 'text/javascript']);

// Compiled css file
$AssetCompiler->getStylesMulti(['test1.css', 'test2.css'], 'mycompiledcssfile.css', $attributes = []);

// Compiled javascript file
$AssetCompiler->getScriptsMulti(['test1.js', 'test2.js'], 'mycompiledjsfile.js', $attributes = []);

Output

<link href="/css/test1.css?v=123456789" attr1="some value" type="text/css" rel="stylesheet" />

<script src="/js/test1.js?v=123456789" attr1="some value" type="text/javascript" ></script>

<link href="/css/compiled/mycompiledcssfile.css?v=123456789" rel="stylesheet" />

<script src="/js/compiled/mycompiledjsfile.js?v=123456789" ></script>

Minified Output

<link href="/css/compiled/test1.min.css?v=123456789" attr1="some value" type="text/css" rel="stylesheet" />

<script src="/js/compiled/test1.min.js?v=123456789" attr1="some value" type="text/javascript" ></script>

<link href="/css/compiled/mycompiledcssfile.css?v=123456789" rel="stylesheet" />

<script src="/js/compiled/mycompiledjsfile.js?v=123456789" ></script>

asset-compiler's People

Contributors

bpedroza avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.