vimfox


Ⅰ. 插件描述

Lightweight live reload plugin for vim

Ⅱ. 基本信息

创建日期:  2013-06-09
使用用户:  1
Github星:  111
插件作者:  Daan Mathot

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加:
Plugin 'dbsr/vimfox'
… 然后在Vim中运行以下命令:
:source %
:PluginInstall

对于Vundle版本 < 0.10.2,请用上面的Bundle替换Plugin。

使用NeoBundle管理器安装

在你的.vimrc下添加:
NeoBundle 'dbsr/vimfox'
… 然后在Vim中运行以下命令:
:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加:
Plug 'dbsr/vimfox'
… 然后在Vim中运行以下命令:
:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令:
cd ~/.vim/bundle
git clone https://github.com/dbsr/vimfox

Ⅳ. 文档说明

vimfox ALPHA

Live web development plugin for vim.

what is vimfox?

Vimfox brings live css, javascript and html editing to vim. This means you
can edit a file in vim and directly see the result without having to refresh
the page in the browser.

This is not my idea. A couple of days ago I was browsing on github and found
browser-connect, a vim-plugin
made by Bogdanp which offers live reloading of css

I was curious about how the plugin worked and after reading up on websockets I
decided to write my own plugin.

installation

  1. Install vimfox using pathogen / vundle or clone the repo directly into
  2. $HOME/.vim directory.
  3. cd to the repo's root and:

        
    `$: ./sh install.sh`
    

*This will download all the required modules using pip and install
them locally in the vimfox-plugin directory. This ensures vimfox will
work in virtualenvs.*

how to use

Add this script to the (html) page you want to work on

<script type='text/javascript' src="http://localhost:9000/vimfox/vimfox.js"></script>

commands

" Start the vimfox server and make vimfox commands available to the buffer.
:VimfoxToggle

" Reload the buffer file without reloading the page in the browser.
:VimfoxReloadFile <force> <fname> <delay>

" Reload the page in the browser.
:VimfoxReloadPage <force> <delay>

" optional arguments:
" <force> boolean => Force reload the file.
" <fname> string  => By default vimfox uses the buffer's filename. Use this
"                    if the file on the server has a different name.
" <delay> float   => The delay in seconds the vimfox.js wil wait before reloading the file.
"                    You can use this if you need to compile a large less / coffee
"                    file to css / js.

autocommands

Vimfox does not include any autocommands. This keeps the vimfox code clean
and the user in control.
You can add your own autocommands to the g:vimfox_autocommands dictionary
where the key is the filetype and the value a list of autocommands.
Vimfox will automaticaly enable those autocommands for buffers where
vimfox is enabled.

" autocommand examples

" first create the dictionary
let g:vimfox_autocommands = {}

" call VimfoxReloadPage after every coffee file write.
let g:vimfox_autocommands['coffee'] = [
  \ "autocmd BufWritePost <buffer> VimfoxReloadPage"
  \]

" call VimfoxReloadFile every time you leave insert mode in a less file.
" The filename argument makes sure vimfox reloads 'foo.css' instead of 
" (the on the server not available) 'foo.less'.
let g:vimfox_autocmmands['less'] = [
    \"autocmd InsertLeave <buffer> sil! w|call LessCSSCompress()|VimfoxReloadFile expand('%:r') . '.css',  1.5"
    \]

options

" host address vimfox server
g:vimfox_host = '127.0.0.1'
g:vimfox_port = 9000

" echo toggle state after VimfoxToggle
g:vimfox_echo_toggle_state = 1

" vimfox autocommands
g:vimfox_autocommands = {}

" vimfox debug mode (stdout + javascript console in browser)
g:vimfox_debug = 0

" hide vimfox status indicator
g:vimfox_hide_status = 0

disclaimer

This plugin has not been thorougly tested (as in has not been tested yet).

contact

Comments and critique always welcome @ dydrmntion AT gmail


Thu Jun 20 21:58:20 CEST 2013

添加新评论