Does anyone know what is being used in this article (Building an HTML5 App with ASP.NET by Stephen Walther) to compress the javascript files?
About 1/2 way down in the blog entry, he says: "All of the custom JavaScript files are combined and minified automatically whenever the application is built with Visual Studio."
However, I've never heard of that being built into Visual Studio.
What is being used to do this?
Upon further investigation, it appears that his sample project included a custom project that uses the Microsoft.Ajax.Utilities.Minifier.
Related
Got a few issues setting up a project to do the full Java, Angular.js, TDD/BDD stack. So far these issues aren't a blocker, but they might turn into one.
I'm using Eclipse 4.6.0 Neon with the WTP, JSDT and Angular plugins.
The 2 red flags that I see waving at the moment are:
in the "Javascript Resources" folder, Eclipse is showing an "ECMA 3 browser support library". This should be ECMAscript 5 surely? (If not 6!) Since Neon just came out, it's a bit of surprise that I can't even change it as I can change the Java version for instance in the project facets dialog.
the HTML and CSS files are buried in src/main/webapp. I shouldn't have to do 3 clicks to get to them, they should be as easy to click to as the Java or JS files. How come there's no "Web Resources" to match the "Java Resources" and "Javascript Resources" in my project in the Project Explorer view?
Like I said at this point neither of these /seem/ to matter but I'd hate to waste loads of time on a problem in the future and find out I should have set up my project differently. I'm also quite happy to hear that this is impossible and I should split the technologies out into separate projects, like one for just web services and one for JS. To follow that train of thought to its conclusion, I'm also happy to hear that I should ditch Eclipse and go back to the command line.
Update 2016-08-01
The Eclipse project went into a nose-dive, locked into some never-ending process which I couldn't stop and couldn't identify after I created a bower.json project file.
I will separate the Java and JS into separate projects and take it from there. There is no need to keep them together except the benefit of having only one deployable artifact not 2, and right now that doesn't seem like such a big deal.
Answer for 2nd item [src/main/webapp requiring 3 clicks to drill down into (unlike the Java files)]:
You should be able to right-click on the /webapp/ folder, then select "Build Path" > "Use as Source Folder", and it will then be displayed at the same level as the Java (src/main/java) folder is, enabling you to drill into it with one click.
Here is how it looks in Eclipse's 'Package Explorer':
I found it easier to set up the Javascript / Angular.js, HTML and CSS in a separate project in Eclipse because the Eclipse project config probably went up the creek as I continually bashed away at it.
This means there have to be 2 deployable artifacts but at this point that's acceptable. When it comes to production and definitely if it becomes easier as the Eclipse JS tooling matures, I will recombine then into one project.
All the google top-ranking JS / Angular HOWTOs out there on the net assume no java or maven at all will come into it, but I have a variety of use-cases where I want the HTML in JSP files rather than as static files, so I created a project as Javascript, Java and Maven.
Also, there is an awesome looking Maven plugin frontend-maven-plugin
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.0</version>
</plugin>
which is, quote:
Maven-node-grunt-gulp-npm-node-plugin to end all maven-node-grunt-gulp-npm-plugins.
So this will take care of the continuous integration of browserify and grunt or gulp tasks.
It's easy to split out the HTML and CSS resources and put them into the WebContent directory that is automatically created for an Eclipse Dynamic Web Module. That makes them reachable with one click of the mouse in the folder tree (compared to 3 clicks in src/main/webapp).
In fact using the maven-war-plugin it is simple enough to tell Eclipse where to assemble the various parts from:
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.6</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
<warSourceDirectory>${project.basedir}/WebContent</warSourceDirectory>
<webResources>
<webResource>
<directory>${project.basedir}/src/main/javascript</directory>
</webResource>
</webResources>
</configuration>
</plugin>
To bring in ECMAScript 5 or 6 support, I installed the Tern Eclipse plugin which doesn't quite take over the project configuration since Eclipse still shows the ECMA 3 Browser library in its properties dialog, but it provides code completion and validation.
Apparently this whole thing is easier with IntelliJ but hopefully this was the last big session on the Eclipse project config that I'll need to do for a while, so I won't be going there just yet. No idea about Netbeans.
Update 2016-09-23:
The Eclipse project configuration isn't very stable. At first the Angular plugin couldn't find my Angular code and flagged up errors in the HTML unless the Javascript is in the same directory or subdirectory where the HTML is. I discovered that these errors just disappeared after I recreated the Eclipse project from scratch.
The default validations carried out by Eclipse are also not good. They check everything in node_modules and bower_components unless turned off or reconfigured with a filter to exclude those directories (there are over 25 separate validation configurations to do).
Also, the Javascript outline view breaks when it tries to scan in the code in 3rd party libraries like angular.min.js or d3.min.js - there is a release 4.6.1 due at the end of September this year 2016 with a fix for this.
i have been working with visual studio for variety of projects for quite a while now, bu t i recently needed to develop a simple html5 webpage that will use some embedded or a seperate file of javascript, now i know there are asp.net projects which support stuff like that but i wanted to know is there a template or project type or something using which i can work purely with html and js only without having to deal with hell of asp.net configs and pages and all that? just simple html5 and js dev with intellisense and maybe a designer mode for css. i looked over internet and am unable to find an exact answer.
Regards.
If you're starting from scratch you can go to File > New > Web Site and choose ASP.NET Empty Web Site. This will give you a very basic site, which has nothing but a Web.config file. You can then add all of your html, js, and css from there. You can also delete the Web.config file, but it is useful as it allows you to continue to use the debugger on your site.
Alternatively you can just start the project in windows explorer, setup the basic files and site directories, then you can go back into Visual Studio, and go to File > Open > Website and then locate the directory your site is in. This will just open the files and allow you to work on them like any other project.
These are the only ways I've seen so far, you may also be able to find project templates online but I haven't looked.
Also, if you're using Visual Studio in this way, then I recommend installing Web Essentials it adds a lot of useful features.
Hope that helps.
I am going though our ASP.NET WebForms project and attempting to make changes suggested by tools such as YSlow and others. We use the built in bundling & minification that came with .NET 4.0 for the files we've added to the project, but there are still a few JavaScript files that the WebForms framework includes unminified: ScriptResource.axd and WebResource.axd
I've looked around and found a lot of 3rd party solutions for how to get these file to be minified, but all these solutions are a few years old before a JS compressor was built into the framework. Now that's it's built in, it seems like it should be possible to harness this somehow.
How can I get these *.axd files to have a minified output?
axd files are embedded resources files inside the ASP.net custom server controls.
you need to minify the resources before compiling the custom server control.
or you can checkout this article, for combining them, i think it can help you http://www.codeproject.com/Articles/30215/Combining-Compressing-Minifying-ASP-NET-ScriptReso
What VS 2010 project template would you use for a plain HTML and JS project, no ASP or other code. Just plain vanilla HTML / JS. I am using an empty Web project ("ASP.net empty Web Application"), still giving me unnecessary files and directories. Is there anything better?
This question is not about extensions for JS, such as Visual Studio Javascript extensions feature comparison .
-- Update as of 15. August --
I have deleted the extra directories and references to the extend possible. The bin folder gets recreated whenever the application is build, but I can solve this on Solution level by switching of the build (Configuration properties). The webconfig is required for debugging - I cannot get rid of this one - so this is the best I get until now.
Damn - obj and bin directories are recreated when closing and re-opening VS2010 (preparing solution stage). So I have to live with some overhead of files / directories.
-- As of 18.August --
Guess there is no better way, delete as much as possible and live with the remaining "trash".
Visual Studio Web Development is orientated to ASP.NET projects creation, but you can build without any problem, HTML & JS applications *deleting the extra directories* created for ASP.NET apps, which need that.
Best regards.
Ángel Manuel.
Have you considered creating a web site in visual studio instead of using a web project? File -> New -> Web Site. It's still directed towards asp.net development but it might be more what you are looking for.
I'd just use a text editor/hilighter like Notepad++ :P
I am trying to write my own Javascript Framework something like jQuery.
I use Aptana Studio for designing websites. I was planning to create a web page and write the Javascript code just as we would do for a website. Then I noticed that Aptana Studio also has a Javascript Project. So I created a new Javascript Project. But it primarily allows you to create only .js files and no HTML files. I wonder what a standalone .js file would do? Would't I need an HTML file to execute and test my Javascript code?
Certainly there must be some advantage to using the Javascript Project. But I am not able to figure it out. Can someone please explain how to use the Javascript Project?
I don't know anything about Aptana Studio, but I'm guessing that you're intended to drive your JavaScript project from another project. Think of the JavaScript project like a self-contained library. It doesn't make sense to include the test code in the library itself, because consumers of the library probably don't want to deal with it. Try creating a second project that imports your JavaScript project and allows you to play with it and test it.
I would recommend that you try Javascript-Test Driver. It has an IDE support and also it seems to be fairly good at helping you debug code. Find more details here:
http://code.google.com/p/js-test-driver/
I would say that while you DO need HTML files; you'd probably wanna do more according to the testing framework you choose; as some work with fixtures other loads up iframe and stuff. But I would presume that writing a whole framework would take more than just HTML pages and a unit testing framework would be more apt for the req.
Screw Unit for JS
http://github.com/nkallen/screw-unit
I know I have deviated from your question; but I just felt that rather than right project structure and HTML for testing what would be more important is a testing framework that keeps development agile and fast.
But that's just me.