I want to include javascript files from whole folder and subfolders into a single ASP.NET Bundle. The purpose of this is to load all files from that folder at once.
The idea is to create an angular application and load all app files with a single bundle.
Is this idea ok ?
The problem I have is that the Script tags added to HTML don't respect the subfolder strucutre of my application and the files can't be found.
Bundle config:
bundles.Add(new ScriptBundle("~/bundles/app").IncludeDirectory(
"~/app", "*.js", true));
Folder Structure
app
controller/appMenu.js
modules/navigation.js
app.js
On client side the included tags look like this:
<script src="/app/appMenu.js"></script>
<script src="/app/navigation.js"></script>
I think it might be related to this:
http://aspnetoptimization.codeplex.com/workitem/105
What version of the System.Web.Optimizations assembly are you using?
Related
I have a legacy Angular JS application and now working in tandem with few new Angular 5 components using upgrade module. Following this post here
Currently, I need to include all my AngularJs code into my index.html.
But, I want to include all JS files (more than 200) in my angular-cli.json in scripts section like below:
"scripts": [
"../appjs/**"
],
But, ng-build gives me error no such file or directory:\appjs\**.
How to include all the files in the folder in on go avoiding to include all the files one by one.
Here is the image of the folder structure.
Please guide. Thanks.
Unfortunately the scripts: [] attribute doesn't accept globbing patterns. This is alluded to in the documentation:
scripts: An object containing JavaScript script files to add to the
global context of the project. The scripts are loaded exactly as if
you had added them in a tag inside index.html.
So the alternative is to use a powershell script or DOS cmd to list the files and output them to the screen/file and then add all the necessary quotes to paste them into the scripts attribute in the config file.
I have a homepage(index.html) which is a static html with its assets, and after user login at the homepage, it will go to the second page(home.html) which is a react app.
My folder structure is like this:
--build/
----index.html
----home.html
----home.bundle.js
----assets/
------index.css
------index.js
--src/
----static/
------index.html
------home.html
------assets/
--------homepage.css
--------homepage.js
----components/
------home.js
I want to use webpack to :
1. minify the assets of index.html
2. bundle the index.js app.
My questions are:
1. What about I bundle all the assets of index.html rather than just uglify? Is this a better approach?
2. How to use Webpack to fulfill the above 2 requirements? I know how to bundle a pure SPA but don't know how to deal with this mixed type.
Thanks
You can't uglify an html file (otherwise i will learn something today ;-)) but you can uglify your javascript to reduce the size and allow a better performance when they re loaded in the browser.
So what you can do for starting, it is too bundle all your javascript in one bundle file that you will insert manually in your html file. You can do it because in general we give a static name (e.g bundle.js) for the bundle generated by webpack.
Hope that s answering your question?
Romain
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.
In my project I have directory with partials of javascript files.
In this directory I have files like:
_register.js, _user.js, _cart.js, _common.js
and I wanna make some full files
user.js must have _user.js, _common.js, _register.js
product.js must have _user.js, _common.js, _cart.js
and this should be compiled to 2 directories
dev/ and prod/
in dev I must have normal javascript and in prod I must have minified versions, how to get it with grunt?
I am trying to learn Derby.js and I am having a lot of trouble. I know I can include packages such as jQuery through npm and add it to the node_modules folder, but this isn't quite what I want to do. I want to be able to include these files like I do in normal HTML.
So I want to do something like <Head:> <script src="js/jquery.js"></script>. This does not work though because it cannot find the js directory. I expect this has something to do with the way node.js runs an app and that the app itself will not hold the js directory.
Any help would be appreciated!
Derby offers the Script: tag:
<Scripts:>
<script type="text/javascript" src="/components/jquery/jquery.js"></script>
The components directory is because of the usage of bower. Put the components directory into the public directory. According to the express FAQ, the static routes search below the given directory (which is public in derby's example application). Configure bower to put the files under public/components (Choose bower install directory).
The public directory is configured at lib/server/index.js: .use(gzippo.staticGzip(publicPath, {maxAge: ONE_YEAR})), where publicPath is configured above to path.join(root, 'public').
Be aware that the "idea behind the inline script is that it runs immediately, before any of the external scripts are loaded. This should only be used in rare cases where the script should run before the page is displayed in the browser, such as sizing something to the window or autofuocusing an element in browsers that don't support the "autofocus" attribute." Nate Smith in the derby google group.
Inline scripts should be placed in inline.js, located in the same directory as the application's index.js.
If you require jQuery to do something on the loaded page, following code snipped worked at my side (Firefox, Chrome) in inline.js:
window.onload = function() {
alert($(this));
}