I have a custom javascript file for my project. But I have read that we should always use minified version because it's efficient. So everytime I make a change in my Custom.js file, I go to online tool convert my New custom.js file and delete my old Minified Custom JS file from my project and replace it with new one(minified one). Is there any good way to handle this situation. Kindly note that in no where in my project I am referring to the actual Custom.Js file. I have added only the reference to the Minified version.
IDE: Visual Studio Community Edition Free
(2017)
Bundling and Minification is a default feature from MVC4. you just need to be implement in your bundle config file.
BundleTable.EnableOptimizations = true;
Detailed document here. please follow.
You can try use a plugin for your IDE :)
Then you save your file it will automaticaly save one .min its possible for CSS too. Which IDE are you using?
Related
Recently I have seen files with the .js.map extension shipped with some JavaScript libraries (like Angular), and that just raised a few questions in my head:
What is it for? Why do the guys at Angular care to deliver a .js.map file?
How can I (as a JavaScript developer) use the angular.min.js.map file?
Should I care about creating .js.map files for my JavaScript applications?
How does it get created? I took a look at angular.min.js.map and it was filled with strange-formatted strings, so I assume it's not created manually.
The .map files are for JavaScript and CSS (and now TypeScript too) files that have been minified. They are called source maps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the source map will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the source map, then any error would seem cryptic at best.
Same for CSS files. Once you take a Sass or Less file and compile it to CSS, it looks nothing like its original form. If you enable sourcemaps, then you can see the original state of the file, instead of the modified state.
So, to answer you questions in order:
What is it for? To de-reference uglified code
How can a developer use it? You use it for debugging a production app. In development mode you can use the full version of Angular. In production, you would use the minified version.
Should I care about creating a js.map file? If you care about being able to debug production code easier, then yes, you should do it.
How does it get created? It is created at build time. There are build tools that can build your .map file for you as it does other files. Sourcemaps fail if the output file is not located in the project root directory #71
I hope this makes sense.
How can a developer use it?
Don't link your js.map file in your index.html file (no need for that)
Minification tools (good ones) add a comment to your .min.js file:
//# sourceMappingURL=yourFileName.min.js.map
which will connect your .map file.
When the min.js and js.map files are ready...
Chrome: Open dev-tools, navigate to Sources tab. You will see the sources folder, where un-minified applications files are kept.
I just wanted to focus on the last part of the question; How are source map files created? by listing the build tools I know that can create source maps.
Grunt: using plugin grunt-contrib-uglify
Gulp: using plugin gulp-uglify
Google closure: using parameter --create_source_map
The map file maps the unminified file to the minified file. If you make changes in the unminified file, the changes will be automatically reflected to the minified version of the file.
Just to add to how to use map files: I use Google Chrome for Ubuntu and if I go to sources and click on a file, if there is a map file a message comes up telling me that I can view the original file and how to do it.
For the Angular files that I worked with today I click Ctrl + P and a list of original files comes up in a small window.
I can then browse through the list to view the file that I would like to inspect and check where the issue might be.
Is there a way to include the adobe ExtendScript library into a webstorm project? Basically I'm trying to use .jsx files syntax inside my project.
I tried to lookup for the extend script core lib files on my drive, without success
These guys have set up a pretty good way to generate the necessary .jsx: https://github.com/yearbookmachine/extendscript-api-documentation
You can get precompiled libraries here: https://github.com/yearbookmachine/extendscript-api-documentation#documentation-and-autocomplete-in-ides
My Visual Studio project has Typescript files. We keep the Typescript files under version control but not the generated Javascript files. The problem is that whenever I change a Typescript file, the Javascript files get added to my solution. It's annoying because I have to manually remove them from the project before checking stuff in. Is there any way to stop this from happening?
Upgrading to the latest version of the TypeScript plugin will easily solve your problem. There have been a LOT of changes since that version. But, for one, the default functionality is to NOT add the js files to the solution.
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!
I am creating project in Visual Studio. While editing JS in a HTML file, since we have included the reference to all JQuery files on top, we get intellisense for jquery instances. But, when we are editing JS files, we don't get any intellisense at all! Is there any way to get intellisense there too?
Assuming you're talking about Visual Studio, try adding the following line to the top of your .js file.
/// <reference path="~/path/to/your/jquery.js"/>
Also, if you're using anything other than the version of jQuery that was packaged with Visual Studio, you'll need a jquery-x.x.x-vsdoc.js file that matches your jquery filename, and put that vsdoc in the same directory as your jQuery library.
(For example, if you are using jquery-1.5.2.min.js, you will want jquery-1.5.2-vsdoc.js in the same directory of your project)
You can get the applicable vsdoc file at this page:
http://appendto.com/community/jquery-vsdoc
You seem to be implying that you are using Visual Studio to edit your JS files. If so, perhaps the JScript Editor Extensions extension for VS would work for you. It adds support for Intellisense inside JS files.