B4J Library [BANano] BANanoPostProcessor

Kiffi

Well-Known Member
Licensed User
Hello,

i like the BANano feature MinifyOnline very much. But -- to be honest -- I don't have a good feeling about sending my code to an online service.

That's why I wrote a small PostProcessor that, when compiled as a B4J lib, can compress JavaScript "offline" after BANano has done its job. For this I use Terser (https://github.com/terser-js/terser), which can be installed as NodeJs npm module. (I don't like NodeJS, but as far as I know there is no standalone tool available that produces better results.)

My current project will be reduced from about 182 kB to about 93 kB within 1.5 seconds with Terser's default settings. I think, that's not bad.

At the moment the PostProcessor can only compress the JS, but maybe I (or you?) will have ideas for futher features later.

Prerequisites:


How to use:

  • Download and unpack the attached ZIP

  • Load the BANanoPostProcessorProject.b4j and compile it to a Lib. B4J will place it automatically to the additional libraries folder.

  • Load your BANano-Project and insert the following code:

B4X:
Sub Process_Globals
    Private BANano As BANano
    Private BP As BANanoPostProcessor
    ' ...
End Sub

Sub AppStart(Form1 As Form, Args() As String)

  Dim appShortName As String = "[YourProjectName]"

  BANano.Initialize([YourEventName], appShortName, DateTime.Now)

  ' ...
  ' BANano-Stuff
  ' ...
 
  Dim BuildFolder As String = "C:\inetpub\wwwroot\BANano\" ' <- adjust to your needs!

  BANano.Build(BuildFolder)

  ' ####

#If Release ' It is recommended to use the Compress command only in release mode.

BP.Initialize
BP.ScriptFilename = BuildFolder & appShortName & "\" & BANano.SCRIPTS_FOLDER & "\" & BANano.JAVASCRIPT_NAME
BP.Compress

#End If

  ' ####

  ExitApplication

End Sub
Feel free to post questions, suggestions or bug reports.

Have fun & Greetings ... Peter
 

Attachments

Last edited:

Kiffi

Well-Known Member
Licensed User
@Mashiane : Merging third party JS and CSS files is usually something you do once, not every time BANano runs. Or did I get something wrong?

Greetings ... Peter
 

Mashiane

Expert
Licensed User
@Mashiane : Merging third party JS and CSS files is usually something you do once, not every time BANano runs. Or did I get something wrong?

Greetings ... Peter
I understand but for example you are developing, testing and debugging an app and add additional js and css files for more app functionalities and thus your app becomes a little more and more heavier. Once all the bugs are fixed then you consolidate. Just thought you could advise of any offline functionality that one could use.

Ta!
 

Kiffi

Well-Known Member
Licensed User
something like this?

Paste this code into the module BANanoPostProcessor (and recompile it as a library):
B4X:
Public Sub MergeFiles(FilesToMerge As List, TargetFile As String)
   
    Try
       
        If FilesToMerge.Size = 0 Then
            LogError("No files to merge!")
            Return
        End If
       
        Log("Merging files...")

        Dim FileContent As String

        For Each FileToMerge As String In FilesToMerge
            If File.Exists(File.GetFileParent(FileToMerge), File.GetName(FileToMerge)) Then
                FileContent = FileContent & File.ReadString(File.GetFileParent(FileToMerge), File.GetName(FileToMerge))
            Else
                LogError("File: " & FileToMerge & " doesn't exists")
            End If
        Next
   
        File.WriteString(File.GetFileParent(TargetFile), File.GetName(TargetFile), FileContent)

        Log("Merging files: Ready")
   
    Catch
       
        LogError(LastException)
       
    End Try

End Sub
and call it with:
B4X:
Dim FilesToMerge As List
FilesToMerge.Initialize
    
FilesToMerge.Add("E:\test1.js")
FilesToMerge.Add("E:\test2.js")
FilesToMerge.Add("E:\test3.js")
    
BP.MergeFiles(FilesToMerge, "E:\Target.js")
Greetings ... Peter
 

Mashiane

Expert
Licensed User
Compressing CSS Offline

I have been looking for an offline css minifier, so far it seems to be working well, managed to find clean-css here, https://github.com/jakubpawlowicz/clean-css-cli

This is inspired by the code in this post...

Start NodeJS and execute...

B4X:
npm install clean-css-cli -g
In the post processing code module add the following code

On Class Globals

B4X:
Private mCSSFilename As String
Inside the module, add the following code...

B4X:
Public Sub CleanCSS()
    startTime = DateTime.Now
    oldLength = File.Size(File.GetFileParent(mCSSFilename), File.GetName(mCSSFilename))
    Dim shlCompress As Shell
    shlCompress.Initialize("shlCleancss", "cmd.exe", Array("/c", "cleancss", File.GetName(mCSSFilename)))
    shlCompress.WorkingDirectory = File.GetFileParent(mCSSFilename)
    shlCompress.Run(10000)
    StartMessageLoop
End Sub

Public Sub getCSSFilename() As String
    Return mCSSFilename
End Sub

Public Sub setCSSFilename(Value As String)
    mCSSFilename = Value
End Sub

Private Sub shlCleancss_ProcessCompleted(Success As Boolean, ExitCode As Int, StdOut As String, StdErr As String)
    Try
        endTime = DateTime.Now
        If Success Then
            If StdOut.Length > 0 Then
                newLength = StdOut.Length
                Log("File Name: " & File.GetName(mCSSFilename))
                Log("Length (before): "  & oldLength & " Bytes")
                Log("Length (after): "   & newLength & " Bytes")
                Log("Bytes saved: " & (oldLength - newLength) & " Bytes")
                Log("Time: " & (endTime - startTime) & " milliseconds")
                File.WriteString(File.GetFileParent(mCSSFilename), File.GetName(mCSSFilename), StdOut)
            Else
                LogError(StdErr)
            End If
        Else
            LogError("Compress: Failed")
        End If
    Catch
        Log(LastException)
    End Try
    StopMessageLoop
End Sub
Usage

B4X:
BP.Initialize
BP.ScriptFilename = BuildFolder & appShortName & "\" & BANano.STYLES_FOLDER & "\mycssfile.css"
BP.CleanCSS
Disclaimer: I am using this at my own risk as there are some various options that one can set for the clean-css module.

My results so far:

B4X:
File Name: uoemock.css
Length (before): 539750 Bytes
Length (after): 480966 Bytes
Bytes saved: 58784 Bytes
Time: 1867 milliseconds
TA!
 

Mashiane

Expert
Licensed User
Top