I'm using Web Compiler for Visual Studio 2017. Compiling a single file is easy since the help is right there.
However, I want to minify multiple JavaScript files in my project, and I can't find how. Here's the list of the files I have:
/scripts/framework.js
/scripts/validation.js
/scripts/normalization.js
/scripts/shim.js
…
What I want to do is to bundle and minify all of these files into one single JavaScript file:
/scripts/all.js
How can I do that using Web Compiler?
In the alpha versions of Angular 2.0 I worked with the files from DefinitelyTyped to use typings for TypeScript in Visual Studio. This was simple by just adding the d.ts files to the project. In the current beta stage this seems to be different since DefinitelyTyped no longer provides this file and they have been moved to the angular repo directly.
Problem is that I don't know which file to include to the project in the first place, including all of them throws tons of errors while compiling.
My setup is a DNN website with my VS project residing in the DesktopModules folder, meaning that my project is not the root of the website. I use SystemJS to load components from various locations within this site.
Is there a simple way to include one d.ts file or compose it so that TypeScript can compile correctly?
EDIT - To explain it more detailed:
When I was using import statementimport * as ng from 'angular2/angular2' in the alpha, the 'angular2/angular2' (path and JS file) was resolved by SystemJS and Visual Studio knew about it because of the definition file that was declaring a module. How do I achieve that Visual Studio will know about that again? I tried many hours without success, except using the old Alpha stage .d.ts file and changing it slightly to declare it as angular2/core.
How can this problem be resolved without using the new project system of ASP.NET 5?
Since TypeScript has introduced the "exclude" section in tsconfig.json the preferable way of setting up project is instead of manually including every file that is a part of your project using "files" section of tsconfig, you exclude unwanted ones and everything else will be automatically considered part of your project.
Angular2 comes with typings as its part. You no longer need to manually add them via tsd/typings. Your IDE should be able to automatically resolve them.
Make sure though that you will exclude at least "node_modules" folder in tsconfig.json so compiler will not try to compile its contents and you will not end up with tons of "duplicate identifier" errors.
For more details you can follow sample walkthrough specifically for VS: Starting Angular 2 in ASP.NET 5 with TypeScript using Visual Studio 2015
I came up with a very simple solution. I can accept this workaround because it is only needed at development time.
First of all, in order to make all the magic work you have to use the GitHub source code of DNN and include your projects to the solution.
For Visual Studio to find the typings I just copied the angular2 folder from my JSPM location to the root of the website (rxjs is needed in addition). In this case the statement import * as ng from 'angular2/core' will let Visual Studio search in the root of the website for a folder called angular2 and a file named core. By doing this, everything is compiling fine, all errors are gone and IntelliSense is working again.
This is no problem at runtime because all script files are loaded through SystemJS from the location where your JSPM packages reside (in other words those newly copied folders are not needed, it's just for VS to find the typings).
I also wanna mention that this no problem with Angular itself, TypeScript just does not know anything about JSPM and therefore can not find the right location to load the typings from. There is a discussion on the TypeScript repo on GitHub which can give you more details on that. In future versions there could be a way to tell TypeScript some paths to lookup, or maybe even an integration of JSPM and TypeScript.
https://github.com/Microsoft/TypeScript/issues/6012
I have found that the real important include in VS is the typescript.d.ts file. This is in the node-modules\typescript\lib folder. I also include the js files in the index.html, but that is only to get rid of the red squigles.
Using Web Essentials for VS2013 with VS2013. Have installed bootstrap LESS files. Opening bootstrap.less shows preview of compiled css and output log reports successfull compile but where are the css files? Thank you.
In VS, if you go to Tools > Options > Web Essentials > LESS > Custom Output Directory, it says: "On default compiled css files will be placed in the same folder and nested under the original file". So when Content\bootstrap\bootstrap.less gets compiled to css, you can find the css file under Content\bootstrap\bootstrap.css.
Not sure if it's a good practice to use the bootstrap.css in that manner though.
I'm trying to implement minification and bundling into an AspNet MVC 3 project using WebGrease. I know WebGrease can minify and bundle .js and .css files but can it be used for .less files also?
after doing a bit of testing it seems that yes it will minify less files with no problems
How do I compile a folder of .less files (such as Bootstrap-3.0.0-wip) included into a Visual Studio 2012 MVC web project?
I can compile .less to .css with external tools, but it is not clear how to compile .less files to .css as part of a build with the latest Visual Studio. (despite the .less compatibility provided by current VS plugins*) I can see the compiled output of .less files in a preview window, but I cannot figure out how to save the output or compile it automatically when I run the project.
*VS 2012.2 update, Microsoft Web Developer Tools, and Web Essentials 2012
To compile a folder of Bootstrap .less files with Visual Studio 2012 + Web Essentials 2012, you must make a slight adjustment as Web Essentials cannot compile the bootstrap less folder as formatted on github.
Add the bootstrap-3.0.0-wip folder to a Visual Studio web project. (my project happened to be an ASP.Net MVC 4 Empty project, but it shouldn't matter.)
Move the bootstrap.less file (the entry point for all of the project less files) up one folder, leaving all of the other files in the \less folder.
It should look like this:
bootstrap.less
less\[all other less files].less
Next, edit the bootstrap.less file adding the "less\" folder prefix to all of the #import statements as follows:
// Core variables and mixins
#import "less\variables.less";
#import "less\mixins.less";
// ...etc until all of the import statements include less\ at the start
Now, save the project. The moved bootstrap.less file should have been compiled into a bootstrap.css and a bootstrap.min.css file unless you still have a compile error. (see error list for details)
The remaining .less files will not compile because they still have errors (no #import statements on the individual files), but it won't matter as you have compiled the important one.
If you integrate Bootstrap3.0.0-wip source code within an ASP.MVC 4 project you can take advantage of MVC 4's bundling to also compile the JS files.
Assuming you drop the Bootstrap source code into a folder in your project /Content/bootstrap, add teh following to your App_Start\BundleConfig.cs file:
// Bootstrap 3 script bundle
bundles.Add(new ScriptBundle("~/bundle/scripts/bootstrap_js").Include(
"~/Content/bootstrap/js/bootstrap-transition.js",
"~/Content/bootstrap/js/bootstrap-alert.js",
"~/Content/bootstrap/js/bootstrap-button.js",
"~/Content/bootstrap/js/bootstrap-carousel.js",
"~/Content/bootstrap/js/bootstrap-collapse.js",
"~/Content/bootstrap/js/bootstrap-dropdown.js",
"~/Content/bootstrap/js/bootstrap-modal.js",
"~/Content/bootstrap/js/bootstrap-tooltip.js",
"~/Content/bootstrap/js/bootstrap-popover.js",
"~/Content/bootstrap/js/bootstrap-scrollspy.js",
"~/Content/bootstrap/js/bootstrap-tab.js",
"~/Content/bootstrap/js/bootstrap-typeahead.js",
"~/Content/bootstrap/js/bootstrap-affix.js"));
(Note: The order of these js files was retrieved from the Makefile included with the project)
How to get .less to compile to .css with Web Essentials 2012
To compile a .less file with VS 2012 + Web Essentials 2012, your .less files must be error free. Each .less file that requires an import or mixin must specify it. Highlight your .less file and preview the output in the preview pane. If there is an error specified, your compile to .css will not work.
It also helps to setup the Web Essentials options to compile the .less file upon build.
Tools > Options > Web Essentials > LESS > Compile On Build = TRUE
You may also set it to compile to a 'css' folder by setting the following.
Tools > Options > Web Essentials > LESS > Compile to 'css' folder = TRUE
This setting creates a CSS folder within the LESS directory where it places a [filename].css and [filename].min.css file for each .less file it compiled during the build process.
As to why Bootstrap-3.0.0-wip .less folder won't compile with Web Essentials 2012 (+ VS 2012)
a) It will not compile to .css files if there are any errors building the .less files.
b) Web Essentials 2012 (+VS 2012) does not yet appear to recognize multiple .less files in a folder that are all imported by a single entry point file, such as the bootstrap.less file in Bootstrap 3.0-wip (unless each file lists its required imports). This is likely because there is no way to specify the entry point file yet. Because of this, most of the Bootstrap .less files fail to compile since they do not have their variables and mixins defined. (since the mixins.less nor the variables.less file have been imported to the individual files) And since they fail to compile, the .less -> .css compile process silently fails.
c) The way to compile a folder of .less files that depend on each other (as of Web Essentials 2.7 is to concat all the files together into one big .less file in the order that they are listed in bootstrap.less.
d) Since step c is a time consuming pain, I recommend compiling bootstrap's less files with an external compiler for now. At least until Web Essentials allows you to set an entry point and compile a folder of dependent .less files in the required order.
Based on the changelog for Web Essentials, I'd say this was fixed on July 31st, 2013 ("Fixed LESS relative #import issue"). I just tried this with Visual Studio 2012 (Update 3) and the latest Web Essentials 2012 and Bootstrap 3.0 in an MVC 4 project, and it seemed to work fine (specifically, it was generating bootstrap.css from bootstrap.less).
For anybody who wants to do the same, all I did after installing Web Essentials was add the .less files to my Css folder, add the boostrap.js file to my Scripts folder, add the font files to my Fonts folder (Bootstrap now uses fonts instead of a sprite image), and included the compiled bootstrap.css and the bootstrap.js files in my main view. Note that I also right clicked one of the .less files to generate the solution settings (some config file used by Web Essentials). And to get the .css file generated the first time, I just made a superficial change and saved it.
This has become much easier now, and requires very little action. First off, I'm using VS 2013, but the steps should be the same for VS 2012:
Ensure that Web Essentials is properly installed.
Under TOOLS / Options / Web Essentials / LESS, ensure that Auto-compile dependent files on save is True, and Compile files on save is True.
If your Web Application project is currently using the pre-compiled NuGet package Bootstrap, or if you manually added Bootstrap to your project, remove it.
Using NuGet, add the Bootstrap Less Source package to your Web Application project.
Add a new bootstrap.less file to the ~/Content folder (MVC) of your application.
Delete the entire contents of this file, then click and drag the ~/Contents/bootstrap/bootstrap.less file into this file. This will create a #import "bootstrap/bootstrap"; entry in your new file.
To compile this file into CSS files, all you need to do is save the file (i.e. hit CTRL-S, or the Save File button).
If you make any changes to the files, all you need to do is resave this file.
Doing it this way will allow you easily update your NuGet package when a new version is available. You can add any less variable changes after the #import line.
ENJOY!