Announcement

Collapse
No announcement yet.

Javascript compression with extra files.

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Javascript compression with extra files.

    SellerDeck added compressed JavaScript with SellerDeck 2014.

    It is possible to add any additional javascript files to the create_sellerdeck_min.bat and run uglify again: http://community.sellerdeck.com/showthread.php?t=56166

    create_sellerdeck_min.bat as is
    Code:
    call uglifyjs actiniccore.js actinicextras.js actinicsearch.js dynamic.js recentproductssupport.js responsive.js -o sellerdeck.min.js --source-map sellerdeck.min.map --comments /.*Copyright.*/ -m -c join_vars,sequences,properties,dead_code,drop_debugger,conditionals,comparisons,evaluate,booleans,loops,unused=false,hoist_funs=false,if_return,unsafe=false,join_vars,cascade


    create_sellerdeck_min.bat with additional js files
    Code:
    call uglifyjs actiniccore.js actinicextras.js actinicsearch.js dynamic.js recentproductssupport.js jquery.mousewheel-3.0.6.pack.js jquery.fancybox.js jquery.fancybox-buttons.js jquery.fancybox-thumbs.js jquery.fancybox-media.js magiczoomplus.js waypoints.js waypoints-sticky.js jquery.easing.1.3.js jquery.panelslider.min.js responsive.js -o sellerdeck.min.js --source-map sellerdeck.min.map --comments /.*Copyright.*/ -m -c join_vars,sequences,properties,dead_code,drop_debugger,conditionals,comparisons,evaluate,booleans,loops,unused=false,hoist_funs=false,if_return,unsafe=false,join_vars,cascade

    Upgrading from 14 to 16 SelerDeck rewrites the create_sellerdeck_min.bat to the original (still the same as in v14) and on opening the site for the first time you see javascript errors. You will need to run the compression again.

    You will also need to bring your extra .js files from v14 to v16 as if they are not specified in 'additional files' and SD is running off the sellerdeck.min.js the original files will not be included in the snapshot.

    Same applies if you have used the same technique to compress css.
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk

  • #2
    Hi Jonathan,

    I have tried to run the standard batch file to minify the sellerdeck javascripts:

    my create_sellerdeck_min_pause.bat file contains:

    chdir %~dp0
    call create_sellerdeck_min.bat
    pause
    but it is giving me the following error: ERROR: `sellerdeck.min.map` is not a supported option

    C:\WINDOWS\system32>chdir C:\Users\tonyg\Documents\SellerDeck 2016\Sites\Site1\

    C:\Users\tonyg\Documents\SellerDeck 2016\Sites\Site1>call create_sellerdeck_min.bat

    C:\Users\tonyg\Documents\SellerDeck 2016\Sites\Site1>call uglifyjs actiniccore.js actinicextras.js actinicsearch.js dynamic.js recentproductssupport.js responsive.js -o sellerdeck.min.js --source-map sellerdeck.min.map --comments /.*Copyright.*/ -m -c join_vars,sequences,properties,dead_code,drop_debugger,conditionals,comparisons,evaluate,booleans,loops,unused=false,hoist_funs=false,if_return,unsafe=false,join_vars,cascade
    Supported options:
    content null
    filename null
    includeSources false
    root null
    url null
    ERROR: `sellerdeck.min.map` is not a supported option
    at DefaultsError.get (eval at <anonymous> (C:\Users\tonyg\AppData\Roaming\npm\node_modules\uglify-js\tools\node.js:21:1), <anonymous>:79:23)
    at fatal (C:\Users\tonyg\AppData\Roaming\npm\node_modules\uglify-js\bin\uglifyjs:268:52)
    at run (C:\Users\tonyg\AppData\Roaming\npm\node_modules\uglify-js\bin\uglifyjs:225:9)
    at Object.<anonymous> (C:\Users\tonyg\AppData\Roaming\npm\node_modules\uglify-js\bin\uglifyjs:155:5)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)

    C:\Users\tonyg\Documents\SellerDeck 2016\Sites\Site1>pause
    Press any key to continue . . .
    I was wondering if you saw any similar issues when you used it?

    Many thanks
    Tony
    www.secretgardenquilting.co.uk

    Comment


    • #3
      Not a great expert on that but I tend to do it in an elevated command prompt.

      Start search CMD, right click run as administrator.CD to the site folder as you did:
      at the prompt paste:

      call create_sellerdeck_min.bat
      pause

      I get:
      Code:
      E:\Documents E\SellerDeck 2016\Sites\Site1>call create_sellerdeck_min.bat
      
      E:\Documents E\SellerDeck 2016\Sites\Site1>call uglifyjs actiniccore.js actinicextras.js actinicsearch.js dynamic.js recentproductssupport.js responsive.js -o sellerdeck.min.js --source-map sellerdeck.min.map --comments /.*Copyright.*/ -m -c join_vars,sequences,properties,dead_code,drop_debugger,conditionals,comparisons,evaluate,booleans,loops,unused=false,hoist_funs=false,if_return,unsafe=false,join_vars,cascade
      
      E:\Documents E\SellerDeck 2016\Sites\Site1>pause
      I get this if I delete the map file too.

      Hiugh Gibson is the minification king if you can ping hime an email
      Jonathan Chappell
      Website Designer
      SellerDeck Website Designer
      Actinic to SellerDeck upgrades
      Graphicz Limited - www.graphicz.co.uk

      Comment


      • #4
        Hi Jonathan,

        Thank you very much for the advise. I was using the elevated cmd prompt when I got the error.

        As I think you were suggesting I removed :
        --source-map sellerdeck.min.map
        from the "create_sellerdeck_min.bat" file.

        I then ran it and this time I got a output "sellerdeck.min.js". The size of the file is 147kb. It is 2 Kb smaller than the original. I have attached it.

        I have refreshed the test site: http://www.tgurney.co.uk/

        and looked at the source in chrome. It appears to have the sellerdeck.min.js referenced and the site seems to work. However I am not sure whether that is because the old uncompressed Js files are also present. Not sure where to look to find them?

        I did notice there were a few other Sellerdeck js files not included in the compressed version:

        <script type="text/javascript" src="acatalog/jquery-1.11.1.min.js?DAYNO=RBUC">"></script> <script type="text/javascript" src="acatalog/jquery-1.11.1.min.js?DAYNO=RBUC"></script><script type="text/javascript" src="acatalog/jquery.bxslider.min.js?DAYNO=RBUC"></script><link href="acatalog/jquery.bxslider.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="acatalog/sellerdeck.min.js?DAYNO=RBUC"></script> <script type="text/javascript">
        I was wondering why as I guess it make sense to compress everything you can?

        Many thanks
        Attached Files
        Tony
        www.secretgardenquilting.co.uk

        Comment


        • #5
          The files you mention are 'min' already so don't need including in sellerdeck.min.js

          If sellerdeck.min.js is referenced in view source the minification is successful.

          If you want to add other js files you or your developer has added to the site just add them to the create_sellerdeck_min.bat (eg: another.js anotherstill.js)

          Code:
          call uglifyjs actiniccore.js actinicextras.js actinicsearch.js dynamic.js recentproductssupport.js responsive.js another.js anotherstill.js -o sellerdeck.min.js --source-map sellerdeck.min.map --comments /.*Copyright.*/ -m -c join_vars,sequences,properties,dead_code,drop_debugger,conditionals,comparisons,evaluate,booleans,loops,unused=false,hoist_funs=false,if_return,unsafe=false,join_vars,cascade
          Also add to the code to reference them if files are newer than sellerdeck.min.js

          Code:
          if (file_exists("sellerdeck.min.js"))
          		{
          		$SDMinScriptTime = filemtime("sellerdeck.min.js");
          		if ($SDMinScriptTime > max(filemtime("actiniccore.js"), 
          											filemtime("actinicextras.js"), 
          											filemtime("actinicsearch.js"),
          											filemtime("responsive.js"),
          											filemtime("dynamic.js"),
                                                                                                  filemtime("another.js"),
                                                                                                  filemtime("anotherstill.js"),
          											filemtime("recentproductssupport.js")))
          			{
          			echo 	'<script type="text/javascript" src="sellerdeck.min.js<actinic:block if="%3cactinic%3avariable%20name%3d%22ECDayno%22%20%2f%3e%20%21%3d%20%22%22" >?DAYNO=<actinic:variable name="ECDayno" selectable="false" /></actinic:block>"></script>';
          			$bMinUsed = true;
          			}
          		}
          	</actinic:block>	
          	if (!$bMinUsed)
          		{
          		echo '<script type="text/javascript" src="actiniccore.js<actinic:block if="%3cactinic%3avariable%20name%3d%22ECDayno%22%20%2f%3e%20%21%3d%20%22%22" >?DAYNO=<actinic:variable name="ECDayno" selectable="false" /></actinic:block>"></script>';
          		echo '<script type="text/javascript" src="actinicextras.js<actinic:block if="%3cactinic%3avariable%20name%3d%22ECDayno%22%20%2f%3e%20%21%3d%20%22%22" >?DAYNO=<actinic:variable name="ECDayno" selectable="false" /></actinic:block>"></script>';
          		echo '<script type="text/javascript" src="actinicsearch.js<actinic:block if="%3cactinic%3avariable%20name%3d%22ECDayno%22%20%2f%3e%20%21%3d%20%22%22" >?DAYNO=<actinic:variable name="ECDayno" selectable="false" /></actinic:block>"></script>';
          		echo '<script type="text/javascript" src="responsive.js<actinic:block if="%3cactinic%3avariable%20name%3d%22ECDayno%22%20%2f%3e%20%21%3d%20%22%22" >?DAYNO=<actinic:variable name="ECDayno" selectable="false" /></actinic:block>"></script>';
          		echo '<script type="text/javascript" src="recentproductssupport.js<actinic:block if="%3cactinic%3avariable%20name%3d%22ECDayno%22%20%2f%3e%20%21%3d%20%22%22" >?DAYNO=<actinic:variable name="ECDayno" selectable="false" /></actinic:block>"></script>';
          		echo '<script type="text/javascript" src="dynamic.js<actinic:block if="%3cactinic%3avariable%20name%3d%22ECDayno%22%20%2f%3e%20%21%3d%20%22%22" >?DAYNO=<actinic:variable name="ECDayno" selectable="false" /></actinic:block>"></script>';
          		echo '<script type="text/javascript" src="another.js"></script>';
          		echo '<script type="text/javascript" src="anotherstill.js"></script>';
          		}
          Jonathan Chappell
          Website Designer
          SellerDeck Website Designer
          Actinic to SellerDeck upgrades
          Graphicz Limited - www.graphicz.co.uk

          Comment


          • #6
            Great. Thanks for the feedback and advise.

            Tony
            Tony
            www.secretgardenquilting.co.uk

            Comment


            • #7
              uglifyJS 3 (uglify-js@3)

              I have just tried to set up uglify and node on a new machine and the version of uglify is now v3: https://www.npmjs.com/package/uglify-js
              After a little trial and error you need to make a couple of changes in the create_sellerdeck_min.bat file

              The property 'cascade' is no longer supported and the writing to map dialogue is changed a little.
              • delete the ',cascade' from the end, do not leave the comma
              • '--source-map sellerdeck.min.map' becomes '--source-map --output sellerdeck.min.js' - the outputted file will be 'sellerdeck.min.js.map'
              OLD
              Code:
              call uglifyjs actiniccore.js actinicextras.js actinicsearch.js dynamic.js recentproductssupport.js responsive.js -o sellerdeck.min.js --source-map sellerdeck.min.map --comments /.*Copyright.*/ -m -c join_vars,sequences,properties,dead_code,drop_debugger,conditionals,comparisons,evaluate,booleans,loops,unused=false,hoist_funs=false,if_return,unsafe=false,join_vars,cascade
              NEW
              Code:
              call uglifyjs actiniccore.js actinicextras.js actinicsearch.js dynamic.js recentproductssupport.js responsive.js -o sellerdeck.min.js --source-map --output sellerdeck.min.js --comments /.*Copyright.*/ -m -c join_vars,sequences,properties,dead_code,drop_debugger,conditionals,comparisons,evaluate,booleans,loops,unused=false,hoist_funs=false,if_return,unsafe=false,join_vars
              I am no expert but this seems to work OK

              All improvements welcome! 'Thank you
              Jonathan Chappell
              Website Designer
              SellerDeck Website Designer
              Actinic to SellerDeck upgrades
              Graphicz Limited - www.graphicz.co.uk

              Comment

              Working...
              X