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

Installs

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