• dist
  
• node_modules
  
• src
  
• gulpfile.js
  
• package.json
  

src - папка со всеми исходниками верстки (html, css, js, less, coffeescript и т.д.),
dist - папка рабочего проекта скомпилированного из исходников папки src, по команде gulp,
gulpfile.js - скрипт компиляции рабочего проекта,
package.json - мета данные проекта и список необходимых npm библиотек для работы gulpfile.js,
node_modules - сторонние npm библиотеки установленные для компиляции проекта.

Пример gulpfile.js:

var gulp = require('gulp');
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css');

gulp.task('default', function() {
    gulp.src('./src/css/**/*.less')
        .pipe(less())
        .pipe(cleanCSS())
        .pipe(gulp.dest('./dist/css/'))
    ;
});

Для такого проекта должны быть установлены 3 npm библиотеки gulp, gulp-less, gulp-clean-css.

Это общепринятый скелетон для любого gulp-проекта. А структура папки src это по вашему желанию. Каждый делает по своему.

Нужно иметь две версии css и js: dev и prod. Во время разработки вы работаете только с dev версией, а prod у вас создается позже (перед запуском на продакшане выполняете минификацию и комбинирование).
Чтобы реализовать это автоматически вам нужен frontend сборщик такой как Grunt.JS или Gulp.JS, которые работают на node.js.
Главное преимущество вы получите возможность использовать css, js-препроцессоры и собирать минимизированный единственные файлы для сайта со стилями и JS.

Также попробуйте избавиться от не нужных библиотек в JS. Чаще всего они имеют излишний функционал и занимают много места. Возможно у вас получится отказаться от JQuery или хотя бы подключить slim версию.

Для начала осознайте разницу между Javascript и PHP, а потом приступайте к изучению.
Вот интересный ресурс по JavaScript.
По PHP тоже много ресурсов, Google вам в помощь.

Главное запомните:

Есть два компьютера:
Сервер - на котором хранится сайт и все его данные,
Клиент - компьютер посетителя.
PHP работает с компьютером-сервером, JavaScript с компьютером посетителя.

а именно:
PHP - работает с данными на сервере, генерирует ответ на запрос клиента;
JavaScript - работает с элементами на странице, добавляя анимацию и события (клик, скрол и т.д.) на разные элементы.

Решение от uikit getuikit.com/docs/grid-js.html#filtering

"This ~FF0000~string ~FFFF00~should ~00FF00~ be colored".replace(/~([A-F0-9]{3,6})~([^~]+)/g, '<span style="color: #$1;">$2</span>');

https://jsfiddle.net/esqt3aat/