Сжатие JS файлов как часть процесса сборки

Нам нравиться jQuery — многие вещи становиться понятнее, проще, более проверяемы (тестируемы) используя JavaScript, взамен ASP.NET. По этой причине у наших проектах содержится много JavaScript кода. В идеале, мы хотим писать читабельный код (даже 3rd Party файлах) и при развертывании выполнять обфускацию и компрессию нашего кода. Для этого мы добавим еще один этап в процесс билда нашего проекта, который и будет выполнять оговоренные задачи.Что мы и сделали.

Во-первых, мы используем перенесенный на .NET компрессор Yahoo YUI, который доступен в сводном доступе на CodePlex. (Обратите внимание, YUICompressor поставляется с MSBuild Task, которую можно использовать в дополнение (или в качестве альтернативы) к моему подходу).

Мы взяли библиотеку и завернули ее в простое консольное приложение, которое принимает на вход первым параметром — путь к отладочным файлам JavaScript, вторым — целевой каталог, в который будут помещены уже сжатые файлы.

using System; 
    using System.IO; 
    using Yahoo.Yui.Compressor; 
     
    public class Program 
    { 
      public static void Main(string[] args) 
      { 
       var input = args[0]; 
       var output = args[1]; 
      
       if (!Directory.Exists(output)) 
       { 
         throw new ArgumentException(string.Format("The output directory '{0}' doesn't exist", output)); 
       } 
       if (Directory.Exists(input)) 
       { 
         CompressDirectory(input, output);         
       } 
       else if (File.Exists(input)) 
       { 
         CompressFile(input, output); 
       } 
       else 
       { 
         throw new ArgumentException(string.Format("{0} isn't a known directory or file", input)); 
       }       
      } 
      public static void CompressDirectory(string root, string outputDirectory) 
      { 
       Console.WriteLine("Compressing all .js files within: " + root); 
       foreach (var file in Directory.GetFiles(root, "*.js")) 
       { 
         CompressFile(file, outputDirectory); 
       } 
       foreach (var directory in Directory.GetDirectories(root)) 
       { 
         //skip .svn folders and what not 
         if ((new DirectoryInfo(directory).Attributes & FileAttributes.Hidden) != FileAttributes.Hidden) 
         { 
          var newOuputDirectory = outputDirectory + directory.Substring(root.Length) + "\\"; 
          CompressDirectory(directory, newOuputDirectory); 
         } 
       } 
      } 
      public static void CompressFile(string file, string outputDirectory) 
      { 
       var name = Path.GetFileName(file); 
       Console.WriteLine("Compressing file: " + name);       
       using (var sw = new StreamWriter(outputDirectory + name)) 
       using (var sr = new StreamReader(file)) 
       { 
         var compressed = JavaScriptCompressor.Compress(sr.ReadToEnd(), false); 
         sw.Write(compressed); 
       } 
      } 
    } 

* This source code was highlighted with Source Code Highlighter.

Скомпилированное консольное приложение мы поместили в директорию с нашим решением. Дальше, открываем свойства нашего проекта, переходим на вкладу Build Events и вводим следующее в поле "Post-build event command line":

$(SolutionDir)..\Tools\YUICompressor\YUICompressor.exe $(ProjectDir)\content\js\debug\ $(ProjectDir)\content\js\release\

Теперь, всякий раз, когда мы будем выполнять билд, все наши .js файлы лежащие в content/js/debug/ будут сжаты и помещены в content/js/release/.

Последний шаг заключается в использовании метода HtmlHelper выражения для добавления javascript файла:

public static string IncludeJs(this HtmlHelper helper, string javascriptFile) 
    { 
    #if DEBUG 
      var subfolder = "debug"; 
    #else 
      var subfolder = "release"; 
    #endif 

      var path = string.Format("{0}/Content/js/{1}/{2}.js", _applicationPath, subfolder, javascriptFile); 
      return string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>", path); 
    } 

* This source code was highlighted with Source Code Highlighter.


Использование которого выглядит:

<%= Html.IncludeJs("jquery") %> 
    <%= Html.IncludeJs("main") %> 
    <%= Html.IncludeJs("jquery_validate") %> 

* This source code was highlighted with Source Code Highlighter.

Перевод статьи Compressing JS files as part of your build process