Code Monkey home page Code Monkey logo

swcombineplugin's Introduction

swCombinePlugin

This plugin combines javascript and stylesheet files into optimized files.

How it works ?

The plugin read all view.yml files and generates the correct combined files :

  • stylesheets
  • javascript

The plugin can also generate packages from a list of files. This feature allows you to create a common set of files for your website, and include specific assets for a view.

Benefits

  • Combine files and optimizations are performed when the application is deployed
  • The view cache file generates the correct path to the combined files, so there is not computation at runtime.

Available optimizers

  • Global

    • swPassDriver : do nothing, use this if you want to combine your files with no optimizations
  • Javascript

    • swDriverGoogleClosureCompilerApi : google closure algorithm (remote)
    • swDriverGoogleClosureCompilerJar : google closure algorithm (local, require java)
    • swDriverJSMin : JSMin algorithm
    • swDriverJSMinPlus : JSMin+ algorithm
    • swDriverYuiJs : YUI compressor (local, requires java)
  • Stylesheet

    • swDriverCssmin : Css min algorithm
    • swDriverMinifyCssCompressor : Minify Css Compressor algorithm
    • swDriverYuiCss : YUI compressor (local, requires java)
    • swDriverLessphp : Lessphp Less css implementation

Install

  • edit ProjectConfiguration.class.php by adding the requirement and enable the plugin

     [php] 
     require_once(dirname(__FILE__).'/../plugins/swCombinePlugin/lib/config/swCombineViewConfigHandler.class.php');
     
     class ProjectConfiguration extends sfProjectConfiguration
     {
       public function setup()
       {
    
          $this->enablePlugins(array(
             // your plugins
             'swCombinePlugin'
          ));
        }
     }
    
  • edit your app.yml and add an optional version value

     [yaml]
     swToolbox:
       swCombine:
         # the version number can be used to force load of new files from the media server
         #   you can configure a never ending expired time on your media server
         #   if the version is never updated, media will be never reloaded ...
         version: 3
    
  • add a config_handlers.yml inside APP/config

     modules/*/config/view.yml:
       # put sfViewConfigHandler to restore the default symfony config handler
       # class: sfViewConfigHandler
       class: swCombineViewConfigHandler 
       param:
        configuration:
          javascript:
            public_path:  /sw-combine/%SF_APP%
            private_path: %SF_WEB_DIR%/sw-combine/%SF_APP%
            combine:  swCombineJavascript
            driver:   swDriverJSMinPlus
            filename: %s.js                         # %s will by replace by the combined name
            exclude:
              - /js/jQuery/jquery.1.2.6.js
              - /js/jQuery/ui-1.5.3/jquery.ui.all.js
              - /js/jQuery/offset.js
              - /js/jQuery/jquery.form-defaults.js
              - /js/jQuery/jquery.timers-1.2.js
              - /js/jqModal/jqModal.js
              - /js/scrollTo/jquery.scrollTo-min.js
              - /js/main.js
            packages:
              common:
                auto_include: true                 # this will include the package on ALL pages
                files:
                  - /js/jQuery/jquery.1.2.6.js
                  - /js/jQuery/ui-1.5.3/jquery.ui.all.js
                  - /js/jQuery/offset.js
                  - /js/jQuery/jquery.form-defaults.js
                  - /js/jQuery/jquery.timers-1.2.js
                  - /js/jqModal/jqModal.js
                  - /js/scrollTo/jquery.scrollTo-min.js
                  - /js/main.js
    
          stylesheet:
            public_path:  /sw-combine/%SF_APP%
            private_path: %SF_WEB_DIR%/sw-combine/%SF_APP%
            combine:  swCombineStylesheet
            driver:   swDriverCssmin
            filename: %s.css                        # %s will by replace by the combined name
            exclude:                                # this will include the package on ALL pages
              - /css/main.css
              - /css/draft/ui-theme.css
              - /css/mg-theme.css
              - /css/print.css
            packages:
              common:
                auto_include: true
                files:
                  - /css/main.css
                  - /css/draft/ui-theme.css
                  - /css/mg-theme.css
    
  • clear your cache

     ./symfony cc
    
  • combine css and js with

     ./symfony sw:combine frontend
     ./symfony sw:combine backend
    
  • update your templates files to use these helpers :

     use_helper('swCombine')
     sw_include_stylesheets()
     sw_include_javascripts()
     sw_combine_debug()
    

Packages

You can include packages into the view.yml, just add these lines into view.yml:

    all:
      sw_combine:
        include_packages:
          javascripts: [common]
          stylesheets: [common]

    myViewSuccess:
      sw_combine:
        include_packages:
          javascripts: [extra_code]

Assets version (optional)

This plugin has a hidden gem : asset versioning. When css files are combined, a version number is added to all externals references. This feature must be use with helper functions sw_include_stylesheets() and sw_include_javascripts(), this two helpers add the version number on each declared assets.

The asset version format is : ASSET_FILE?_sw=ASSET_VERSION

What does it mean ?

You can configure a long time expired value on your server by using simple regular expression.

(.*)\?_sw=(.*) => expired in 1 month.

Doing so, the user agent will not do any extras requests to the webserver.

Defining the asset version

  • edit your app.yml file by adding these lines

     swToolbox:
       swCombine:
         version: 42
    
  • clear your cache

      ./symfony cc
    
  • regenerate the combined css and js files with

      ./symfony sw:combine frontend
      ./symfony sw:combine backend
    

Troubleshooting

how can I set a media type for each package ?

for now this feature is not implemented.

css @import not loaded

the import syntax must be : @import url('yourfile.css') or @import url("yourfile.css").

this is not valid : @import url(yourfile.css)

Class swCombineViewConfigHandler not found

make sure the swCombineViewConfigHandler class is included in the ProjectConfiguration.class.php file

    require_once(dirname(__FILE__).'/../plugins/swCombinePlugin/lib/config/swCombineViewConfigHandler.class.php');

    class ProjectConfiguration extends sfProjectConfiguration
    [...]

unable to read the asset : /home/[...]/yourfile.css

All your css and js files must be relative, like /js/asds.js and /css/toto.css, the bad magic from symfony does not work

my background pictures get stripped out

The plugin uses css paths and sf_web_dir to find pictures, if the pictures do not exist then the plugin set none instead of url(non_existant_background), to avoid 404 requests on the webserver

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.