From 3d0af7f9a5f483fd8f71aa4dcc9abbf3ed39831e Mon Sep 17 00:00:00 2001 From: Christopher Charbonneau Wells Date: Mon, 21 Aug 2017 10:43:13 -0400 Subject: [PATCH] Initiate sass-based app style system. --- babyblotter/static_site/scss/_custom.scss | 1 + babyblotter/static_site/scss/babyblotter.scss | 4 +++ babyblotter/templates/babyblotter/base.html | 1 + gulpfile.js | 36 +++++++++++++++---- package.json | 1 + 5 files changed, 37 insertions(+), 6 deletions(-) create mode 100644 babyblotter/static_site/scss/_custom.scss create mode 100644 babyblotter/static_site/scss/babyblotter.scss diff --git a/babyblotter/static_site/scss/_custom.scss b/babyblotter/static_site/scss/_custom.scss new file mode 100644 index 00000000..7720f1f5 --- /dev/null +++ b/babyblotter/static_site/scss/_custom.scss @@ -0,0 +1 @@ +$body-bg: $white; diff --git a/babyblotter/static_site/scss/babyblotter.scss b/babyblotter/static_site/scss/babyblotter.scss new file mode 100644 index 00000000..820f502b --- /dev/null +++ b/babyblotter/static_site/scss/babyblotter.scss @@ -0,0 +1,4 @@ +@import "../../../node_modules/bootstrap/scss/functions"; +@import "../../../node_modules/bootstrap/scss/variables"; +@import "custom"; +@import "../../../node_modules/bootstrap/scss/bootstrap"; diff --git a/babyblotter/templates/babyblotter/base.html b/babyblotter/templates/babyblotter/base.html index 6582fac3..743ce5d1 100644 --- a/babyblotter/templates/babyblotter/base.html +++ b/babyblotter/templates/babyblotter/base.html @@ -7,6 +7,7 @@ {% block title %}{% endblock %} | Baby Blotter + diff --git a/gulpfile.js b/gulpfile.js index 7fa3e73c..fb739c13 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,8 +1,9 @@ var gulp = require('gulp'); -var pump = require('pump'); var concat = require('gulp-concat'); var csso = require('gulp-csso'); +var pump = require('pump'); +var sass = require('gulp-sass'); var uglify = require('gulp-uglify'); /* APP FILES */ @@ -18,7 +19,18 @@ gulp.task('app:scripts', function() { .pipe(gulp.dest('babyblotter/static/babyblotter/js/')); }); -gulp.task('app', ['app:scripts']); +gulp.task('app:styles', function (cb) { + pump([ + gulp.src('babyblotter/static_site/scss/babyblotter.scss'), + sass().on('error', sass.logError), + concat('app.css'), + gulp.dest('babyblotter/static/babyblotter/css/') + ], + cb + ); +}); + +gulp.task('app', ['app:scripts', 'app:styles']); /* VENDOR FILES */ @@ -36,7 +48,7 @@ gulp.task('vendor:scripts', function() { gulp.task('vendor:styles', function() { return gulp.src([ - 'node_modules/bootstrap/dist/css/bootstrap.css', + //'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' ]) @@ -66,6 +78,17 @@ gulp.task('compress:app:scripts', function (cb) { ); }); +gulp.task('compress:app:styles', function (cb) { + pump([ + gulp.src('babyblotter/static/babyblotter/css/app.css'), + concat('app.min.css'), + csso(), + gulp.dest('babyblotter/static/babyblotter/css/') + ], + cb + ); +}); + gulp.task('compress:vendor:scripts', function (cb) { pump([ gulp.src('babyblotter/static/babyblotter/js/vendor.js'), @@ -77,7 +100,7 @@ gulp.task('compress:vendor:scripts', function (cb) { ); }); -gulp.task('compress:vendor:css', function (cb) { +gulp.task('compress:vendor:styles', function (cb) { pump([ gulp.src('babyblotter/static/babyblotter/css/vendor.css'), concat('vendor.min.css'), @@ -90,10 +113,11 @@ gulp.task('compress:vendor:css', function (cb) { gulp.task('compress', [ 'compress:app:scripts', + 'compress:app:styles', 'compress:vendor:scripts', - 'compress:vendor:css' + 'compress:vendor:styles' ]); /* DEFAULT */ -gulp.task('default', ['vendor', 'app', 'compress']); \ No newline at end of file +gulp.task('default', ['vendor', 'app']); \ No newline at end of file diff --git a/package.json b/package.json index f1503de0..19b77e00 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "gulp": "^3.9.1", "gulp-concat": "^2.6.1", "gulp-csso": "^3.0.0", + "gulp-sass": "^3.1.0", "gulp-uglify": "^3.0.0", "jquery": "^3.2.1", "moment": "^2.18.1",