Nether OneScript - Compiling a jQuery mess

This is a short presentation that demonstrates how OneScript can help optimise a jQuery mess into a single file.

Transcript

1. nether onescript Compiling a jQuery mess into a single production file.
2. As an example, this is what happens when we start using jQuery and then search for addtional plugins over the course of a year.  <script src=“/share/jquery/jquery.min.js”></script>  <script src=“/share/jquery/jquery.cookie.min.js”></script>  <script src=“/share/jquery/jquery.purl.min.js”></script>  <script src=“/share/jquery/jquery.datepicker.min.js”></script>  <script src=“/share/jquery/jquery.easing.min.js”></script> This sucks because browsers (might) make multiple connections to load all these. Browsers will also need to delay execution as it waits for all the chunks to come in completely. Lets optimise this by compiling these down to 1 file instead, down to 1 big chunk it can just grab and go.
3. Step 1: Installing Nether OneScript.  Automatic Install. $ composer require netherphp/onescript  Less Automatic Install: Edit composer.json, update manually. require { “netherphp/onescript”: “^1.1” }
4. Step 2: Prepare that jQuery Directory  In my example we had a bunch of .js files sitting in the share/jquery directory.  Create share/jquery/src – move jquery.min.js into this folder.  Create share/jquery/src/libs – move all the other jQuery plugins into there.  Create share/jquery/dist – move all jQuery CSS files, Images, and any other plugin resources into there.  This prepares the directory to build a OneScript project. Lets pretend our project is in /opt/website with the public webroot of /opt/website/www.  This means we now have:  /opt/website/www/share/jquery/src/jquery.min.js  /opt/website/www/share/jquery/src/libs/jquery.cookie.min.js  ... And the rest of the plugins in libs as well.
5. Step 3: Create a OneScript Project  $ php vendor/bin/nether-onescript create www/share/jquery \ --outfile=jquery-et-al.js \ --files=jquery.min.js  This will create the the share/jquery/onescript.json file which defines the project.  In this file you will see jquery.min.js listed in the main Files array, which it will pull from the src directory.  You will also see the libs directory listed in the Directories array, which it will find in the src directory. It will search the libs directory for all files with the .js file extension, as foretold by the Extensions array in the project file.
6. Step 4: Build the Project  $ php vendor/bin/nether-onescript build www/share/jquery  Assuming there are no errors this will generate your jquery-et-al.js file from jQuery and all the plugins you have in the libs diretory. Any time you add or update an additional jQuery or a plugin, just rerun this command to regenerate the final file. The final build file will have been placed in the dist directory.
7. Step 5: Reference and Done  Delete all those script calls, replacing them with one single script – the final builid.  <script src=“/share/jquery/dist/jquery-et-al.js”></script>  Update any references to the CSS files that the plugins needed as well, since I told you to move the styles and resources to the dist folder.
8. about  site: http://nether.io  repository: http://github.com/netherphp/onescript  developer: bob majdak jr <bob@nether.io> @bobmajdakjr all components of the nether framework are released under the bsd 3-clause licence.