ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Webloader

by laszlo-r ST2

Updates css/less on a page live as you type, or when saving js/html/php.

Details

  • 2013.05.22.17.31.05
  • github.​com
  • github.​com
  • 11 years ago
  • 46 minutes ago
  • 11 years ago

Installs

  • Total 744
  • Win 486
  • Mac 173
  • Linux 85
Apr 25 Apr 24 Apr 23 Apr 22 Apr 21 Apr 20 Apr 19 Apr 18 Apr 17 Apr 16 Apr 15 Apr 14 Apr 13 Apr 12 Apr 11 Apr 10 Apr 9 Apr 8 Apr 7 Apr 6 Apr 5 Apr 4 Apr 3 Apr 2 Apr 1 Mar 31 Mar 30 Mar 29 Mar 28 Mar 27 Mar 26 Mar 25 Mar 24 Mar 23 Mar 22 Mar 21 Mar 20 Mar 19 Mar 18 Mar 17 Mar 16 Mar 15 Mar 14 Mar 13 Mar 12
Windows 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Mac 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Linux 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

Readme

Source
raw.​githubusercontent.​com

Webloader - a Sublime Text 2 plugin

Updates css/less live as you type, or reloads the page when saving js/html/php.

Uses websockets, works without a webserver, with multiple pages or files at once. You can run javascript on a page directly from Sublime, define custom actions when you edit/save/load, or add more file extensions. Nothing else to install but the plugin.

Still very much in development, but suggestions and fixes are welcome.

How to use:

  • install with Package Control: ctrl-shift-p, Package Control: Install Package, Webloader
  • restart Sublime, and go to the plugin's directory:
    • windows: userfolder\AppData\Roaming\Sublime Text 2\Packages\Webloader
    • os x: ~/Library/Application Support/Sublime Text 2/Webloader
    • linux: ~/.config/sublime-text-2/Webloader
  • if you have a local webserver, copy the demo directory under your webroot (if you don't, skip this)
  • open demo/index.html in a browser (if no webserver, open it as file://)
  • edit demo.css with Sublime, and see the changes on the page as you type
  • edit index.html, add some text, save it - this should refresh the page
  • if you used a webserver, try editing demo.less, it should update live too!

Used in your projects:

  • in one line: install the plugin, and include webloader.js on your page (if you use .less files, add less.js too)
  • webloader.js works standalone, no js framework necessary (less.js is optional; tested with less-1.3.3)
  • non-localhost websites:
    • if the page is not on your machine, or sees you as a different ip than localhost/127.0.0.1/::1
    • define your ip: <script src='webloader.js?server=192.168.0.100:9000'></script>
    • and you may have to enable this port in your firewall
  • check out the settings in the Packages/Webloader/Webloader.sublime-settings file:
    • server: if you want to change the above port
    • clients: if you do not trust your lan, or opened the above port to the wide internet
    • save_parsed_less: if you want to enable converting .less to .css on save
    • watch_events: if you want to add or remove file types
    • sites: if you use virthosts, symlink directories to your docroot, or similar
  • you can refresh the browser from Sublime with F5 (use ctrl-shift-j to select between multiple pages)
  • you can run javascript on a page directly from Sublime with ctrl-shift-j
  • you can send commands to the server with ctrl-shift-c (currently only supports stop/restart/start)
  • if you feel like hacking around, you can add custom actions to webloader.js (or even webloader.py):
    • the setup_commands and setup_callbacks show the default actions, feel free to customize these
    • you can mess around with the code however you like for your own purposes, but you can't distribute it

Future plans:

  • more polished codebase, as I'm still changing it around daily
  • simpler and easier customization and actions
  • I may release under a less restrictive license later, when I feel it's ready

Contact and terms:

Credits:

  • plugin code on the sublime API and standard python library
  • uses less.js for compiling .less files