Laravel Elixir для сборки файлов шаблона

npm install --global gulp

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^5.0.0"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "jquery": "^2.0.0"
  }
}

npm install

var elixir = require('laravel-elixir');

/*
true - создавать source maps
false - не создавать source maps
 */
elixir.config.sourcemaps = false;

elixir(function(mix) {
    mix.sass('app.scss', 'css')
        .browserify('app.js', 'js');
});

resources/assets/js/app.js
resources/assets/sass/app.scss

js/app.js
css/app.css

$my-h1-color: #00FF00 !default;
$my-h2-color: $my-h1-color !default;
$my-h3-color: $my-h1-color !default;
$my-h4-color: $my-h1-color !default;

h1 {
  color: $my-h1-color;
}

h2 {
  color: $my-h2-color;
}

h3 {
  color: $my-h3-color;
}

h4 {
  color: $my-h4-color;
}

@import "variables";
@import "core";

/**
 * подгружаем jQuery
 */
window.$ = window.jQuery = require('jquery')

/**
 * пишем собственные скрипты
 */

$( document ).ready(function() {
    $('h1').append('<small> is very big header</small>');
});

npm run-script dev

css/app.css
js/app.js

<?$asset = Bitrix\Main\Page\Asset::getInstance();?>
<?$asset->addCss(SITE_TEMPLATE_PATH . '/css/app.css', false);?>
<?$asset->addJs(SITE_TEMPLATE_PATH . '/js/app.js', false);?>
<?$APPLICATION->ShowHead();?>

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Elixir Test");
?>
    <h1>HEADER H1</h1>
    <h2>HEADER H2</h2>
    <h3>HEADER H3</h3>
    <h4>HEADER H1</h4>

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

$my-h3-color: #FF0000;

@import "variables";
@import "core";

npm run-script prod