Slide 1

Slide 1 text

nether onescript Compiling a jQuery mess into a single production file.

Slide 2

Slide 2 text

As an example, this is what happens when we start using jQuery and then search for addtional plugins over the course of a year.      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.

Slide 3

Slide 3 text

Step 1: Installing Nether OneScript.  Automatic Install. $ composer require netherphp/onescript  Less Automatic Install: Edit composer.json, update manually. require { “netherphp/onescript”: “^1.1” }

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

Step 5: Reference and Done  Delete all those script calls, replacing them with one single script – the final builid.   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.

Slide 8

Slide 8 text

about  site: http://nether.io  repository: http://github.com/netherphp/onescript  developer: bob majdak jr @bobmajdakjr all components of the nether framework are released under the bsd 3-clause licence.