I have config in project .properties
file.pages =dashboard/**/*.html
in dashboard/index.html i have
<!-- //-beg- concat_js -->
<script src="../js/plugins.js"></script>
<script src="../js/base64.js"></script>
<script src="../js/toastr.js"></script>
<script src="../js/jquery.h5validate.js"></script>
<script src="../js/jquery.maskedinput.js"></script>
<script src="js/script.js"></script>
<!-- //-end- concat_js -->
But I am getting the build output as
<script src="js/c1212c4.js"></script>
but file is generated in
../js/c1212c4.js
You've got two separate script directories that don't have a child/parent relationship (js/vendor, for example). You can configure it to work that way by editing the build.xml, but we didn't design it to do so out of the box. It's basically because the regular expression that does the replace captures the directory based on the path to script.js in the source but other operations can be based on dir.js (which is what I'm assuming is happening here) or other operations (the concatenation, for example, just follows file system links to pull in the files to concatenate.) Basing the build script on a default h5bp install (one js directory with children), we're covered, but with this configuration it's not straightforward.
To solve your problem, pick one directory or edit the build.xml to point to your output directory.
Related
With node and browserify it's easy to manage js dependencies by just buttoning it all up into a bundle.js file and including that in the parent html.
What I'm wondering is how do you guys manage libs like bootstrap?
They download just fine to node_modules but how do you get them into your html files or asset folder?
Do you just reference them straight from node_modules? Have a task copy them in? Etc?
Caveat, I was hoping to do this without the browserify-css plugin because I want to keep my css and js separate.
I personally have a Gulp / Grunt workflow setup in which I included my js/css modules and then it automatically do all the important task and at the end I have only one css and js file. Then I import them to HTML.
I suggest you to make task for gulp or grunt which will check for changes in the folder that you decide ( where download of libraries will be ). If there is a change - it will automatically copy the .css files into another working directory.
I hope I understand what you want correctly.
i have created a little python script that allows me to import files(.js, .css, .younameit) from a directory to the html.
before:
<html>
<head>
<!-- {SVN_AUTO_IMPORT type:.js; dir:../tsc_out; exclude:; template:<script src="%PATH"</script>;} -->
</head>
after:
<html>
<head>
<script src="../tsc_out/script1.js"></script>
<script src="../tsc_out/script2.js"></script>
<script src="../tsc_out/script3.js"></script>
<script src="../tsc_out/script4.js"></script>
<script src="../tsc_out/script5.js"></script>
</head>
https://github.com/seven-jerry/html-importer
I'm trying out Grunt and have a question about including javascript files in dev and later stages. For clarification: the minify, concatenation, etc is not the problem here - just the output/replacement.
In the dev stage I want to include javascript libraries and files individual - for debugging, maybe just because I did so all time and somehow I don't like them to be concatenated in dev. So in I want the following output in my HTML file when developing:
<script src="js/lib-1.js"></script>
<script src="js/lib-2.js"></script>
<script src="js/lib-3.js"></script>
...
And then for production or staging I would like to have grunt output:
<script src="js/all-files-in-one.js"></script>
How to achieve this the simplest way?
You might want to take a look at the grunt-usemin plugin (https://github.com/yeoman/grunt-usemin). Here's a simple example.
Basically, if I have some javascript files I want concatenated into a single file (or sets of javascript files that I want concatenated into single files per set), I can put the script tags that reference those files inside "build" blocks.
<!-- build:js assets/js/foobar.js -->
<script src="./assets/js/foo.js"></script>
<script src="./assets/js/bar.js"></script>
<!-- endbuild -->
<!-- build:js assets/js/bazbuz.js -->
<script src="./assets/js/baz.js"></script>
<script src="./assets/js/buz.js"></script>
<!-- endbuild -->
Now when I run a grunt build that includes the 'useminPrepare' and 'usemin' tasks, those script tags in my index.html will be replaced with this:
<script src="assets/js/foobar.js"></script>
<script src="assets/js/bazbuz.js"></script>
The example and docs explain how you can configure this and use it for other assets, like css.
I'm creating a web project that and i got confused when i saw this in my head tag:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
The last two lines are making imports into my app, but I've no files named ccs inside Content directory, and it comes worst when I have no directory named bundles, but incredibly it works!
Someone could to explain it to me?
PS.:
Directories structure:
CSS
|
|->bootstrap.css
|->bootstrap.min.css
|->Site.css
and I found a file named Modernizr inside Scripts directory.
To my knowledge, in some versions of .NET MVC (using Visual Studio), you (or someone else) can setup a BundleConfig.csfile in your project. When you open the file ((mine is located in App_Start > BundleConfig.cs), you'll see bundle registrations. This is a .NET bundler that includes various groups of files.
Depending on your app, it can be useful to create groups or bundles of files that are dependent upon one another, but can easily be included or omitted from a _Layout file for optimization.
Here's an example of one of our bundles for our company editor (which by it's name, is all the scripts we need for our company editor, and nothing else):
bundles.Add(
CreateScriptBundle("~/bundles/crm/companyeditor")
.Include("~/Scripts/app/CRM/CompanyEditor/commonEvents.min.js")
.IncludeDirectory("~/Scripts/app/CRM/CompanyEditor", "*.min.js", false)
.Include("~/Scripts/app/RFQOffering/RFQs.min.js")
.Include("~/Scripts/app/RFQOffering/editSubscriptions.min.js")
.Include("~/Scripts/app/Quotes/sentQuotesEditorView.min.js")
);
So instead of including a <script src=""></script> for each of those files, we created a bundle and just use the #Scripts.Render("~/bundles/crm/companyeditor") in our _Layout file for the company editor (in our case).
It's calling the files included in that particular bundle which is declared inside the BundleConfig class in the App_Start folder.
In that particular case The call to #Styles.Render("~/Content/css") is calling "~/Content/site.css"
You can read this document for more understanding about #Styles.Render() and #Scripts.Render() methods.
In app.html:
<body>
{{> index}}
</body>
<template name="index">
...
<script src="https://www.gstatic.com/swiffy/v5.2/runtime.js" type="text/javascript" />
<script src="animation.js" type="text/javascript" />
...
</template>
animation.js is inside /public along with all the html and jpeg's etc for a static site.
When I navigate to the app root, it all works right except that the Swiffy animation just doesn't show up. Perhaps something to do with Meteor not just serving JS from the /public directory? How can I fix this?
When I navigate to the very same code stored as /public/index.html, the animation shows up.
Note: Swiffy is just a way to automatically convert Flash animations into .JS that is run by the Swiffy runtime.
Client JS libraries should be placed in the client directory. This will make it available to meteor for inclusion into the minified app.
For more information see http://docs.meteor.com/#structuringyourapp
You can put your library to /client/compatibility directory. But you put there, all pages include your library. If you want some pages include your javascript you must use ext package. For example https://atmosphere.meteor.com/package/external-file-loader
I'd like to include JS from a CDN in Meteor before including my own client scripts so that the client scripts can depend on it.
...
<script type="text/javascript" src="https://ajax.googleapis.com/..."></script>
...
<script type="text/javascript" src="/client/..."></script>
...
I tried including the script via *.html file and between <head> tags. But it seems that header content from *.html files will always be appended to the end of the HTML header, no matter where I place it in the file hierarchy (e.g. placing the file in a lib folder or sorting it alphabetically before client JS files won't help).
Any ideas how I could include JS from a CDN before client scripts without having to build a smart package?
Assuming you don't need to load these files before the Meteor packages, create a JS file which is loaded before any of the others. Meteor loads files in alphabetical order so it must be the first file loaded. To that end, naming it aaLoadCDN.js should suffice. Dynamically load the CDN scripts by adding a script src element to the document head:
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript'); // optional
script.setAttribute('src', 'url/to/the/cdn/script.js');
document.getElementsByTagName('head')[0].appendChild(script);
Here are some real-world Meteor packages loading scripts from CDNs:
snapsvg
Font-Awesome (CSS).
You can append the script after the template is rendered. So your script will load only after every other line has been loaded. For example if you directly add a jquery plugin to your template html file, you'll get "jquery not found" error. But this approach prevents that:
Template.Main.onRendered(function () {
$('head').append('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.js"></script>');
});
There's also an abandoned package called meteor-external-fileloader that gives an example using Stripe.js. It hasn't been maintained since September 2013, so be careful.