Wikia

Vim Tips Wiki

Changes: Auto compile Javascript with Closure

Edit

Back to page

m (Reverted edits by 187.194.41.234 (talk | block) to last version by JohnBot)
Line 1: Line 1:
  +
{{TipNew
  +
|id=1657
  +
|previous=1656
  +
|next=1658
  +
|created=June 28, 2010
  +
|complexity=basic
  +
|author=[[User:Sternebrau|Sternebrau]]
  +
|version=7.0
  +
|subpage=/201006
  +
|category1=Compiler
  +
|category2=
  +
}}
  +
This tip describes a simple way to automatically compile Javascript files using [http://code.google.com/closure/ Google Closure]. The compiled results are saved to a different file, for example, <code>filename.js</code> saves as both <code>filename.js</code> and <code>filename.min.js</code>.
   
/*
+
===The regular way===
* FBModal 1.0.0 - jQuery Plugin
+
*Edit .js file
* http://www.rrpowered.com/FBModal
+
*Save .js file
* Copyright (C) 2010 Barrett Palmer (http://www.rrpowred.com).
+
*Link it in .html file
* Permission is granted to copy, distribute and/or modify this document
+
*Compile .js file
* under the terms of the GNU Free Documentation License, Version 1.3
+
*Link compiled version in .html file
* or any later version published by the Free Software Foundation;
+
*Edit .js file
* with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
+
*Save .js file
* A copy of the license is included in the section entitled "GNU
+
*Forget to compile it
* Free Documentation License"
+
*Become frustrated because the compiled version is still linked in .html file
*
 
*
 
* FBModal is a FaceBook replica modal dialog
 
*
 
* only one modal dialog can be created at a time.
 
*
 
 
*
 
* @example $(".YOURDIV").fbmodal({options});
 
*
 
* FBModal default options
 
*
 
* title: "YOUR TITLE HERE", Dialog title text
 
* cancel: "Cancel", Cancel button text
 
* okay: "Okay", Okay button text
 
* okaybutton: true, show the ok button
 
* cancelbutton: true, Show the cancel button
 
* buttons: true, Show the buttons
 
* opacity: 0.0, The opacity value for the overlay div, from 0.0 - 100.0
 
* fadeout: true, When dialog is closed fade out
 
* overlayclose: true, Allow click on overlay to close the dialog?
 
* modaltop: "30%", Position from top of page 0% - 100% or 0px - 99999px
 
* modalwidth: "400" The width for the dialog container
 
* });
 
*
 
* SFBModal has been tested in the following browsers:
 
* - IE 8
 
* - Firefox 2, 3
 
* - Safari 3, 4
 
* - Chrome 1, 2
 
*
 
* @name FBModal
 
* @type jQuery
 
* @requires jQuery v1.4.2
 
* @cat Plugins/Windows and Overlays
 
* @author Barrett Palmer (http://www.rrpowered.com)
 
* @version 1.0.0
 
*
 
*/
 
(function($){
 
$.fn.fbmodal = function(options){
 
   
//Default values
+
===Using this tip===
var defaults = {
+
*Edit .js file
title: "FB Modal",
+
*Save .js file
cancel: "Cancel",
+
*Link compiled version in .html
okay: "Okay",
+
*Edit .js file
okaybutton: true,
+
*Save .js file
cancelbutton: true,
+
*Test (because it's automatically compiled!)
buttons: true,
 
opacity: 0.0,
 
fadeout: true,
 
overlayclose: true,
 
modaltop: "30%",
 
modalwidth: ""
 
};
 
 
var options = $.extend(defaults, options);
 
 
var fbmodalHtml=' \
 
<div id="fbmodal" > \
 
<div class="popup"> \
 
<table> \
 
<tbody> \
 
<tr> \
 
<td class="tl"/><td class="b"/><td class="tr"/> \
 
</tr> \
 
<tr> \
 
<td class="b"/> \
 
<td class="body"> \
 
<div class="title">\
 
</div> \
 
<div class="container">\
 
<div class="content">\
 
</div> \
 
<div class="footer"> \
 
<div class="right">\
 
<div class="button_outside_border_blue" id="ok">\
 
<div class="button_inside_border_blue" id="okay">\
 
</div>\
 
</div>\
 
<div class="button_outside_border_grey" id="close">\
 
<div class="button_inside_border_grey" id="cancel">\
 
</div>\
 
</div>\
 
</div>\
 
<div class="clear">\
 
</div>\
 
</div> \
 
</div>\
 
</td> \
 
<td class="b"/> \
 
</tr> \
 
<tr> \
 
<td class="bl"/><td class="b"/><td class="br"/> \
 
</tr> \
 
</tbody> \
 
</table> \
 
</div> \
 
</div>';
 
   
var preload = [ new Image(), new Image() ]
+
==Auto compile==
$('#fbmodal').find('.b:first, .bl, .br, .tl, .tr').each(function() {
+
Add this to your [[vimrc]], while changing the path in "cpa" to suit your system:
preload.push(new Image())
+
<source lang="vim">
preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1')
+
autocmd BufWriteCmd *.js :call CompileJS()
})
+
function! CompileJS()
var dat=this.html();
+
if &modified
$("body").append(fbmodalHtml);
+
write
$('#fbmodal .content').
+
let fn = expand('%:p')
append('<div class="loading"><img src="loading.gif"/></div>');
+
let pn = expand('%:p:h')
$('#fbmodal').css("top",options.modaltop);
+
let fnm = expand('%:r.js')
if(options.okaybutton == false || options.buttons == false){
+
let cpa = '/home/username/closure/compiler.jar'
$('#fbmodal #ok').hide();
+
execute "! java -jar " . cpa . " --js=" . fn . " --js_output_file=" . pn . "/" . fnm . ".min.js"
}
+
endif
if(options.cancelbutton == false || options.buttons == false){
+
endfunction
$('#fbmodal #close').hide();
+
</source>
}
+
$('#fbmodal .title').append(options.title);
+
==Alternative using {{help|prefix=no|:compiler}}==
$('#fbmodal #okay').append(options.okay);
+
$('#fbmodal #cancel').append(options.cancel);
+
This procedure defines a closure compiler plugin that may be used rather than the above.
$('#fbmodal .content').append(dat).css("width",options.modalwidth);
+
$('#fbmodal .loading').remove();
+
Put the following in <code>.vim/compiler/closure.vim</code>:
$("body").append('<div id="fbmodal_overlay" class="fbmodal_hide"></div>');
+
$('#fbmodal_overlay').addClass("fbmodal_overlay").fadeTo(0,options.opacity);
+
<source lang="vim">
fbWidth();
+
if exists("current_compiler")
$(window).bind("resize", function(){
+
finish
fbWidth();
+
endif
});
+
function fbWidth(){
+
let current_compiler = "closure"
var windowWidth=$(window).width();
+
var fbmodalWidth=$("#fbmodal").width();
+
if exists(":CompilerSet") != 2
var fbWidth=windowWidth / 2 - fbmodalWidth / 2;
+
" older Vim always used :setlocal
$("#fbmodal").css("left",fbWidth);
+
command -nargs=* CompilerSet setlocal <args>
}
+
endif
if(options.close == true){
+
if(options.fadeout == true){
+
CompilerSet makeprg=java\ -jar\ /home/username/closure/compiler.jar\ --js_output_file=%<.min.js\ --js\ %
$("#fbmodal").fadeOut( function(){
+
CompilerSet errorformat=%E%f:%l:\ %m,%-Z%p^,%-C%.%#,%-G%.%#
$("#fbmodal").remove();
+
</source>
$('#fbmodal_overlay').removeClass("fbmodal_overlay");
+
});
+
===Using this tip===
}else{
+
*Edit .js file
$("#fbmodal").remove();
+
*Set compiler: <code>:compiler closure</code>
$('#fbmodal_overlay').removeClass("fbmodal_overlay");
+
*Save .js file
}
+
*<code>:make</code>
}
+
*Fix bugs (<code>:cope</code>, <code>:cn</code>, etc), repeat.
if(options.overlayclose == true){
+
*Link compiled version in .html
var overlay="ok, #close, .fbmodal_hide"
+
*Test (because it's compiled while checking for errors!)
}else{
+
var overlay="ok, #close"
+
One could add the following to one's [[vimrc]] to automatically set the proper compiler, and to automatically invoke <code>:make</code> after saving a file, opening the quickfix window if there are any errors:
}
+
$("#"+overlay).click( function(){
+
<pre>
if(options.fadeout == true){
+
autocmd FileType javascript compiler closure
$("#fbmodal").fadeOut( function(){
+
autocmd BufWritePost *.js make!
$("#fbmodal").remove();
+
autocmd BufWritePost *.js cwindow
$('#fbmodal_overlay').removeClass("fbmodal_overlay");
+
</pre>
});
+
}else{
+
Note the use of <code>make!</code> instead of <code>make</code> to avoid jumping to the first error automatically. This could be annoying when make is automatically invoked!
$("#fbmodal").remove();
+
$('#fbmodal_overlay').removeClass("fbmodal_overlay");
+
Then the process is:
}
+
*Edit .js file
});
+
*Save .js file
}
+
*Fix bugs (<code>:cope</code>, <code>:cn</code>, etc), repeat.
})(jQuery);
+
*Link compiled version in .html
  +
*Test (because it's automatically compiled!)
  +
  +
==Comments==
  +
*Could be expanded to other file types.

Revision as of 11:23, September 15, 2012

Tip 1657 Printable Monobook Previous Next

created June 28, 2010 · complexity basic · author Sternebrau · version 7.0


This tip describes a simple way to automatically compile Javascript files using Google Closure. The compiled results are saved to a different file, for example, filename.js saves as both filename.js and filename.min.js.

The regular way

  • Edit .js file
  • Save .js file
  • Link it in .html file
  • Compile .js file
  • Link compiled version in .html file
  • Edit .js file
  • Save .js file
  • Forget to compile it
  • Become frustrated because the compiled version is still linked in .html file

Using this tip

  • Edit .js file
  • Save .js file
  • Link compiled version in .html
  • Edit .js file
  • Save .js file
  • Test (because it's automatically compiled!)

Auto compile

Add this to your vimrc, while changing the path in "cpa" to suit your system:

autocmd BufWriteCmd *.js :call CompileJS()
function! CompileJS()
  if &modified
    write
    let fn = expand('%:p')
    let pn = expand('%:p:h')
    let fnm = expand('%:r.js')
    let cpa = '/home/username/closure/compiler.jar'
    execute "! java -jar " . cpa . " --js=" . fn . " --js_output_file=" . pn . "/" . fnm . ".min.js"
  endif
endfunction

Alternative using :compiler

This procedure defines a closure compiler plugin that may be used rather than the above.

Put the following in .vim/compiler/closure.vim:

if exists("current_compiler")
  finish
endif
 
let current_compiler = "closure"
 
if exists(":CompilerSet") != 2
  " older Vim always used :setlocal
  command -nargs=* CompilerSet setlocal <args>
endif
 
CompilerSet makeprg=java\ -jar\ /home/username/closure/compiler.jar\ --js_output_file=%<.min.js\ --js\ %
CompilerSet errorformat=%E%f:%l:\ %m,%-Z%p^,%-C%.%#,%-G%.%#

Using this tip

  • Edit .js file
  • Set compiler: :compiler closure
  • Save .js file
  • :make
  • Fix bugs (:cope, :cn, etc), repeat.
  • Link compiled version in .html
  • Test (because it's compiled while checking for errors!)

One could add the following to one's vimrc to automatically set the proper compiler, and to automatically invoke :make after saving a file, opening the quickfix window if there are any errors:

autocmd FileType javascript compiler closure
autocmd BufWritePost *.js make!
autocmd BufWritePost *.js cwindow

Note the use of make! instead of make to avoid jumping to the first error automatically. This could be annoying when make is automatically invoked!

Then the process is:

  • Edit .js file
  • Save .js file
  • Fix bugs (:cope, :cn, etc), repeat.
  • Link compiled version in .html
  • Test (because it's automatically compiled!)

Comments

  • Could be expanded to other file types.

Around Wikia's network

Random Wiki