Added Unminify command and JS options no-mangle, keep-fnames, keep-fargs; updated npm tools

Author: ygoe

MiniWebCompiler/ViewModels/Project.cs

@@ -128,6 +128,8 @@ private void OnKeepUnminifiedFilesChanged()
 
 		public ProjectFile SelectedFile { get; set; }
 
+		public bool IsJavaScriptSelected => SelectedFile?.FilePath.EndsWith(".js") ?? false;
+
 		public bool? Status { get; private set; } = true;
 
 		#endregion Properties
@@ -228,6 +230,13 @@ private void OnHasBaselineChanged()
 			}
 		}
 
+		public DelegateCommand UnminifyCommand { get; }
+
+		private async void OnUnminify()
+		{
+			await SelectedFile?.Unminify();
+		}
+
 		#endregion Commands
 
 		#region Status handling

MiniWebCompiler/ViewModels/ProjectFile.cs

@@ -23,6 +23,7 @@ public class ProjectFile : ViewModelBase
 		private bool newError;
 		private string fullFileName;
 		private string fileDir;
+		private string fullOutputFileName;
 		private bool isAnyFileModified;
 		private bool isCompiling;
 		private bool needsRecompile;
@@ -253,6 +254,39 @@ await ExecAsync(
 			}
 		}
 
+		public async Task Unminify()
+		{
+			if (isCompiling || Status != true)
+			{
+				return;
+			}
+
+			if (File.Exists(fullFileName))
+			{
+				try
+				{
+					switch (Path.GetExtension(fullFileName))
+					{
+						case ".js":
+							await UnminifyJavaScript();
+							break;
+						default:
+							return;
+					}
+				}
+				catch (Exception ex)
+				{
+					LastLog += (!string.IsNullOrEmpty(LastLog) ? "\n\n" : "") +
+						"Exception while unminifying\n\n" + ex.ToString();
+				}
+			}
+			else
+			{
+				LastLog += (!string.IsNullOrEmpty(LastLog) ? "\n\n" : "") +
+					"Compiled file not found: " + fullFileName;
+			}
+		}
+
 		#endregion Public methods
 
 		#region Compiling
@@ -266,7 +300,7 @@ private async Task CompileCss(bool force)
 			using (var reader = new StreamReader(fullFileName))
 			{
 				int lineNumber = 0;
-				while (!reader.EndOfStream && lineNumber < 10)
+				while (!reader.EndOfStream && lineNumber < 20)
 				{
 					string line = reader.ReadLine();
 					lineNumber++;
@@ -285,6 +319,7 @@ private async Task CompileCss(bool force)
 					}
 				}
 			}
