Update dependencies and Gulpfile

flaskbb/themes/aurora/Gulpfile.js

@@ -1,89 +1,147 @@
-var gulp = require('gulp'),
+var gulp = require('gulp-help')(require('gulp')),
     bower = require('gulp-bower')
-    sass = require('gulp-ruby-sass'),
-    minifycss = require('gulp-minify-css'),
+    sass = require('gulp-sass'),
     uglify = require('gulp-uglify'),
     rename = require('gulp-rename'),
     concat = require('gulp-concat'),
-    notify = require('gulp-notify');
+    notify = require('gulp-notify'),
+    autoprefixer = require('gulp-autoprefixer'),
+    imagemin = require('gulp-imagemin');
+
+var basicConfig = {
+    srcDir: './src',
+    destDir: './static',
+    bowerDir: './bower_components'
+};
 
 var config = {
-
    sassPath: './src',
-    sassDestPath: './static/css',
-    jsPath: './static/js',
-
    bowerDir: './bower_components'

-}
-
-// install dependencies
-gulp.task('bower', function() {

+    scss: {
+        src: basicConfig.srcDir + '/scss',
+        dest: basicConfig.destDir + '/css'
+    },
+
+    imgs: {
+        src: basicConfig.srcDir + '/imgs',
+        dest: basicConfig.destDir + '/imgs'
+    },
+
+    js: {
+        flaskbb: basicConfig.destDir + '/js/flaskbb.js',
+        emoji: basicConfig.destDir + '/js/emoji.js',
+        editorConfig: basicConfig.destDir + '/js/editor.js',
+        dest: basicConfig.destDir + '/js'
+    },
+
+    editor: {
+        lib: basicConfig.bowerDir + '/bootstrap-markdown/js/bootstrap-markdown.js',
+        parser: basicConfig.bowerDir + '/marked/lib/marked.js',
+        textcomplete: basicConfig.bowerDir + '/jquery-textcomplete/dist/jquery.textcomplete.min.js'
+    },
+
+    jquery: basicConfig.bowerDir + '/jquery/dist/jquery.min.js',
+
+    bootstrap: {
+        js: basicConfig.bowerDir + '/bootstrap-sass/assets/javascripts/bootstrap.min.js',
+        scss: basicConfig.bowerDir + '/bootstrap-sass/assets/stylesheets'
+    },
+
+    font: {
+        icons: basicConfig.bowerDir + '/font-awesome/fonts/*.**',
+        scss: basicConfig.bowerDir + '/font-awesome/scss',
+        dest: basicConfig.destDir + '/fonts'
+    }
+};
+
+
+gulp.task('bower', 'runs bower', function() {
     return bower()
-
        .pipe(gulp.dest(config.bowerDir))

+        .pipe(gulp.dest(basicConfig.bowerDir))
 });
 
-// update dependencies
-gulp.task('update', function() {
-  return bower({ cmd: 'update'});
+
+gulp.task('update', 'updates the bower dependencies', function() {
+    return bower({ cmd: 'update' });
 });
 
-gulp.task('icons', function() {

-    return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')

-        .pipe(gulp.dest('./static/fonts'));

+
+gulp.task('icons', 'copies the icons to destDir', function() {
+    return gulp.src(config.font.icons)
+        .pipe(gulp.dest(config.font.dest));
 });
 
-gulp.task('sass', function () {
-    return sass(config.sassPath + '/styles.scss', {
-            style: 'compressed',
-            loadPath: [
-                './src/',
-
                config.bowerDir + '/bootstrap-sass/assets/stylesheets',
-
                config.bowerDir + '/font-awesome/scss'
+
+gulp.task('image', 'optimizes the images', function() {
+    return gulp.src(config.imgs.src + '/*')
+        .pipe(imagemin({
+            progressive: true,
+            svgoPlugins: [
+                { removeViewBox: false },
+                { cleanupIDs: false }
             ]
-        })
-        .on("error", notify.onError(function (error) {
-
                return "Error: " + error.message;
-
         }))
+        }))
+        .pipe(gulp.dest(config.imgs.dest));
+});
+
 
-        // add the bootstrap-markdown style to the styles.css
-        .pipe(gulp.dest(config.sassDestPath));
+gulp.task('sass', 'compiles all scss files to one css file', function () {
+    return gulp.src(config.scss.src + '/**/*.scss')
+        .pipe(sass({
+            outputStyle: 'compressed',
+            precision: 8,
+            includePaths: [
+                basicConfig.srcDir + '/scss',
+                config.bootstrap.scss,
+                config.font.scss
+            ]})
+            .on('error', notify.onError(function(error) {
+                return "Error: " + error.message;
+            })))
+        .pipe(autoprefixer('last 2 version'))
+        .pipe(rename({basename: 'styles', extname: '.min.css'}))
+        .pipe(gulp.dest(config.scss.dest));
 });
 
-gulp.task('css', ['sass'], function() {
-    return gulp.src([
-            config.sassDestPath + '/styles.css',
-            config.bowerDir + '/bootstrap-markdown/css/bootstrap-markdown.min.css'])
-        .pipe(concat('styles.css'))
-        .pipe(gulp.dest(config.sassDestPath));
-})
-
-gulp.task('main-scripts', function() {
-    return gulp.src([config.bowerDir + '/jquery/dist/jquery.min.js',
-                     config.bowerDir + '/bootstrap-sass/assets/javascripts/bootstrap.min.js',
-                     config.jsPath + '/flaskbb.js'])
+
+gulp.task('main-scripts', 'concates all main js files to one js file', function() {
+    return gulp.src([config.jquery,
+                     config.bootstrap.js,
+                     config.js.flaskbb])
         .pipe(concat('scripts.min.js'))
         .pipe(uglify())
-        .pipe(gulp.dest(config.jsPath));
+        .pipe(gulp.dest(config.js.dest));
 });
 
-// all the scripts that are needed for our texteditor
-// we bundle them extra because we do not always need them
-gulp.task('editor-scripts', function() {
-    return gulp.src([
-                     config.bowerDir + '/marked/lib/marked.js',
-                     config.bowerDir + '/bootstrap-markdown/js/bootstrap-markdown.js',
-                     config.bowerDir + '/jquery-textcomplete/dist/jquery.textcomplete.min.js',
-                     config.jsPath + '/emoji.js',
-                     config.jsPath + '/editor.js'])
+
+gulp.task('editor-scripts', 'concates all editor related scripts to one file', function() {
+    return gulp.src([config.editor.parser,
+                     config.editor.lib,
+                     config.editor.textcomplete,
+                     config.js.emoji,
+                     config.js.editorConfig])
         .pipe(concat('editor.min.js'))
         .pipe(uglify())
-        .pipe(gulp.dest(config.jsPath));
-})
+        .pipe(gulp.dest(config.js.dest));
+});
+
+
+gulp.task('vendor-scripts', 'concates all vendor js files to one js file (useful for debugging)', function() {
+    return gulp.src([config.jquery,
+                     config.bootstrap.js,
+                     config.editor.parser,
+                     config.editor.lib,
+                     config.editor.textcomplete])
+        .pipe(concat('scripts.min.js'))
+        .pipe(uglify())
+        .pipe(gulp.dest(config.js.dest));
+});
+
 
 gulp.task('scripts', ['main-scripts', 'editor-scripts'], function() {});
 
-// Rerun the task when a file changes
-
gulp.task('watch', function() {
-
    gulp.watch(config.sassPath + '/*.scss', ['css']);

+
+gulp.task('watch', 'watches for .scss and .js changes', function() {
+    gulp.watch(config.sassPath + '/*.scss', ['sass']);
     gulp.watch(config.jsPath + '/*.js', ['scripts'])
 });
 
-

gulp.task('default', ['bower', 'icons', 'css', 'scripts']);
+gulp.task('default', 'default command', ['bower', 'icons', 'sass', 'scripts', 'image']);

flaskbb/themes/aurora/README.md

@@ -21,16 +21,22 @@ and afterwards
 To get a list of all available tasks you can either read the ``Gulpfile.js``
 or see the list below:
 
-- ``bower`` - installs all bower dependencies
-- ``update`` - updates all bower dependencies
-- ``icons`` - copies the icons (fonts) from the bower directory to the ``static/fonts`` directory.
-- ``sass`` - compiles all sass files found in the ``src/`` directory and copies them to ``static/css``
-- ``css`` - includes the task ``sass`` **and** will also add the css file ``pygemnts.css`` to the compiled file.
-- ``scripts`` - compiles the always needed javascript files (including jquery and bootstrap) into one.
-- ``editor-scripts`` - compiles all javascript files needed for the editor to one.
-- ``watch`` - watches of any changes happening in ``src/``
-- ``default`` - runs all the above tasks in correct order.
-
+    Usage
+      gulp [TASK] [OPTIONS...]
+
+    Available tasks
+      bower           runs bower
+      default         default command [bower, icons, sass, scripts, image]
+      editor-scripts  concates all editor related scripts to one file
+      help            Display this help text.
+      icons           copies the icons to destDir
+      image           optimizes the images
+      main-scripts    concates all main js files to one js file
+      sass            compiles all scss files to one css file
+      scripts         [main-scripts, editor-scripts]
+      update          updates the bower dependencies
+      vendor-scripts  concates all vendor js files to one js file (useful for debugging)
+      watch           watches for .scss and .js changes
 
 You can run a task with gulp like this:
 

flaskbb/themes/aurora/bower.json

@@ -21,11 +21,11 @@
     "tests"
   ],
   "dependencies": {
-    "jquery": "~2.1.4",
+    "jquery": "~2.2.3",
     "bootstrap-sass": "~3.3.6",
     "font-awesome": "fontawesome#~4.5.0",
-    "bootstrap-markdown": "~2.9.0",
+    "bootstrap-markdown": "~2.10.0",
     "marked": "~0.3.5",
-    "jquery-textcomplete": "~0.8.1"
+    "jquery-textcomplete": "~1.3.4"
   }
 }

flaskbb/themes/aurora/package.json

@@ -9,12 +9,14 @@
   "devDependencies": {
     "bower": "^1.6.9",
     "gulp": "^3.8.11",
-    "gulp-bower": "0.0.11",
-    "gulp-concat": "~2.4.2",
-    "gulp-minify-css": "^1.2.2",
+    "gulp-autoprefixer": "^3.1.0",
+    "gulp-bower": "0.0.13",
+    "gulp-concat": "~2.6.0",
+    "gulp-help": "^1.6.1",
+    "gulp-imagemin": "^2.4.0",
     "gulp-notify": "^2.0.1",
     "gulp-rename": "^1.2.2",
-    "gulp-ruby-sass": "^2.0.6",
-    "gulp-uglify": "~1.0.1"
+    "gulp-sass": "^2.2.0",
+    "gulp-uglify": "~1.5.3"
   }
 }