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

Webloader

by rozsahegyi 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
  • 7 years ago
  • 3 hours ago
  • 7 years ago

Installs

  • Total 743
  • Win 486
  • OS X 172
  • Linux 85
Dec 14 Dec 13 Dec 12 Dec 11 Dec 10 Dec 9 Dec 8 Dec 7 Dec 6 Dec 5 Dec 4 Dec 3 Dec 2 Dec 1 Nov 30 Nov 29 Nov 28 Nov 27 Nov 26 Nov 25 Nov 24 Nov 23 Nov 22 Nov 21 Nov 20 Nov 19 Nov 18 Nov 17 Nov 16 Nov 15 Nov 14 Nov 13 Nov 12 Nov 11 Nov 10 Nov 9 Nov 8 Nov 7 Nov 6 Nov 5 Nov 4 Nov 3 Nov 2 Nov 1 Oct 31
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 1 0 0
OS X 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