Web Essentials, command line utility to bundle script files? - javascript

I'd like to start bundling our javascript files. I've found that it's really easy locally using the web essentials plugin, however I need to set up the build server to generate the bundled .js file.
I'd rather not check this generated file into TFS as it will cause conflicts for our developers, and also since it's generated from the source I feel that the server build should generate it.
Is there a command line utility for doing the script bundling outside of visual studio that could be used as part of a build script? My google-fu is failing to find one.
Many thanks,

As long as you wrote it as proper AMD modules, require.js comes with a tool to turn all your files into an optimized bundle.

Related

Minify a JavaScript file to the root JS file extension in Visual Studio

Developing .NET web projects, I'm used to using either the bundleconfig.json and/or compilerconfig.json file to bundle and/or minify javascript (and css) files. Is there a way to use either of these methods or some other method to minify a source javascript file (located in a folder outside of wwwroot) to the root .js file extension? I don't want the minified output to be filename.min.js, I want it to be filename.js (but minified).
I know ultimately, I can manually rename the files to accomplish this, but I'd rather it be automated in Visual Studio if possible.
Also, if it helps, I'm currently building this project in .NET 6.
Search for Visual Studio Code Minify plugin on Google. There are many here. For example, https://marketplace.visualstudio.com/items?itemName=MadsKristensen.BundlerMinifier https://marketplace.visualstudio.com/items?itemName=fbdegroot.Minifier.

How can I modify and test javascript source code for a project which uses minified javascript code in production?

I'm working on a project which uses js source files from multiple directories and compiles them into a common dist/ directory which is used in production. One way I can test my changes to the js code would be to make the changes into the source code and reinstall the entire project to generate the new dist/ directory. Is there an easier and more practical way to do this?
As I like my production and development environments to be (mostly) equal I use source maps for this issue. This is the way I usually build by js:
JS Hint
Generate Source maps
Concat JS into one file
Uglify
I do this by using gulp and some plugins. Those shouldn't be hard to find.
The benefits of this aproach are:
Serving a small js file
no difference between dev and prod
readable JS source for debugging
no redeploy needed

VS2013: Publish minified bundle created on files outside of the project

I use Visual Studio 2013 and .NET 4.5 for an MVC project.
I've learning to use AngularJS via several videos on Pluralsight and one of them walks through the process of using Grunt to clean the output directory, then use ngmin to min-safe the Javascript files.
My process is using a gruntfile.js to clean and run ngmin against the javascript files in my solution, then put them in a directory called app_built. This is executed via a batch file in the pre-build for the project and then I include it via a ScriptBundle with IncludeDirectory pointing to the app_built directory. My intent is to use the Bundling features of .NET 4.5 to do the rest of the minification and concatenation of the Javascript after all the files have been min-safed via Grunt.
I specify the path to the min-safed files with the following:
bundles.Add(new ScriptBundle("~/bundles/minSafed")
.IncludeDirectory("~/app_built/", "*.js", true));
If I run this on my local machine, it runs fine without a hitch. The Javascript is minified and bundled as I'd expect and the resulting web application runs fine as well.
If I publish the website to a remote server, I get a server error that the "Directory does not exist. Parameter name: directoryVirtualPath". I assume this error is saying that it's unable to find the directory populated with my many *.js files. I also assume this is because they weren't published since they aren't part of the solution, even though the folder they reside in is a part of the solution (it's just empty within the solution explorer in Visual Studio).
If my assumption is correct, what can I do to add these files to my solution so they'll be published with the rest of my web application with minimal effort on my end each time?
And if I'm incorrect in the assumption, what I can I do to resolve this otherwise?
Thanks!
I never did find a great way of going about this. I found information at http://sedodream.com/2010/05/01/WebDeploymentToolMSDeployBuildPackageIncludingExtraFilesOrExcludingSpecificFiles.aspx that seems related, but I was unable to make it work.
Rather, since I knew the name of the outputted file, I simply created such an empty file in my project and referenced that where I needed to. I then had the pre-build task replace the contents of that file with the externally minified version and it would be packaged with the project as necessary, so it works well enough.

Dependency management and build tool for JavaScript

I have many JS snippets and files shared across multiple projects. I have to either copy-past them into a single file for each project, or serve them as individual files on cdn. Both are bad ideas.
Is there any dependency management and build tool like Maven for JavaScript? Ideally it would take a set of js dependencies and build a single js file which can be served on cdn.
I can write a script to do that. But I'm looking to find if anything comparable to Maven exists for JS.
Update 2014: Based on answers here and my research following are most popular tools:
Bower, NPM, RequireJS, Browserify, Webpack, Grunt, Gulp
There's RequireJS, but that's kind of a different thing than Maven, and what you're asking it to do is different than Maven too. There are any number of JS combiner/minifiers, like jekyll-combiner and a zillion others.
If you're using Maven, the JavaScript Maven Tools might be of interest. If you're not, I don't know of a unified way to specifiy, download, combine, etc. for arbitrary build systems. Some of the node.js stuff might be useful, but I've never used that outside of a node.js context, so I'm not sure.
http://webjars.org/ packages JS libraries as JAR files and makes them available under Maven.
RequireJS is not a replacement to WebJars; it complements it.RequireJS will use public JS files (on CDNs) at runtime, whereas Webjars will download the necessary files at build-time and have you host them yourself.
Because most JS files are not hosted on CDNs, I use Webjars to download the necessary JS files at build-time, and reference them using RequireJS. That way I get the best of both worlds.
Take a look to grunt. It's very flexible build tool for javascript projects. Used by jquery team and other big projects. It combine, minify, test, lint js files, wtitten in javascript, have dozens plugins for whatever you want

Javascript and CSS Asset Packaging in Visual Studio

I have several backbone.js views, javascript modules and style sheets in an ASP.Net MVC app i'm developing. I want to seperate these files during development but combine/consolidate, compress, uglify, resolve dependencies etc. before deployment. The Ruby community has solutions for this including Juicer and Jammit. Are there similar solutions for .Net web developers ideally solutions that integrate with visual studio.
I've used Chirpy for this in the past. Also compiles SASS, LESS, and CoffeeScript.
We use YUI Builder for exactly this purpose. (We also happen to use YUI extensively in our products.) It's Java/Ant based, but it wasn't hard to get msbuild to do all the work by creating a project file (csproj in our case) and overriding the "build" target. We include the project in our main .sln file, and it automatically builds along with all of our C#/.NET projects.
One thing to watch out for: We initially got frequent/random "access denied" errors when building this way. It turns out that Visual Studio was locking many of the intermediate files that YUI Builder generates. So our workaround is to robocopy all the relevant files to a temp folder, do the work there, and robocopy them back.
It's not ideal, and certainly not an out-of-the-box integration like you're probably hoping for, but it works well for us. It gives us minification, JSLint checking, dependency management, and an infrastructure for serving one combined file rather than individual scripts.

Categories