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


                #8
                Thanks Jonathan,

                This has beee a great help.

                I had a problem after uglifying the javascript files where inspecting the webpage page with google dev tools was complaining that it couldn't find the source map and was getting a 404 error.

                So I installed uglify V3 but got an invalid path error when I ran the batch file. I changed the batch file to the one suggested above and still got the batch error.

                After a bit of trial and error, it looks to me as if the problem is that we shouldn't be specifying --output for the source map file as we've already said -o for the output and specifying the output file for the source map seemed to mess things up as well. Removing those two bits got rid of the error.

                So what works for me is

                Code:
                call uglifyjs actiniccore.js actinicextras.js actinicsearch.js dynamic.js recentproductssupport.js responsive.js -o sellerdeck.min.js --source-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
                Which produces sellerdeck.min.map for the source map.

                I also had to add sellerdeck.min.map to the additional files list to get sellerdeck to upload it to the web server.

                Mike
                -----------------------------------------

                First Tackle - Fly Fishing and Game Angling

                -----------------------------------------

                Comment

                Working...
                X