Lib.js

Lib.js = Frontend build tool + lazyload js tool

Getting Started

  gem install zfben_libjs

  libjs new < project_name >

Feature:

  • lazyload css and js files (base on LazyLoad.js)
  • minify css and js files (base on sass and uglifier)
  • support sass, scss, compass and coffeescript files
  • download remote files
  • custom ruby script
  • custom filetype
  • before and after events
  • custom routes

Support Filetype:

  • .css - stylesheet

  • .js - javascript

  • .sass - sass

  • .scss - scss

  • .coffee - coffeescript

  • .rb - ruby

  • .??? - custom filetype

Javascript Example

  // load jquery
  lib.jquery(function(){
    // something use jquery to do
  });

  // load jqueryui and not duplicate load jquery
  lib.jqueryui(function(){
    // something use jqueryui to do
  });

  // and you can load like
  lib('jquery', function(){
    // use jquery to do sth.
  });

  lib('jquery underscore', function(){
    // use jquery and underscore to do sth.
  });

Rails Example

  # Gemfile
  gem 'zfben_libjs'
  # layout.html.erb

  <%= lib %>
  # => <script src="/javascripts/lib.js?12345678"></script>

  <%= lib :home %>
  # => <script src="/javascripts/lib.js?12345678"></script><script>lib('home')</script>

  <%= lib 'home.css' %>
  # => <link rel="stylesheet" href="/stylesheets/home.css?12345678" /><script src="/javascripts/lib.js?12345678"></script>

  <%= lib 'home.js' %>
  # => <script src="/javascripts/home.js?12345678"></script><script src="/javascripts/lib.js?12345678"></script>

Sinatra Example

  helpers Zfben_libjs::Helpers

Custom Filetype Example

# add support_source to config yaml file
support_source:
  - mustache.rb
# mustache.rb
class Zfben_libjs::Mustache < Zfben_libjs::Source
  def after_initialize
    @source = "this['#{File.basename(@filepath, '.mustache')}']=(data)->Mustache.to_html('''#{@source}''', data)"
  end

  def compile
    Zfben_libjs::Coffee.new(:source => @source).compile
  end

  def to_js
    compile
  end

  def minify
    @minified = Zfben_libjs::Js.new(:source => @source).minify
  end
end

Routes

# add routes to config yaml file
routes:
  "#Test_StringRoute": route_string
  "/#Test_RegExpRoute/": route_regexp

More Settings

See https://github.com/benz303/zfben_libjs/blob/master/test.yml

TODO

libjs

  • Make lib() return as defferred object
  • Add ready event

Compile

  • Support Zfben_libjs::Libjs.new.build!(url)
  • Support auto-compile when file changed
  • Auto merge sass and scss to speed up compile
  • Lazyload files to speed up load
  • Add debug mode for javascript
  • * use console.log(filepath)

Web Service

  • Use sinatra as web server
  • UI for control compile