Giter Club home page Giter Club logo

closure-sprockets's Introduction

Closure Sprockets

Sprockets preprocessor for Google's Closure tools + Closure-templates (soy) compiler + Closure stylesheets (gss) compiler.

Integrating with Rails 3

If you want to use closure as your Javascript library in Rails 3, add this gem to your Gemfile:

gem 'closure-sprockets'

The gem ships with a Railtie which will automatically register a Closure preprocessor. From here, two more steps:

Javascripts

// in one of your javascript files
goog.require('goog.dom');

function sayHello() {
  newHeader = goog.dom.createDom('h1', {}, 'Hello world!');
  goog.dom.appendChild(document.body, newHeader);
};

window.onload = sayHello;

You can also add a name.soy template in your assets folder, and it will be automatically compiled to Javascript for you! Ex:

/** hello.soy */

{namespace examples.simple}

/**
 * Says hello to the world.
 */
{template .helloSoy}
  Hello from Soy!
{/template}
var soy = goog.dom.createDom('h1', {'style': 'background-color:#EEE'}, examples.simple.helloSoy());
goog.dom.appendChild(document.body, soy);

That's it! Point your browser at your page and you should have a hello world greeting from Google Closure, preprocessed by the Rails 3 Asset Pipeline and without any external Python dependencies or dynamic Javascript loading.

Stylesheets

You can use also closure stylesheets in .gss files

/** style.gss **/

@def BG_COLOR              rgb(235, 239, 249);

@def DIALOG_BORDER_COLOR   rgb(107, 144, 218);
@def DIALOG_BG_COLOR       BG_COLOR;

body {
  background-color: BG_COLOR;
}

.dialog {
  background-color: DIALOG_BG_COLOR;
  border: 1px solid DIALOG_BORDER_COLOR;
}

GSS files will be compiled automatically to CSS:

body {
  background-color: #ebeff9;
}
.dialog {
  background-color: #ebeff9;
  border: 1px solid #6b90da;
}

Optional configuration

If you decided to put your closure-library directory somewhere other than vendor/assets, then you'll have to update your environment config with the right path:

config.closure.lib = 'vendor/assets/path/to/closure-library'

Using Closure Compressor for Minification

Closure also provides its own Javascript compressor. If you wish to use it, pull in the closure-compiler gem:

# in your Gemfile
gem 'closure-compiler'
# in your environment configuration
config.assets.js_compressor = Closure::Compiler.new

If you are not using the closure compiler, then you may want to disable the dynamic deps.js loading. To do so, add the following snippet in application.html.erb above the javascript_include tag:

    <script type="text/javascript">
      var CLOSURE_NO_DEPS = true;
    </script>

License

(MIT License) - Copyright (c) 2011 Ilya Grigorik

closure-sprockets's People

Contributors

dogenpunk avatar guilleiguaran avatar igrigorik avatar

Stargazers

 avatar

Watchers

 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.