Categories
Fixing Stuff Laravel Samuel

combining css and js files into 1 http request

install gulp onto the server:

1.) upload the files (gulpfile.js) and (package.json) into the root directory of the site (make sure to update file paths to the correct css and js directory’s first)

2.) ssh into the server and run: npm install, do this in the same root directory you just uploaded both files to. (if this errors out just manually upload all needed node_modules files to the root directory)

3.) make sure the node_modules directory and all sub directory can execute files (chmod +x directory_name -R)

4.) execute the combining script to combine all the js and css files (./node_modules/gulp/bin/gulp.js) must be run from root directory of site or else will fail

5.) change out the javascript and css script files to the new combined file for each

If all went according to plan you now limited your css and js files down into 1 http request respectively and minifid them both.

general notes:

if you upload a new file or edit a file in the css or js directory you have to ssh into the server and run:

./node_modules/gulp/bin/gulp.js

*this generates the new combined file
*would be a good item to add to a deploy script

If the page errors out (or white screens of death) explcitly define the order of the js files in your gulpfile.js. What most