Suggestions for creating a minified release package

Hi! I have a simple web site and a development/deployment chain using TeamCity and Octopus (2.6-ish?). Recently I started looking into using minification/concatenation (using gulp). My minification tasks creates minified versions of my .css, .js-files and html-files (minified html!? => not really minified, rather optimized since references to non-minified scripts are replaced with (one) reference to the minified script)

Ok, so basically the following three files should be packaged: main.min.css, main.min.js and index.min.html. I am using my own NuPkgfile because I need complete control over which files are added to the package. The thing is that I really want index.min.html to be renamed to index.html in the package. This can easily be accomplished by using the following <file-directive in my .nuspec-file: <file src="index.min.html target=“index.html” />.

This approach seemed to work fine until I realized that the original index.html-file in my TeamCity checkoutfolder was also replaced with the minified/optimized version, which caused my html-optimizer to ignore the html file on subsequent builds because index.html is already minified. As if the checkout folder was being used as the content to be packaged and any changes to files in this folder will be “permanent”. I thought that was the purpose of out/octopackageing (or some name like that).

Is there an wasy way to ensure that my checkout folder will not be tampered with when I perform the file rename? Or should I don something completely different? I could of courde generate my optimized files in a completely different folder but since I want the target file to be named index.html I dont see how that would prevent my checkoutfolder/index.html to be altered.

oops, file-directive lost in translation: should be file src=“index.min.html” target=“index.html”…

Hi Emil,

Thanks for the question. I’m not sure what your CI process looks like so can only offer general help. Would it be possible to clean your checkout folder on each build so that your optomizer refreshes index.html? At what stage are you doing the optomizing? Could you use a different folder to contain all of the output that you actually want to deploy (from your optomizer) and package that into your nuget package?

Cheers,
Shane

Hello Shane! Thank you for the reply. Clean checkout folder on each build would be an option yes, however that would increase the time to build and does not seem like the best solution. “At what stage are you optimizing…?”: The minification is executed during compile (right after my TypeScript files are compiled).

“Could you use a different folder…”: Yes, I could do that and that is what I ended up doing, eg: file src=“index.min.html” target=“Webroot/index.html”. This means that I would have to copy all neccessary files into the webroot folder, and that my NuGetpackage will have a webroot-folder in the root instead of the actial web site like it normally does.

However, I kond of like this approach, ie to have a separate webrootfolder with only the files needed to run the web application. This means that I can package some other stuff in another top-level folder (eg custom powershell-routines/dbscripts or whatever).

Problem solved.

octopack_minified.png

Why not generate both the min and the non-min versions during your build, and ship them both? Then you can simply use a config change to tell your app which one to use… IE:

Alternative, similar to how ClickOnce apps are signed, you can run your minification process at deployment time.

Side note: I’m a firm believer in all deployments being exactly the same, other than config changes, and minification (IMO) is not a config change. I would minify during compilation and deploy the minified version everywhere. I would also do the config change that tells the app to use the min version at that point. Then the non-min version would only live in source and on dev machines… where debugging matters. But hey, that’s just me.