Богдан

создайте папку "styles\" для - css, и "scripts\" - для js

Каг-бы сейчас фронт-енд развивается семимильными шагами, поэтому все статьи устаревают к моменту их написания. Поэтому читай официальную доку. Сейчас актуален Gulp 4, а практически вся инфа еще по старой версии.

Как редактор то Atom неплохой. А как IDE то лучше что-то от JetBrains юзать например WebStorm.
Для начинающего отлично подойдет Brackets, у него есть фича которой нет у других браузеров, это свой LivePreview который показывает область применения стиля CSS.

ну если уж очень по простому, тогда нужно юзать CSS
text-align: left;
Возможно задача сложней и нужно использовать Flex

Тоже вариант на флексе, более лаконично
SLIM

doctype html
html
  head
    title Slim Examples
    meta name="keywords" content="template language"
    link rel="stylesheet" href="table_image.css" 
  body
    #block1.block
      a *{href: '#block1'} Hide
    #block2.block
      a *{href: '#'} Show Block 1

CSS

body {
  display: flex;
  height: 100vh;
}

#block1 {
  flex: 0 0 30%;
  background-color: #ccc;
}

#block2 {
  flex-basis: 100%;
  background-color: #eee;
}

#block1:target {
  display: none;
}

Результат

У Вас тута какой-то смесь бульдога (Gulp) с носорогорм (webpack).
Вот пример чистого Gulp4

gulpfile.coffee

sass = require 'gulp-sass'
slim = require 'gulp-slim'
coffee = require 'gulp-coffee'

notify = require 'gulp-notify'
plumber = require 'gulp-plumber'

connect = require 'gulp-connect'
gulp = require 'gulp'

paths =
  app: 'app'
  sass: 'sass/**/*.scss'
  slim: 'slim/**/*.slim'
  coffee: 'coffee/**/*.coffee'
  js: 'js/**/*.js'


########################################
########################################



tsass = ->
  gulp.src paths.sass
    .pipe plumber { errorHandler: notify.onError message: "<%= error.message %>", title: "Ошибка"  }
    .pipe sass outputStyle: 'expanded'
    .pipe gulp.dest paths.app
    .pipe connect.reload( )
########################################
tslim = ->
  gulp.src paths.slim
    .pipe plumber { errorHandler: notify.onError message: "<%= error.message %>", title: "Ошибка"  }
    .pipe slim pretty: true
    .pipe gulp.dest paths.app
    .pipe connect.reload( )
########################################
tjs = ->
  gulp.src paths.js
    .pipe plumber { errorHandler: notify.onError message: "<%= error.message %>", title: "Ошибка"  }
    .pipe gulp.dest paths.app
    .pipe connect.reload( )
########################################
tcoffee = ->
  gulp.src paths.coffee
    .pipe plumber { errorHandler: notify.onError message: "<%= error.message %>", title: "Ошибка"  }
    .pipe coffee bare: true
    .pipe gulp.dest paths.app
    .pipe connect.reload( )
########################################
twatch = ->
  gulp.watch paths.sass, tsass
  gulp.watch paths.slim, tslim
  gulp.watch paths.coffee, tcoffee
  gulp.watch paths.js, tjs
########################################
tconnect = ->
  connect.server
    root: paths.app
    port: 8888
    livereload: true
########################################

watch = gulp.parallel tconnect,
  gulp.series( gulp.parallel( tslim, tsass, tcoffee, tjs ), twatch )

gulp.task 'default', watch

Вот может так нужно
SLIM

doctype html
html
  head
    title Slim Examples
    meta name="keywords" content="template language"
    link rel="stylesheet" href="table_image.css" 
  body
    table
      tr
        td 
          .img *{ style: "background-image: url('http://lorempixel.com/100/200/');" }
        td 
          .img *{ style: "background-image: url('http://lorempixel.com/100/300/');" }

CSS

.img {
  height: 100px;
  width: 100px;
  background-repeat:no-repeat;
  background-size: 100% 100% / contain;
}

Результат

Спасибо за ответы вот что удалось сотворить

isObject = (item) ->
  item and typeof item is 'object' and not Array.isArray item


mergeDeep = (target, source) ->

  if isObject(target) and isObject(source)
    Object.keys(source).forEach (key) ->
      if isObject source[ key ]
        if not target[key] then Object.assign target, { "#{key}": {} }
        mergeDeep target[ key ], source[ key ]
      else
        Object.assign target, { "#{key}": source[key] }
  target


obj1 = {a:1, b: {b1: 1, b2: 4}}
obj2 = {b: {b1: 2, b3: {b11:4, b21:3}}, c:{c1: {c12: 5} } }
console.log(mergeDeep(obj1, obj2));

###
{ a: 1,
  b: { b1: 2, b2: 4, b3: { b11: 4, b21: 3 } },
  c: { c1: { c12: 5 } } }
###

А почему не используете Datepicker из JQuery?

app/assets/javascripts/application.js:2

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jquery-ui/i18n/datepicker-uk

Gemfile

gem 'jquery-rails'
gem 'jquery-ui-rails'

ну и собственно само использование

#  Конечная дата фильтрации
    $( '#date_start' )
      .val GetSession $sessionKey, 'date_start'
      .data 'old-value', GetSession $sessionKey, 'date_start'
      .datepicker onSelect: ->
        $this = $( @ )
        $thisVal =  $this.val( )

        if $thisVal isnt $this.data 'old-value'
          SetSession $sessionKey, 'date_start', $thisVal
          $this.data 'old-value', $thisVal
          $dateEnd = $( '#date_end' )
          $dateEndVal = $dateEnd.val( )

          if not $dateEndVal || moment( $thisVal, $formatDate ).isAfter( moment( $dateEndVal, $formatDate ) )
            SetSession $sessionKey, 'date_end', $thisVal
            $dateEnd.val( $thisVal ).data 'old-value', $thisVal

          filterTable( ) # Фильтрация таблицы документов

Спасибо за ответы, вот на коленке накропал такое решение, может что то подправите? спасибо

function assignLocation(siteUrl, urlParams) {
  let serializeParams = ''
  for (let item of Object.entries(urlParams)) {
    serializeParams += `&${ item[0] }=${ item[1] }`
  }
  let url = `${siteUrl}?${serializeParams.slice(1)}`;
  //window.location.assign(url);
  console.log(url);
}

assignLocation('https://www.site.com/test', { id: 324, name: 'Jack', age: 25 } ); // https://www.site.com/test?id=324&name=Jack&age=25

Ну как-бы рельсы не запускают сервер для БД, а только конектятся, настройки которые делаются с файле "config/database.yml". В SQlite нету сервера, вот что пишет вики

то есть движок SQLite не является отдельно работающим процессом, с которым взаимодействует программа, а предоставляет библиотеку, с которой программа компонуется, и движок становится составной частью программы.