Before asking this question, I read the following two questions in Stack Overflow to avoid duplicate questions:
1) #Render.Scripts in plain .html file - not in .cshtml
2) Rendering the script bundle in a plain HTML page
May I know how to use script bundles in plain html file (something like #Scripts.Render("~/bundles/angular") in cshtml)?
I want to bundle more than one script file (to compress and load them together) and use the bundle in plain html. This bundle is going to be used in more than one html file.
Please advise.
You should use a script minifier/bundler, like https://jscompress.com/. Choose the "Upload Javascript Files" tab, and upload all the scripts you want there. It will produce a single, minified and bundled file, just like ASP.NET would. You can then include that single file in your code just like you wrote.
Related
I work on a project where I only have access to the text editor in CMS, so I create HTML files on local and copy the piece of HTML(content area), CSS and scripts to the CMS editor, is there a way I can use maybe node.js and set up something that can build a file with merged CSS and HTML(content are only) every time I make a change to CSS or HTML.
grunt-processhtml was the answer, I was able to combine CSS, chunk of HTML and JS into one file using this.
I have two markdown documents; A.md and B.md. The A document includes a link to B using the tag (B)[B.md]. That link works great when navigating markdown documents.
Now I want to export all my markdown files to HTML as part of a release documentation package. The issue is that in the exported HTML the link points to B.md when what I really want it to point to is the newly exported B.html.
Anyone have any ideas on how to automatically update links?
I am currently using pandoc to export to html because it has a command line interface and therefore I can script its execution.
Right now my workaround is to update A so that it links to the html version of B, [B](b.html). This allows my html exported documents to work but breaks navigation within the original markdown files. Alternatively I could replace the links myself as part of the script but that sounds painful.
What I am really looking for is a way to export a collection of markdown files as a standalone documentation package.
You can use a simple Lua filter to change the link from .md to .html:
-- file: change-links.lua
function Link (link)
link.target = link.target:gsub('.md$', '.html')
return link
end
Adding the parameter --lua-filter=change-links.lua to your call to pandoc should be all that is needed.
See also this related question.
How do I convert an HTML file with content folder to a self-contained HTML file which can be viewed from anywhere with its images etc.
How can it be done so that it's also editable and stays self-contained, post-edit?
I basically need to make HTML file based documentation which can be viewed from anywhere. Unfortunately it HAS to be HTML, otherwise I would have made PDFs
You can use pandoc, it has an option to create self-contained html files https://pandoc.org/MANUAL.html#option--self-contained.
If you start with html, this is the command.
pandoc in.html --self-contained -o out.html
This tool can do a lot more things, for example, you can also generate html from markdown files or generate pdfs instead.
The most direct way is to convert all asset urls to data: urls. (There are online coverters available that will take a provided asset and produce a data: url from it.)
A possibly simpler way is to convert image and font urls to data: urls while instead inlining scripts and css.
Edit: Possibly of interest: inliner, a Node utility for doing this kind of thing. "Turns your web page to a single HTML file with everything inlined". Also performs a number of minifying optimizations.
I don't know exactly what you're envisioning, but HTML was never meant to be fully self-contained. There may be some loopholes that allow it in the end, but to my knowledge there are no premade tools that do this 'conversion'.
It would require the following things:
Converting all linked style sheets and scripts to inline style sheets and scripts. This means that whenever there's a <script src="http://url.to/foo.js"></script> you'll have to download foo.js and include it as such: <script type="text/javascript"> [this is the content of foo.js] </script>. Something similar applies to CSS and other linked source files.
Downloading all linked media (images mostly, I presume) and converting them to blobs (a service that provides you with a base64 blob you can use within a HTML file is https://www.base64-image.de/). This means replacing <img src="http://url.to/image.jpg" /> with <img src="data:image/png;base64,[converted image data goes here] />.
So there's gonna be some manual labour involved there, but it probably can be done (almost) fully.
Possibly there's a way to accomplish what you're wanting to do another way though, what exactly is your reason for wanting this?
Here's another option: write your documentation in markup, then use a tool such as "Marked 2" (http://marked2app.com) to convert to self-contained html. Works slick. Plus you can go back and edit the markup any time you need to update your documentation, then simply re-export your html file.
I would like to know if a plugin for SublimeText is available to optimise automatically my .css and .js (like http://cleancss.com/) when i save my file ?
Like that, in my html code I have just to link my .min.css instead of .css and it's always updated.
Thx
If you go to Package Control and search for minify you'll get a number of options. It looks like some of them are web-based, and some rely on local compilers. There are also a couple that only do JavaScript, and the rest do JS and CSS.
Good luck!
I work on a very large enterprise web application - and I created a prototype HTML page that is very simple - it is just a list of CSS and JS includes with very little markup. However, it contains a total of 57 CSS includes and 271 javascript includes (crazy right??)
In production these CSS/JS files will be minified and combined in various ways, but for dev purposes I am not going to bother.
The HTML is being served by a simple apache HTTP server and I am hitting it with a URL like this: http://localhost/demo.html and I share this link to others but you must be behind the firewall to access it.
I would like to package up this one HTML file with all referenced JS and CSS files into a ZIP file and share this with others so that all one would need to do is unzip and directly open the HTML file.
I have 2 problems:
The CSS files reference images using URLs like this url(/path/to/image.png) which are not relative, so if you unzip and view the HTML these links will be broken
There are literally thousands of other JS/CSS files/images that are also in these same folders that the demo doesn't use, so just zipping up the entire folder will result in a very bloated zip file
Anyway -
I create these types of demos on a regular basis, is there some easy way to create a ZIP that will:
Have updated CSS files that use relative URLs instead
Only include the JS/CSS that this html references, plus only those images which the specific CSS files reference as well
If I could do this without a bunch of manual work, if it could be automatic somehow, that would be so awesome!
As an example, one CSS file might have the following path and file name.
/ui/demoapp/css/theme.css
In this CSS file you'll find many image references like this one:
url(/ui/common/img/background.png)
I believe for this to work the relative image path should look like this:
url(../../common/img/background.png)
I am going to answer my own question because I have solved the problem for my own purposes. There are 2 options that I have found useful:
Modern browsers have a "Save Page As..." option under the File menu, or in Chrome on the one menu. This, however does not always work properly when the page is generated by javascript
I created my own custom application that can parse out all of the CSS/Javascript resources and transform the CSS references to relative URLs; however, this is not really a good answer for others.
If anyone else is aware of a commonly available utility or something like that which is better than using the browser built in "Save page as..." option - feel free to post another answer.