+			fullOutputFileName = minCssFileName;
 
 			if (!force && AreFilesUpToDate(minCssFileName, minCssFileName + ".map"))
 			{
@@ -337,11 +372,14 @@ private async Task CompileJavaScript(bool force)
 			string iifeParams = "";
 			string iifeArgs = "";
 			bool noIife = false;
+			bool mangle = true;
+			bool keepFargs = false;
+			bool keepFnames = false;
 			string buildDir = "";
 			using (var reader = new StreamReader(fullFileName))
 			{
 				int lineNumber = 0;
-				while (!reader.EndOfStream && lineNumber < 10)
+				while (!reader.EndOfStream && lineNumber < 20)
 				{
 					string line = reader.ReadLine();
 					lineNumber++;
@@ -366,6 +404,21 @@ private async Task CompileJavaScript(bool force)
 					{
 						noIife = true;
 					}
+					match = Regex.Match(line, @"^\s*/\*\s*no-mangle\s*\*/", RegexOptions.IgnoreCase);
+					if (match.Success)
+					{
+						mangle = false;
+					}
+					match = Regex.Match(line, @"^\s*/\*\s*keep-fargs\s*\*/", RegexOptions.IgnoreCase);
+					if (match.Success)
+					{
+						keepFargs = true;
+					}
+					match = Regex.Match(line, @"^\s*/\*\s*keep-fnames\s*\*/", RegexOptions.IgnoreCase);
+					if (match.Success)
+					{
+						keepFnames = true;
+					}
 					match = Regex.Match(line, @"^\s*/\*\s*build-dir\((.*)\)\s*\*/", RegexOptions.IgnoreCase);
 					if (match.Success && buildDir == "")
 					{
@@ -384,6 +437,7 @@ private async Task CompileJavaScript(bool force)
 					}
 				}
 			}
+			fullOutputFileName = minFileName;
 
 			if (!force && AreFilesUpToDate(minFileName, minFileName + ".map"))
 			{
@@ -440,15 +494,21 @@ await ExecAsync(
 
 			if (Status != false)
 			{
-				string mapParam = "--source-map \"url='" + onlyMinFileName.Replace('\\', '/') + ".map'\"";
+				string mangleParam = mangle ? " --mangle" : "";
+				string mapParam = " --source-map \"url='" + onlyMinFileName.Replace('\\', '/') + ".map'\"";
 				if (File.Exists(Path.Combine(fileDir, bundleFileName) + ".map"))
 				{
 					// The url part must refer to the file without the build directory because
 					// both files (min.js and map) will be in the same directory.
-					mapParam = "--source-map \"content='" + bundleFileName.Replace('\\', '/') + ".map',url='" + onlyMinFileName.Replace('\\', '/') + ".map'\"";
+					mapParam = " --source-map \"content='" + bundleFileName.Replace('\\', '/') + ".map',url='" + onlyMinFileName.Replace('\\', '/') + ".map'\"";
 				}
+				string addParams = "";
+				if (keepFargs)
+					addParams += " --keep-fargs";
+				if (keepFnames)
+					addParams += " --keep-fnames";
 				await ExecAsync(
-					"uglifyjs " + bundleFileName + " --compress --mangle --output \"" + minFileName + "\" --comments \"/^!/\" " + mapParam,
+					"uglifyjs " + bundleFileName + " --compress" + mangleParam + " --output \"" + minFileName + "\" --comments \"/^!/\"" + mapParam + addParams,
 					fileDir,
 					utf8: true);
 
@@ -499,7 +559,7 @@ private async Task CompileScss(bool force)
 			using (var reader = new StreamReader(fullFileName))
 			{
 				int lineNumber = 0;
-				while (!reader.EndOfStream && lineNumber < 10)
+				while (!reader.EndOfStream && lineNumber < 20)
 				{
 					string line = reader.ReadLine();
 					lineNumber++;
@@ -519,6 +579,7 @@ private async Task CompileScss(bool force)
 					}
 				}
 			}
+			fullOutputFileName = minCssFileName;
 
 			if (!force && AreFilesUpToDate(minCssFileName, minCssFileName + ".map"))
 			{
@@ -619,6 +680,29 @@ fileValue is string fileStr &&
 
 		#endregion Compiling
 
+		#region Unminifying
+
+		private async Task UnminifyJavaScript()
+		{
+			string unminifiedFileName = Regex.Replace(fullOutputFileName, @"\.min\.js$", ".unmin.js");
+
+			//string mapParam = " --source-map \"url='" + unminifiedFileName.Replace('\\', '/') + ".map'\"";
+			string mapParam = "";
+			if (File.Exists(Path.Combine(fileDir, fullOutputFileName) + ".map"))
+			{
+				//mapParam = " --source-map \"content='" + fullOutputFileName.Replace('\\', '/') + ".map',url='" + unminifiedFileName.Replace('\\', '/') + ".map'\"";
+				mapParam = " --source-map \"content='" + fullOutputFileName.Replace('\\', '/') + ".map'\"";
+			}
+			await ExecAsync(
+				"uglifyjs " + fullOutputFileName + " --beautify --output \"" + unminifiedFileName + "\"" + mapParam,
+				fileDir,
+				utf8: true);
+
+			PostprocessMapFile(unminifiedFileName + ".map");
+		}
+
+		#endregion Unminifying
+
 		#region Process helper methods
 
 		private bool AreFilesUpToDate(params string[] outputs)

MiniWebCompiler/Views/MainWindow.xaml

@@ -154,6 +154,7 @@
 				</Button>
 				<Button Margin="6,0,0,0" MinWidth="75" IsEnabled="{Binding IsProjectSelected}" Command="{Binding SelectedProject.CompileAllCommand}">Compile all</Button>
 				<ToggleButton Margin="6,0,0,0" IsEnabled="{Binding IsProjectSelected}" IsChecked="{Binding SelectedProject.HasBaseline}">Baseline</ToggleButton>
+				<Button Margin="6,0,0,0" IsEnabled="{Binding SelectedProject.IsJavaScriptSelected}" Command="{Binding SelectedProject.UnminifyCommand}">Unminify</Button>
 			</StackPanel>
 		</Grid>
 

README.md

@@ -29,6 +29,8 @@ JavaScript configuration
 ------------------------
 JavaScript files are run through `rollup` to bundle them into a single file, if any imports of other files are detected in the source file. The bundled code is wrapped into an immediately invoked function expression (IIFE). The parameters of that function and the arguments when calling it can be specified with comment lines like `/* iife-params($) */` and `/* iife-args(jQuery) */` near the top of the file. The code between the parentheses is inserted into the generated file. The comment `/* no-iife */` disables the use of an IIFE and basically concatenates all the files together.
 
+JavaScript mangling by `uglify-js` can be configured with the following comments: `/* no-mangle */` disables mangling completely (nothing is renamed), `/* keep-fnames */` disables renaming functions, `/* keep-fargs */` disables renaming function arguments (parameter names). These options can be used together with the “Unminify” command to debug compressing or mangling errors in your JavaScript code. It will take the .min.js file and beautify it into a .unmin.js file in the same (output) directory.
+
 The build output files can be written to a separate directory to keep your source code folder tidy. Use a comment like `/* build-dir(...) */` and anything in the parentheses is the relative path to your build output files. The build directory is created if it doesn’t exist. This configuration also works for CSS files, but note that you cannot use relative `url()` references without manually copying the build file to the correct directory.
 
 ### Example