I need some help with organizing js files in VS.
So my problem is, that VS(MVC) put all js files by default into the script directory, but i also have js created by me, in a sub directory, like this:
Now my problem is that when i open the scripts folder, the js files installed by NuGet take 2-3 screens in length, so i either have to open/close it every time, or scroll trought like there is no tomorrow.
So my question is, is there any good solutions to it? Like moving all the files into a subdirectory, and change every bundles, and NuGet config, or should i create a separate script directory for my custom js files? Any good ideas?
You can place and use as many subdirectories you wish for your own scripts.
With the help of Bundle.IncludeDirectory all your scripts will be added to the bundle without having to define multiple bundles.
Concerning nuget I don't think you can (re)place those scripts at a location of your choice.
See Stackoverflow: Include all files in a folder in a single bundle
Sadly you cannot change the default folder that NuGet downloads the files. Is the author of the NuGet package that decides where it will get installed.
An alternative is to use Bower. With it you can control where files get downloaded (look at this question).
Or, as you said, move your own javascripts to another folder and forget about the default.
Related
I am making an NPM package for the front-end and I want to know what the best file structure to use is. I have one code.js file and will have one code.min.js file. Should I have these two files in the root directory? In a dist folder? In a src folder? What is the best practice for this file structure - specifically on the front-end?
you should separate your source from your development compiled files, as much as possible.
For example on my projects, all minificated files, should be in a dist folder. The non minificated files, are not getting on the server. You wouldn't want a customer to accidentally use a non-min css and get 0.2 sec for extra load, would you? :)
Also, I do strongly recommend you to google this: "recommended structure [add framework name here]"
code.min.js is certainly the minified version of code.js. You simply need to add code.min.js to your project.
For node projects, you can insert directly the cdn link into your code or when you create a file ( js, css or image), it goes to the public folder.
I am noticing that Aurelia is building to the scripts directory in my CLI project. Is it safe to add this directory to .gitignore, or is there some reason to track changes to 'scripts' in Git?
You can safely add scripts to the .gitignore file.
Aurelia CLI uses the scripts folder to store the generated scripts (vendor-bundle.js and app-bundle.js).
vendor-bundle.js is for libraries (e.g. aurelia-binding, bluebird and jquery).
app-bundle.js is for all your HTML, CSS and JS files from the src folder combined in one JS file.
Because these files are renewed every time you run au run or au bundle, there is no need for them to be in version control.
Depending on what functions the scripts have, you might want to leave them in the repo.
E.g.: you add a new member to your team, and said scripts might be required for your project to work. In which case, if they're not in the repo, he will bother one of you to transfer them to his computer.
Edit: If the scripts are automatically generated every time you build the project, or if they are downloaded via a packet-manager, then there is no need to leave them in the repository.
If this is the case, it's a safe bet you can add the folder to the .gitignore. If this is not the case, then it might be better to leave them in the repository.
This all depends on your project, where you are putting your scripts and how the frameworks work.
After the Ng2 release announced, I wanted to put hands into it and I wanted to use redux with it.
Actually, I m having some troubles when installing redux-thunk, because it doesn't have a d.ts file associated inside of the module.
Before the last release of angular-cli, we were adding some stuff in a file called "angular-cli.build", that has disappeared now.
This way, I dont know at all how to add my external modules inside of my project if they doesn't contain d.ts files.
I m pretty sure that I have to deal with the anular-cli.json file, but I don't know how.
Clearly, I need to install third party libs that are not typescript (directly) compatible
Does anybody help me ?
It's possible to link external modules/libs in angular-cli.json - app[0]/scripts array. Just specify a relative path to the JS file and it gets linked into the index.html.
Imagine I've just used bower install angular-date-range-picker to install a plugin I want in the root directory of my project.
Now typically all of my js files (angular project) are sitting in a folder called js on on the root directory of the project.
Here's where I feel I'm missing something. How do I include my nice new plugin into my project without tracing back through every dependency the bower command installed? I typically include all my scripts on the index.html with tags. I've copied the plugin js file out of the bower_components folder and into my js folder (which I now feel is wrong).
If this is an acceptable way to link to plugins then should I be linking directly to the bower_components folder and how do I include all of that plugin's dependencies without literally writing a script tag for each one? (And how do I know what it depends on, there are other plugins in that bower_components folder for instance).
Apologies if this question doesn't make any sense, I'm obviously missing some very important workflow knowledge and I don't know how to phrase the question to find want I want with Google.
You should be writing a script tag for each one. In most cases, check the corresponding github repo to see what dependency libraries are needed. In addition to this, a hint to see what file you should be referencing in your script tag will have an extension of .min. .min is a minified version of the library that removes whitespace and replaces large variable names.
Once your application is ready for production, there are a couple things you can do.
You may want to move to a Content Delivery Network (CDN) instead of referencing your files locally. The advantage of this is you'll have a reliable host hosting your library files.
Another option is to use either Grunt or Gulp, which has the ability to combine all of your dependancy files into one file. The advantage of this is having a much quicker load time of loading one file instead of multiple.
Content Delivery Network - Wikipedia
Grunt - Homepage
Gulp - Homepage
Usually it's configured something like this:
<!-- build:js ${contextRoot}/app/assets/scripts/modules.min.js -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/select2/select2.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
...
<!-- endbuild -->
to include script into index.html. Then during build process some grunt/gulp (grunt-usemin, for example) plugins can replace the entire section between <!-- build: --> comments with minified version of the files.
As said before, you can use Grunt with grunt-injector, it's been specially made for that and can be used to automatically inject bower dependencies into your index.html, as well as your other js/css files (you will need the wiredep dependency).
You will no longer have to worry about your files injection.
I created an empty MVC4 application. It doesn't contain the Scripts folder or any of the javascript files.
I need some of those js files.
How do I add them to my project? I can add a new folder, and download/add each JS file individually, but there has to be a better way. I know VS has them somewhere....
Example:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
~/Scripts doesn't exist. Is there anyway that I can just import the folder with the default JS files?
Use NuGet. NuGet will correctly place JavaScript dependent frameworks into the ~\Scripts directory.
Right click on References->Manage NuGet Packages.
I used NuGet in my Project to pull down jQuery 1.9.1 as a dependency into my ASP.NET MVC4 Solution.
I verified that this brought in the following into my ~\Scripts directory:
jquery-1.9.1-intellisense.js
jquery-1.9.1.js
jquery-1.9.1.min.js
jquery-1.9.1.min.map
Here is my Solution Explorer:
This is a clean way to manage your default scripts (such as jQuery, knockout, or modernizr) via VS.NET and NuGet.
What I ended up doing was creating a new Internet application and just going into the project files and copying them over to the empty project.
There has to be a better way so leaving the question open for a while.
Create non empty project (it will contain all the scripts you need), then just copy them to your empty project into "Scripts" folder and take a look into few places how to include them into the project:
Global.asax
App_Start\BundleConfig.cs
That's all you need to do. Thanks & hope this helps!