I have a simple test jekyll app like so:
index.html is:
<script type="text/javascript" src="/assets/myfile.js"><script>
<p>hi</p>
and the myfile.js files is as follows:
var x = "this is a string";
alert(x + "hi");
I just want to add a plugin so that it can minify the js file before it is written to the _site/assets/myfile.js file
How can i achienve that?
Here's a summary of what I've found while solving this in 2014:
Started with
https://github.com/donaldducky/jekyll-cssminify
Development was going well until it was beat by this project:
http://www.matthodan.com/2012/11/22/jekyll-asset-pipeline.html
...which so far has been my favorite to implement, except it doesn't work now and it looks like development has been halted, so I was forced to turn to
https://github.com/envygeeks/jekyll-assets
...which again, beats #2 but is just a touch trickier to use. Anyway, that's the only one that works, so that's what I'm using now.
There are plugins for HTML and CSS minification with Jekyll, but a search doesn't turn up anything obvious for JS.
However, the source for CSS one above is less than 100 lines and actually uses Juicer to do the minification, which can also do JS, so that plugin could easily be used as a template to implement your own JS minifier (it looks like even just s/css/js/g would be close to working).
I recommend the Jekyll Asset Pipeline gem for this. It supports any language (e.g. Scss, Less, CoffeeScript, Erb, etc.) and has a bunch of features (e.g. asset tagging, compression, gzipping, etc.) that set it apart. It also seems to be the fastest growing Jekyll-related gem these days, which I take to mean that it is gaining traction in the community.
For JS and CSS you can use the Jekyll Asset Bundler It uses the yui-compressor or closure-compiler gems.
For images, I made a drop-in plugin that runs the images through image_optim:
https://gist.github.com/sffc/a828267913591159ab1cc3e1bfde20d7
This one seems fairly updated as compared to other plugins and minifies HTML/XML/CSS/JS Minifier utilising yui-compressor, and htmlcompressor
https://github.com/digitalsparky/jekyll-minifier
Related
In Objective C to build a Mac OSX (Cocoa) application, I'm using the native Webkit widget to display local files with the file:// URL, pulling from this folder:
MyApp.app/Contents/Resources/lang/en/html
This is all well and good until I start to need a German version. That means I have to copy en/html as de/html, then have someone replace the wording in the HTML (and some in the Javascript (like with modal dialogs)) with German phrasing. That's quite a lot of work!
Okay, that might seem doable until this creates a headache where I have to constantly maintain multiple versions of the html folder for each of the languages I need to support.
Then the thought came to me...
Why not just replace the phrasing with template tags like %CONTINUE%
and then, before the page is rendered, intercept it and swap it out
with strings pulled from a language plist file?
Through some API with this widget, is it possible to intercept HTML before it is rendered and replace text?
If it is possible, would it be noticeably slow such that it wouldn't be worth it?
Or, do you recommend I do a strategy where I build a generator that I keep on my workstation which builds each of the HTML folders for me from a main template, and then I deploy those already completed with my setup application once I determine the user's language from the setup application?
Through a lot of experimentation, I found an ugly way to do templating. Like I said, it's not desirable and has some side effects:
You'll see a flash on the first window load. On first load of the application window that has the WebKit widget, you'll want to hide the window until the second time the page content is displayed. I guess you'll have to use a property for that.
When you navigate, each page loads twice. It's almost not noticeable, but not good enough for good development.
I found an odd quirk with Bootstrap CSS where it made my table grid rows very large and didn't apply CSS properly for some strange reason. I might be able to tweak the CSS to fix that.
Unfortunately, I found no other event I could intercept on this except didFinishLoadForFrame. However, by then, the page has already downloaded and rendered at least once for a microsecond. It would be great to intercept some event before then, where I have the full HTML, and do the swap there before display. I didn't find such an event. However, if someone finds such an event -- that would probably make this a great templating solution.
- (void)webView:(WebView *)sender didFinishLoadForFrame:(WebFrame *)frame
{
DOMHTMLElement * htmlNode =
(DOMHTMLElement *) [[[frame DOMDocument] getElementsByTagName: #"html"] item: 0];
NSString *s = [htmlNode outerHTML];
if ([s containsString:#"<!-- processed -->"]) {
return;
}
NSURL *oBaseURL = [[[frame dataSource] request] URL];
s = [s stringByReplacingOccurrencesOfString:#"%EXAMPLE%" withString:#"ZZZ"];
s = [s stringByReplacingOccurrencesOfString:#"</head>" withString:#"<!-- processed -->\n</head>"];
[frame loadHTMLString:s baseURL:oBaseURL];
}
The above will look at HTML that contains %EXAMPLE% and replace it with ZZZ.
In the end, I realized that this is inefficient because of page flash, and, on long bits of text that need a lot of replacing, may have some quite noticeable delay. The better way is to create a compile time generator. This would be to make one HTML folder with %PARAMETERIZED_TAGS% inside instead of English text. Then, create a "Run Script" in your "Build Phase" that runs some program/script you create in whatever language you want that generates each HTML folder from all the available lang-XX.plist files you have in a directory, where XX is a language code like 'en', 'de', etc. It reads the HTML file, finds the parameterized tag match in the lang-XX.plist file, and replaces that text with the text for that language. That way, after compilation, you have several HTML folders for each language, already using your translated strings. This is efficient because then it allows you to have one single HTML folder where you handle your code, and don't have to do the extremely tedious process of creating each HTML folder in each language, nor have to maintain that mess. The compile time generator would do that for you. However -- you'll have to build that compile time generator.
I'm new to *jade* so it's difficult for me to design a web page by it. i need to test the code and see the result continuously.
i want to know is there any way to convert jade to html and viceversa in code editor?
is there any plugin? No matter what code editor but if there is sublime plugin it is better for me.
You could try creating a dedicated Node + Express app with a single view and paste in your jade and check it in a browser.
Jade Syntax Documentation with interactive samples:
http://naltatis.github.com/jade-syntax-docs/
There is a "Jade" package for Sublime Text 2 available using package control. When combined with a decent colour scheme, syntax errors are very obvious.
ST2 package control:
http://wbond.net/sublime_packages/package_control
The current "Jade" bundle / package:
https://github.com/davidrios/jade-tmbundle
Package control's known repositories:
https://github.com/wbond/package_control_channel/blob/master/repositories.json
Online html to jade converters:
http://html2jade.aaron-powell.com/
http://www.htmltojade.com/
jade itself transforms jade files to html automatically. But keep in mind that jade is a templating language with interpreted commands and thus is not a one to one conversion from jade to html.
BTW, there's a tool that do html to jade conversion available here : https://github.com/donpark/html2jade
Probably you can run them from SublimeText
Check prepros from alphapixels. It compiles jade, haml, sass / scss, less and coffee. It watches your file for changes and compiles on real-time, so you can use the code editor of your choice. It works fine for me.
I have a portal that is under a virtual host in Apache. All lot of its .css and .js is generated dynamically by the underlying tomcat web application. What I want to do is inject some of my own .css and .js into the mix before it is served. I think I need something like mod_rewrite but for html.
I know I could try to piggyback onto some resource reference that is used on every page and use mod_rewrite that way, but that is hard to do and I need my css to be applied last.
Tell me there are some magic beans for this. I just need to inject a couple scripts and styles right at </head>.
I haven't used it before, but it looks like mod_ext_filter could do this
By looking at the example, you could try the following Perl script
#!/usr/local/bin/perl -w
use strict;
my $extraCode = "<script src=\"http:/...\"></script>";
while (<STDIN>) {
s/<\/head>/$extraCode<\/head>/i;
print;
}
After I posted this, I noticed someone recommended https://serverfault.com/questions/46449/how-to-inject-html-code-into-every-delivered-html-page. mod_proxy_html and mod_sed looks good
This would be an HTML minifier that skips everything between <% and %>.
Actually, an Open Source HTML minifier would be a good starting place, especially if it already had code to preserve the contents certain blocks like <textarea. It's code might be able to be made to preserve <%%> blocks also.
I am aware that HTML minifiers are less common because that changes more often than JS/CSS and is often dynamically generated, but if the JSP compiler could be made to minify before making its compiled cache copy, it would result in minified HTML.
Also, an ASP minifier would probably be very close to the same thing. And I don't care about custom tags that have meaning to the server. The only stuff that matters to the server (for my company) is in the <%%> blocks.
This question is a bit outdated but an answer with a resource still hasn't made it's way to the posting.
HtmlCompressor makes this very thing possible and quite simply.
You can use it via Java API:
String html = getHtml(); //your external method to get html from memory, file, url etc.
HtmlCompressor compressor = new HtmlCompressor();
String compressedHtml = compressor.compress(html);
Or you can use it via Taglib:
Download .jar file of the current release and put it into your lib/ directory
Add the following taglib directive to your JSP pages:
<%# taglib uri="http://htmlcompressor.googlecode.com/taglib/compressor" prefix="compress" %>
Please note that JSP 2.0 or above is required.
In JSP:
<compress:html removeIntertagSpaces="true">
<!DOCTYPE html>
...
</html>
</compress:html>
Cheers
JSP is transformed to Java code and subsequntly compiled to bytecode. Minifying JSP has no purpose then.
You can process output generated by JSP page by writing custom filter. I have written filter to trim empty lines and unnecessary whitespace from JSP output, unfortunately it's not public. But if you google around, I'm sure you can find servlet filters to remove unneeded stuff from generated HTML.
Have a look at the Trim Filter (http://www.servletsuite.com/servlets/trimflt.htm), which you can simply map in your web.xml.
It will help you to remove whitespace, and can also strip off comments.
From my experience, whitespace occurs a lot in JSPs if you use tags that themselves don't have any output, such a the JSTL C control tags (c:if, c:choose, ...), and then this comes in very handy.
As you are already aware that HTML minification is less common and it also results in errors sometime than getting any benefit out of it. HTML is also dynamically generated content.
On the other hand, there are many better ways to speed up the application front end.
Minimizing HTTP requests
Minifying JS, CSS contents
gzip/deflate contents
Leveraging browser cache
Server Side caching, until resource changes
And many other - http://developer.yahoo.com/performance/rules.html
WebUtilities is a small java library to help speed up J2EE webapp front-end. Below is the link.
http://code.google.com/p/webutilities/
With new 0.0.4 version it does many optimization and results in significant performance boost. Please have a look in case you find it useful.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I am teaching my friend how to make websites. I would like to keep the websites static, so that he does not [yet] have to learn PHP, worry about testing on his Windows machine, worry about the server configuration, security etc. The bad thing is that without some tool support he would have to repeat a lot of code, for example the menu block on each page is almost the same. Is there a simple tool that would help him?
I’d like something that runs on Windows without too much work, ie. without Perl, Cygwin, IIS, PHP and such. (A simple GUI tool or a text editor with some special support for this would be nice.) I’d like something that does not require keeping separate “source” and “build” file versions, ie. the source files with some special markup and the build ones with regular HTML. (I hate to re-make the whole thing after each change in code.) I’d like something free and simple.
Is there such a thing?
Update: I was dreaming about something that would work like this:
$ cat page.html
<h1>A page</h1>
<!-- insert menu -->
<!-- menu ends -->
$ cat menu.tmpl
<ul id="#menu">…</ul>
$ update-templates page.html && cat page.html
<h1>A page</h1>
<!-- insert menu -->
<ul id="#menu">…</ul>
<!-- menu ends -->
$ echo "Moo" > menu.tmpl
$ update-templates page.html && cat page.html
<h1>A page</h1>
<!-- insert menu -->
Moo
<!-- menu ends -->
…only in GUI. BTW: Thanks for the JavaScript solutions. These did not occur to me, but the website has to work even with JS turned off.
Update: As I did not find any existing solution, I’ve written the script as a Google Code project. There are some quirks to be handled (like the different line endings on different systems), but the template substitution stuff works. The script requires Perl, but otherwise all you have to do is to double-click on an icon to get the HTML sources updated.
The easiest would probably be (although it requires a little bit of set up) a web server with server-side includes. It's the easiest form of templates that I can think of, and if you don't want to "build" the html files from some kind of source, then you need something which is actively serving requests.
I don't know if it's standardized, but Apaches SSI looks like this:
<!--#include file="menu.html" -->
Hope that helps.
EDIT:
I was convinced that not having separate source and target/build files it'd be impossible to achieve without an active server. However, as you commented about comment-markers a thought struck me, it shouldn't be to difficult to construct a simple perl-script that includes a file, replacing everything between a start-commment marker and an end-comment marker. You also said you don't want to mess with perl, did that include a prepared perl-script that he just needs to execute?
EDIT 2
A simple few-liner perl script using the /e-regexp modifier could be sufficient, since you're using windows I don't know if you can use backticks like cat $file, so I added a readfile sub.
sub readfile($) {
open(FILE, 'r', shift);
my $buffer;
read (FILE, $buffer, 2 ** 20); # one megabyte maximum.
close(FILE);
return $buffer;
}
sub writefile($$) {
open(FILE, 'w', shift);
print FILE shift;
close(FILE);
}
for my $file(#ARGV) {
my $content = readfile($file);
$content =~ s/\<!--\s+include\s+(\S+\)\s+--\>.*?\<!--\s+end\s+\1\s+--\>/"<!-- include $1 -->".readfile($1)."<!-- end $1 -->"/ge;
writefile($file, $content);
}
Be wary though, that a crash or a bit greedy replacement (perhaps due to a typo) will kill the entire file, and this without maintaining a source file. I'm also unsure if LHS will match correctly with the backreference, I need to look into that.
I've set up a similar thing in the past. I write just my content as a series of HTML files, without worrying about <html>, <head>, <body>, menus, etc - just the content. A PHP script reads all the files in that directory and performs some really simple templating (string substitution) to create the output files. I know you said that you wanted to avoid having source and build versions, but this method is actually really simple since the script finds all your source files automatically. Plus, you can just run the script from the command line (or as a batch file), so you don't need to muck about with setting up a server or anything: just download php and unpack it into a directory. Here's a really rough idea of what I mean:
Template file: page.tpl
<html>
<head> ... whatever ...</head>
<body>
<div id="menu">
Item 1
Item 2
(this could even be generated automatically from the files)
</div>
<div id="content">
<!-- CONTENT -->
</div>
</body>
</html>
Content page src/page1.txt:
<p>This is my page content.</p>
PHP Script pseudocode:
$template = get_contents(page.tpl)
for each of the .txt files in the src directory {
$c = get_contents($file)
write(string_replace("<!-- CONTENT -->", $c, $template)) into page1.html
}
Running the script:
$ php script.php
Of course, this would work with any language of your choosing.
It's a bit of a work-around.
You can use JavaScript includes, and include a local file. You'd have to insert the HTML via JavaScript into the right places in the document though. Learning how to do this may bot be a bad idea in itself. Escaping quotes in the include file may be a pain in the butt though.
File:
<p id='moo'></p>
<script type="text/javascript" src="moo.js"></script>
moo.js:
$('moo').innerHTML="hello world"
(I'm using Prototype shortcuts)
If you are willing to spend some money then Adobe Dreamweaver has some pretty nice template functionality that works about like you describe.
Is there something wrong with good old copy and paste to get the common elements from one page to another? Or better yet, make a simple text file that has all the common elements already arranged in it and then when he wants to make a new page, just copy that file and rename the copy.
Hitchhiking on the apache suggestion: I think Windows has a "personal" IIS server that you can install. Put in just enough javascript to fetch the repeated block on each page and update the inner html on a pasted placeholder tag.
Probably want to give him a nice CSS file and include line to paste, as well.
install tomcat :-)
If that's palatable, use no java code, just give your friend the magic recipe to put the include call in the "magic" html files with the funny jsp suffixes???
OK, that's about the same as setting up PHP, isn't it.
If you want something to be generated, you're probably going to need some software to do it. I don't know what your "pain threshold" is.