No edit summary |
JohnBeckett (talk | contribs) 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=== |
||
− | /* |
||
+ | *Edit .js file |
||
− | * FBModal 1.0.0 - jQuery Plugin |
||
+ | *Save .js file |
||
− | * http://www.rrpowered.com/FBModal |
||
+ | *Link it in .html file |
||
− | * Copyright (C) 2010 Barrett Palmer (http://www.rrpowred.com). |
||
+ | *Compile .js file |
||
− | * Permission is granted to copy, distribute and/or modify this document |
||
+ | *Link compiled version in .html file |
||
− | * under the terms of the GNU Free Documentation License, Version 1.3 |
||
+ | *Edit .js file |
||
− | * or any later version published by the Free Software Foundation; |
||
+ | *Save .js file |
||
− | * with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. |
||
+ | *Forget to compile it |
||
− | * A copy of the license is included in the section entitled "GNU |
||
+ | *Become frustrated because the compiled version is still linked in .html file |
||
− | * Free Documentation License" |
||
− | * |
||
− | * |
||
− | * 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){ |
||
+ | ===Using this tip=== |
||
− | //Default values |
||
+ | *Edit .js file |
||
− | var defaults = { |
||
+ | *Save .js file |
||
− | title: "FB Modal", |
||
+ | *Link compiled version in .html |
||
− | cancel: "Cancel", |
||
+ | *Edit .js file |
||
− | okay: "Okay", |
||
+ | *Save .js file |
||
− | okaybutton: true, |
||
+ | *Test (because it's automatically compiled!) |
||
− | cancelbutton: true, |
||
− | 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>'; |
||
+ | ==Auto compile== |
||
− | var preload = [ new Image(), new Image() ] |
||
+ | Add this to your [[vimrc]], while changing the path in "cpa" to suit your system: |
||
− | $('#fbmodal').find('.b:first, .bl, .br, .tl, .tr').each(function() { |
||
+ | <source lang="vim"> |
||
− | preload.push(new Image()) |
||
+ | autocmd BufWriteCmd *.js :call CompileJS() |
||
− | preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1') |
||
+ | function! CompileJS() |
||
− | }) |
||
+ | if &modified |
||
− | var dat=this.html(); |
||
+ | write |
||
− | $("body").append(fbmodalHtml); |
||
− | + | let fn = expand('%:p') |
|
+ | let pn = expand('%:p:h') |
||
− | append('<div class="loading"><img src="loading.gif"/></div>'); |
||
+ | let fnm = expand('%:r.js') |
||
− | $('#fbmodal').css("top",options.modaltop); |
||
+ | let cpa = '/home/username/closure/compiler.jar' |
||
− | if(options.okaybutton == false || options.buttons == false){ |
||
+ | execute "! java -jar " . cpa . " --js=" . fn . " --js_output_file=" . pn . "/" . fnm . ".min.js" |
||
− | $('#fbmodal #ok').hide(); |
||
− | + | endif |
|
+ | endfunction |
||
− | if(options.cancelbutton == false || options.buttons == false){ |
||
+ | </source> |
||
− | $('#fbmodal #close').hide(); |
||
+ | |||
− | } |
||
+ | ==Alternative using {{help|prefix=no|:compiler}}== |
||
− | $('#fbmodal .title').append(options.title); |
||
+ | |||
− | $('#fbmodal #okay').append(options.okay); |
||
+ | This procedure defines a closure compiler plugin that may be used rather than the above. |
||
− | $('#fbmodal #cancel').append(options.cancel); |
||
+ | |||
− | $('#fbmodal .content').append(dat).css("width",options.modalwidth); |
||
+ | Put the following in <code>.vim/compiler/closure.vim</code>: |
||
− | $('#fbmodal .loading').remove(); |
||
+ | |||
− | $("body").append('<div id="fbmodal_overlay" class="fbmodal_hide"></div>'); |
||
+ | <source lang="vim"> |
||
− | $('#fbmodal_overlay').addClass("fbmodal_overlay").fadeTo(0,options.opacity); |
||
+ | if exists("current_compiler") |
||
− | fbWidth(); |
||
+ | finish |
||
− | $(window).bind("resize", function(){ |
||
+ | endif |
||
− | fbWidth(); |
||
+ | |||
− | }); |
||
+ | let current_compiler = "closure" |
||
− | function fbWidth(){ |
||
+ | |||
− | var windowWidth=$(window).width(); |
||
+ | if exists(":CompilerSet") != 2 |
||
− | var fbmodalWidth=$("#fbmodal").width(); |
||
+ | " older Vim always used :setlocal |
||
− | var fbWidth=windowWidth / 2 - fbmodalWidth / 2; |
||
+ | command -nargs=* CompilerSet setlocal <args> |
||
− | $("#fbmodal").css("left",fbWidth); |
||
+ | endif |
||
− | } |
||
+ | |||
− | if(options.close == true){ |
||
+ | CompilerSet makeprg=java\ -jar\ /home/username/closure/compiler.jar\ --js_output_file=%<.min.js\ --js\ % |
||
− | if(options.fadeout == true){ |
||
+ | CompilerSet errorformat=%E%f:%l:\ %m,%-Z%p^,%-C%.%#,%-G%.%# |
||
− | $("#fbmodal").fadeOut( function(){ |
||
+ | </source> |
||
− | $("#fbmodal").remove(); |
||
+ | |||
− | $('#fbmodal_overlay').removeClass("fbmodal_overlay"); |
||
+ | ===Using this tip=== |
||
− | }); |
||
+ | *Edit .js file |
||
− | }else{ |
||
+ | *Set compiler: <code>:compiler closure</code> |
||
− | $("#fbmodal").remove(); |
||
+ | *Save .js file |
||
− | $('#fbmodal_overlay').removeClass("fbmodal_overlay"); |
||
+ | *<code>:make</code> |
||
− | } |
||
+ | *Fix bugs (<code>:cope</code>, <code>:cn</code>, etc), repeat. |
||
− | } |
||
+ | *Link compiled version in .html |
||
− | if(options.overlayclose == true){ |
||
+ | *Test (because it's compiled while checking for errors!) |
||
− | var overlay="ok, #close, .fbmodal_hide" |
||
+ | |||
− | }else{ |
||
+ | 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: |
||
− | var overlay="ok, #close" |
||
+ | |||
− | } |
||
+ | <pre> |
||
− | $("#"+overlay).click( function(){ |
||
+ | autocmd FileType javascript compiler closure |
||
− | if(options.fadeout == true){ |
||
+ | autocmd BufWritePost *.js make! |
||
− | $("#fbmodal").fadeOut( function(){ |
||
+ | autocmd BufWritePost *.js cwindow |
||
− | $("#fbmodal").remove(); |
||
+ | </pre> |
||
− | $('#fbmodal_overlay').removeClass("fbmodal_overlay"); |
||
+ | |||
− | }); |
||
+ | 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! |
||
− | }else{ |
||
+ | |||
− | $("#fbmodal").remove(); |
||
+ | Then the process is: |
||
− | $('#fbmodal_overlay').removeClass("fbmodal_overlay"); |
||
+ | *Edit .js file |
||
− | } |
||
+ | *Save .js file |
||
− | }); |
||
+ | *Fix bugs (<code>:cope</code>, <code>:cn</code>, etc), repeat. |
||
− | } |
||
+ | *Link compiled version in .html |
||
− | })(jQuery); |
||
+ | *Test (because it's automatically compiled!) |
||
+ | |||
+ | ==Comments== |
||
+ | *Could be expanded to other file types. |
Revision as of 11:23, 15 September 2012
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.