Implement a Gulp/NPM-based dependency management system.

.gitignore

@@ -1,5 +1,12 @@
+# database
+*.sqlite3
+
+# npm folder
+/node_modules
+
 # python
 *.pyc
 
-# database
+# static files
-*.sqlite3
+/babyblotter/static
+/static

babyblotter/settings.py

@@ -106,6 +106,12 @@ USE_TZ = True
 
 STATIC_URL = '/static/'
 
+STATIC_ROOT = os.path.join(BASE_DIR, 'static')
+
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, 'babyblotter/static'),
+]
+
 
 # Django Rest Framework
 # http://www.django-rest-framework.org/#

babyblotter/static/css/tempusdominus-bootstrap-4.min.css

@@ -1,204 +0,0 @@
-/*@preserve
- * Tempus Dominus Bootstrap4 v5.0.0-alpha7 (https://tempusdominus.github.io/bootstrap-4/)
- * Copyright 2016-2017 Jonathan Peterson
- * Licensed under MIT (https://github.com/tempusdominus/bootstrap-3/blob/master/LICENSE)
- */
-
-.sr-only, .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after, .bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after, .bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after, .bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after, .bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after, .bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after, .bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after, .bootstrap-datetimepicker-widget .btn[data-action="clear"]::after, .bootstrap-datetimepicker-widget .btn[data-action="today"]::after, .bootstrap-datetimepicker-widget .picker-switch::after, .bootstrap-datetimepicker-widget table th.prev::after, .bootstrap-datetimepicker-widget table th.next::after {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0; }
-
-.bootstrap-datetimepicker-widget {
-  list-style: none; }
-  .bootstrap-datetimepicker-widget.dropdown-menu {
-    display: block;
-    margin: 2px 0;
-    padding: 4px;
-    width: 12.8vw; }
-    @media (min-width: 576px) {
-      .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
-        width: 38em; } }
-    @media (min-width: 768px) {
-      .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
-        width: 38em; } }
-    @media (min-width: 992px) {
-      .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
-        width: 38em; } }
-    .bootstrap-datetimepicker-widget.dropdown-menu:before, .bootstrap-datetimepicker-widget.dropdown-menu:after {
-      content: '';
-      display: inline-block;
-      position: absolute; }
-    .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
-      border-left: 7px solid transparent;
-      border-right: 7px solid transparent;
-      border-bottom: 7px solid #ccc;
-      border-bottom-color: rgba(0, 0, 0, 0.2);
-      top: -7px;
-      left: 7px; }
-    .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-      border-bottom: 6px solid white;
-      top: -6px;
-      left: 8px; }
-    .bootstrap-datetimepicker-widget.dropdown-menu.top:before {
-      border-left: 7px solid transparent;
-      border-right: 7px solid transparent;
-      border-top: 7px solid #ccc;
-      border-top-color: rgba(0, 0, 0, 0.2);
-      bottom: -7px;
-      left: 6px; }
-    .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-      border-top: 6px solid white;
-      bottom: -6px;
-      left: 7px; }
-    .bootstrap-datetimepicker-widget.dropdown-menu.float-right:before {
-      left: auto;
-      right: 6px; }
-    .bootstrap-datetimepicker-widget.dropdown-menu.float-right:after {
-      left: auto;
-      right: 7px; }
-  .bootstrap-datetimepicker-widget .list-unstyled {
-    margin: 0; }
-  .bootstrap-datetimepicker-widget a[data-action] {
-    padding: 6px 0; }
-  .bootstrap-datetimepicker-widget a[data-action]:active {
-    box-shadow: none; }
-  .bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second {
-    width: 54px;
-    font-weight: bold;
-    font-size: 1.2em;
-    margin: 0; }
-  .bootstrap-datetimepicker-widget button[data-action] {
-    padding: 6px; }
-  .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
-    content: "Increment Hours"; }
-  .bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
-    content: "Increment Minutes"; }
-  .bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
-    content: "Decrement Hours"; }
-  .bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
-    content: "Decrement Minutes"; }
-  .bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
-    content: "Show Hours"; }
-  .bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
-    content: "Show Minutes"; }
-  .bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
-    content: "Toggle AM/PM"; }
-  .bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
-    content: "Clear the picker"; }
-  .bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
-    content: "Set the date to today"; }
-  .bootstrap-datetimepicker-widget .picker-switch {
-    text-align: center; }
-    .bootstrap-datetimepicker-widget .picker-switch::after {
-      content: "Toggle Date and Time Screens"; }
-    .bootstrap-datetimepicker-widget .picker-switch td {
-      padding: 0;
-      margin: 0;
-      height: auto;
-      width: auto;
-      line-height: inherit; }
-      .bootstrap-datetimepicker-widget .picker-switch td span {
-        line-height: 2.5;
-        height: 2.5em;
-        width: 100%; }
-  .bootstrap-datetimepicker-widget table {
-    width: 100%;
-    margin: 0; }
-    .bootstrap-datetimepicker-widget table td,
-    .bootstrap-datetimepicker-widget table th {
-      text-align: center;
-      border-radius: 0.25rem; }
-    .bootstrap-datetimepicker-widget table th {
-      height: 20px;
-      line-height: 20px;
-      width: 20px; }
-      .bootstrap-datetimepicker-widget table th.picker-switch {
-        width: 145px; }
-      .bootstrap-datetimepicker-widget table th.disabled, .bootstrap-datetimepicker-widget table th.disabled:hover {
-        background: none;
-        color: #636c72;
-        cursor: not-allowed; }
-      .bootstrap-datetimepicker-widget table th.prev::after {
-        content: "Previous Month"; }
-      .bootstrap-datetimepicker-widget table th.next::after {
-        content: "Next Month"; }
-    .bootstrap-datetimepicker-widget table thead tr:first-child th {
-      cursor: pointer; }
-      .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
-        background: #eceeef; }
-    .bootstrap-datetimepicker-widget table td {
-      height: 54px;
-      line-height: 54px;
-      width: 54px; }
-      .bootstrap-datetimepicker-widget table td.cw {
-        font-size: .8em;
-        height: 20px;
-        line-height: 20px;
-        color: #636c72; }
-      .bootstrap-datetimepicker-widget table td.day {
-        height: 20px;
-        line-height: 20px;
-        width: 20px; }
-      .bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td.second:hover {
-        background: #eceeef;
-        cursor: pointer; }
-      .bootstrap-datetimepicker-widget table td.old, .bootstrap-datetimepicker-widget table td.new {
-        color: #636c72; }
-      .bootstrap-datetimepicker-widget table td.today {
-        position: relative; }
-        .bootstrap-datetimepicker-widget table td.today:before {
-          content: '';
-          display: inline-block;
-          border: solid transparent;
-          border-width: 0 0 7px 7px;
-          border-bottom-color: #0275d8;
-          border-top-color: rgba(0, 0, 0, 0.2);
-          position: absolute;
-          bottom: 4px;
-          right: 4px; }
-      .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
-        background-color: #0275d8;
-        color: #fff;
-        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }
-      .bootstrap-datetimepicker-widget table td.active.today:before {
-        border-bottom-color: #fff; }
-      .bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover {
-        background: none;
-        color: #636c72;
-        cursor: not-allowed; }
-      .bootstrap-datetimepicker-widget table td span {
-        display: inline-block;
-        width: 54px;
-        height: 54px;
-        line-height: 54px;
-        margin: 2px 1.5px;
-        cursor: pointer;
-        border-radius: 0.25rem; }
-        .bootstrap-datetimepicker-widget table td span:hover {
-          background: #eceeef; }
-        .bootstrap-datetimepicker-widget table td span.active {
-          background-color: #0275d8;
-          color: #fff;
-          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }
-        .bootstrap-datetimepicker-widget table td span.old {
-          color: #636c72; }
-        .bootstrap-datetimepicker-widget table td span.disabled, .bootstrap-datetimepicker-widget table td span.disabled:hover {
-          background: none;
-          color: #636c72;
-          cursor: not-allowed; }
-  .bootstrap-datetimepicker-widget.usetwentyfour td.hour {
-    height: 27px;
-    line-height: 27px; }
-
-.input-group.date .input-group-addon {
-  cursor: pointer; }

babyblotter/templates/babyblotter/base.html

@@ -7,34 +7,14 @@
     <meta name="viewport"
           content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>{% block title %}{% endblock %} | Baby Blotter</title>
-    <link rel="stylesheet"
+    <link rel="stylesheet" href="{% static "babyblotter/css/vendor.css" %}" />
-          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
-          integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
-          crossorigin="anonymous" />
-    <link rel="stylesheet"
-          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
-          integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
-          crossorigin="anonymous" />
-    <link rel="stylesheet" href="{% static "css/tempusdominus-bootstrap-4.min.css" %}" />
 </head>
 <body style="padding-top: 5rem;">
 
 {% block nav %}{% endblock %}
 {% block page %}{% endblock %}
 
-<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+<script src="{% static "babyblotter/js/vendor.js" %}"></script>
-        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
-        crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
-        integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
-        crossorigin="anonymous"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
-        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
-        crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"
-        integrity="sha256-1hjUhpc44NwiNg8OwMu2QzJXhD8kcj+sJA3aCQZoUjg="
-        crossorigin="anonymous"></script>
-<script src="{% static "js/tempusdominus-bootstrap-4.min.js" %}"></script>
 {% block javascript %}{% endblock %}
 </body>
 </html>

gulpfile.js

@@ -0,0 +1,35 @@
+var gulp = require('gulp');
+var concat = require('gulp-concat');
+
+gulp.task('vendor:scripts', function() {
+    return gulp.src([
+        'node_modules/jquery/dist/jquery.js',
+        'node_modules/popper.js/dist/umd/popper.js',
+        'node_modules/bootstrap/dist/js/bootstrap.js',
+        'node_modules/moment/moment.js',
+        'node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js'
+    ])
+        .pipe(concat('vendor.js'))
+        .pipe(gulp.dest('babyblotter/static/babyblotter/js/'));
+});
+
+gulp.task('vendor:styles', function() {
+    return gulp.src([
+        'node_modules/bootstrap/dist/css/bootstrap.css',
+        'node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css',
+        'node_modules/font-awesome/css/font-awesome.css'
+    ])
+        .pipe(concat('vendor.css'))
+        .pipe(gulp.dest('babyblotter/static/babyblotter/css/'));
+});
+
+gulp.task('vendor:fonts', function() {
+    return gulp.src([
+        'node_modules/font-awesome/fonts/*'
+    ])
+        .pipe(gulp.dest('babyblotter/static/babyblotter/fonts/'));
+});
+
+gulp.task('vendor', ['vendor:styles', 'vendor:scripts', 'vendor:fonts']);
+
+gulp.task('default', ['vendor']);

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "babyblotter",
+  "description": "Baby activities tracker application.",
+  "version": "0.1.0",
+  "devDependencies": {
+    "bootstrap": "^4.0.0-beta",
+    "font-awesome": "^4.7.0",
+    "gulp": "^3.9.1",
+    "gulp-concat": "^2.6.1",
+    "jquery": "^3.2.1",
+    "moment": "^2.18.1",
+    "popper.js": "^1.12.3",
+    "tempusdominus-bootstrap-4": "^5.0.0-alpha9"
+  }
+}