I have a page in my MVC application with only one JavaScript file in it. Should I bundle this file or keep it as is?
My current code
#section scripts{
<script src="~/Scripts/Custom/Home/Index.js" type="text/javascript"></script>
}
I would still suggest you put that file through bundling, advantages you get:
It will get minified for production
Should you add more javascript files later, it will be just a matter of adding those to a bundle, without ever making changes to your HTML template
Related
I'm currently attempting to refactor my repeated JavaScript code from my xyz.scala.html files into a separate main.js file, which can then be linked to using something like the below (from my scala.html files):
<script src='#routes.Assets.at("javascripts/main.js")'><script>
And using the below in my conf/routes file:
GET /js/*file controllers.Assets.at(path = "/public/javascripts", file)
Having Googled around I'm struggling to find a simple way of using JS from a file in my Play Framework application and setting up the conf/routes file.
Does anyone know a simple way of getting this to work?
Public assets folders
Record in the routes file
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
Script loading in twirl template
<script src="#routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
I am new in asp.net mvc and I am trying to include .js files in my project but I could not access it on my browser. Like it.
#Scripts.Render("~/bundles/responds.js")
#Scripts.Render("~/bundles/jquery-1.11.3.min.js")
#Scripts.Render("~/bundles/jssor.slider-22.0.15.mini.js")
<script type="text/javascript">
</script>
Anyone can help me, how can I add these files in mvc project? These files exists in Scripts folder.
You can manually add a .js file to a view with the following example code
#model YourNameSpace.ViewModels.YourViewModel
#Scripts.Render("~/Scripts/yourScript.js")
If you want the files to be bundled & you can add them in App_Start/BundleConfig.cs
Example:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle(("~/bundles/customBundle").Include(
"~/Scripts/yourScript.js",
"~/Scripts/anotherScript.js");
}
You can render your script files for the whole application in the ~/Views/Shared/_Layout.cshtml file or any master page by adding the following code
#Scripts.Render("~/bundles/customBundle")
You can inspect the .js file by browsing to the root of your application & add the path of the .js file or bundle (for this example)
http://localhost:9654/bundles/customBundle
http://localhost:9654/Scripts/yourScript.js
I have solved my problem by just drag and drop script files from Scripts folder to at desired place in Index.cshtml and Visual studio auto generate below code.
<script src="~/Scripts/jquery-1.11.3.min.js"></script>
<script src="~/Scripts/jssor.slider-22.1.5.mini.js"></script>
Which includes the script files in asp.net MVC.
You can use C# code to calculate & generate the right file address as follows:
<script type="text/javascript" src='#Url.Content("~/Content/vendor/jquery/jquery.min.js")'></script>
This pattern can use in *.cshtml files.
Setup:
Django, currently using Django-Compressor for CSS
Nested Templates using Django templatetags to nest
RequireJS to pull in JS modules.
Example:
base.html:
<html>
...
<script src="/static/js/libs/require.js">
...
{% include "body.html" %}
...
<script>
require(['/static/js/base']);
</script>
</html>
body.html
<h1> This is the body </h1>
<script>
require(['/static/js/body']);
</script>
So with this setup none of my JS files are being compressed. I can't use Django-Compressor because it won't utilize requireJS correctly, nor can I find anything that will help in this case.
Some ideas I have come up with have been to minify the JS files in place, or to run gulp/grunt beside Django, but that would make local development ugly.
Have you considered using django-pipeline?
https://django-pipeline.readthedocs.org/en/latest/usage.html
With it's template tag to pull in JS files, you may be able to replace both RequireJS and Django-Compressor.
I'm new to mvc 4 and I'm wondering where I should put my custom javascript files. By 'custom', I mean scripts that are only used in specific Views or PartialViews.
I use Areas too, so that adds up the complexity. I was thinking about placing my scripts in the Script folder at the root of the application and then in a Custom sub-folder.
How would I then reference the scripts in my Views ? Should I use custom Bundles ?
i think that adding your scripts to a custom folder in your scripts folder is the way to go.
you can create a new bundle in the appstart\BundleConfig.cs file as follows:
bundles.Add(new ScriptBundle("~/bundles/custom").Include(
"~/Scripts/Custom/myCustom.js",
"~/Scripts/Custom/myCustom2.js"));
and than add the bundle to your view like this:
#section scripts{
#Scripts.Render("~/bundles/custom")
}
this will be rendered at the #RenderSection("scripts", required: false) line on your layout file.
OR
To call only one specific script for your view you can do:
#section scripts{
<script src="~/Scripts/Custom/myCustom.js"></script>
}
note: you can drag the script file from the solution explorer into the section. you don't have to write the entire path.
EDIT - seems important so i copied this from my last comment:
in order to use minification you need to add your script to the bundle table and either add BundleTable.EnableOptimizations = true; to the BundleConfig file or set <compilation debug="false" in your web.config file.
You could organize your scripts in the Scripts folder:
~/Scripts/Home/foobar.js
~/Scripts/Admin/baz.js
...
Should I use custom Bundles ?
Sure, you could bundle the scripts that always go together.
when I put goog.require in to a HTML file..
base.js file definitely write script tag like
<script type="text/javascript" src="{{STATIC-FILE}}closure-library/closure/goog/dom/dom.js"></script>
However, when I put a dependency file generated by depswriter.py..
it does not put any file required by other files.
so.. my question is..
what's the difference between goog.require and goog.addDependency?
can goog.addDependency replace goog.require? I mean, without any goog.require sentences, goog.addDependency can serve as goog.require?
please help me.. I spent more than 4 hours figuring out why the hell goog.addDependency does not incorporate dependency files into a HTML file and failed!!!..
goog.require:
Implements a system for the dynamic resolution of dependencies that works in parallel with the BUILD system.
goog.addDependency
Adds a dependency from a file to the files it requires.
You don't have to use goog.addDependency. It's only used by the dependency generator scripts. You need to put deps.js in the same directory than base.js. Then put a script tag for loading base.js in your head section, followed by a script tag with your requires. Like that:
<script src="../base.js"></script>
<script>
goog.require('goog.events.EventType');
goog.require('goog.ui.AdvancedTooltip');
</script>
Have a look at the Closure demo: http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/index.html