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
  • 58 minutes ago
  • 12 years ago

Installs

  • Total 744
  • Win 486
  • Mac 173
  • Linux 85
Oct 11 Oct 10 Oct 9 Oct 8 Oct 7 Oct 6 Oct 5 Oct 4 Oct 3 Oct 2 Oct 1 Sep 30 Sep 29 Sep 28 Sep 27 Sep 26 Sep 25 Sep 24 Sep 23 Sep 22 Sep 21 Sep 20 Sep 19 Sep 18 Sep 17 Sep 16 Sep 15 Sep 14 Sep 13 Sep 12 Sep 11 Sep 10 Sep 9 Sep 8 Sep 7 Sep 6 Sep 5 Sep 4 Sep 3 Sep 2 Sep 1 Aug 31 Aug 30 Aug 29 Aug 28
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