Switch from gulp to npm as task runner

flaskbb/themes/aurora/Gulpfile.js

@@ -1,147 +0,0 @@
-var gulp = require('gulp-help')(require('gulp')),
-    bower = require('gulp-bower')
-    sass = require('gulp-sass'),
-    uglify = require('gulp-uglify'),
-    rename = require('gulp-rename'),
-    concat = require('gulp-concat'),
-    notify = require('gulp-notify'),
-    autoprefixer = require('gulp-autoprefixer'),
-    imagemin = require('gulp-imagemin');
-
-var basicConfig = {
-    srcDir: './src',
-    destDir: './static',
-    bowerDir: './bower_components'
-};
-
-var config = {
-    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(basicConfig.bowerDir))
-});
-
-
-gulp.task('update', 'updates the bower dependencies', function() {
-    return bower({ cmd: 'update' });
-});
-
-
-gulp.task('icons', 'copies the icons to destDir', function() {
-    return gulp.src(config.font.icons)
-        .pipe(gulp.dest(config.font.dest));
-});
-
-
-gulp.task('image', 'optimizes the images', function() {
-    return gulp.src(config.imgs.src + '/*')
-        .pipe(imagemin({
-            progressive: true,
-            svgoPlugins: [
-                { removeViewBox: false },
-                { cleanupIDs: false }
-            ]
-        }))
-        .pipe(gulp.dest(config.imgs.dest));
-});
-
-
-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('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.js.dest));
-});
-
-
-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.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() {});
-
-
-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', 'default command', ['bower', 'icons', 'sass', 'scripts', 'image']);

flaskbb/themes/aurora/README.md

@@ -3,44 +3,53 @@
 Make sure that you have npm (nodejs) installed. You can get it from [
 here](https://nodejs.org).
 
-This theme uses SASS (http://sass-lang.com/), a CSS preprocessor, for better development.
+This theme uses SASS (https://sass-lang.com/), a CSS preprocessor, for better development.
 
 Before you can compile the source, you need to get a few dependencies first.
-Run (in the directory where **this** README is located):
-
-
-- ``npm install``
-
-and afterwards
-
-- ``node_modules/gulp/bin/gulp.js``
+This can be achieved by running ``npm install`` in the directory where **this** README is located.
 
 
 # TASKS
 
-To get a list of all available tasks you can either read the ``Gulpfile.js``
-or see the list below:
+To minimize the dependencies to build and minify our source files, we just use
+npm for it.
 
     Usage
-      gulp [TASK] [OPTIONS...]
+      npm run [TASK]
 
     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:
-
-``node_modules/gulp/bin/gulp.js watch``
+      clean
+        rm -f node_modules
+      autoprefixer
+        postcss -u autoprefixer -r static/css/*
+      scss
+        ./tools/build_css
+      uglify
+        ./tools/build_js
+      imagemin
+        imagemin src/img/* -o static/img
+      fonts
+        ./tools/build_fonts
+      build:css
+        npm run scss && npm run autoprefixer
+      build:js
+        npm run uglify
+      build:images
+        npm run imagemin && npm run fonts
+      build:all
+        npm run build:css && npm run build:js && npm run build:images
+      watch:css
+        onchange 'src/scss' -- npm run build:css
+      watch:js
+        onchange 'src/js' -- npm run build:js
+      watch:all
+        npm-run-all -p watch:css watch:js
+
+To watch for changes in our JS and SCSS files, you just have to run:
+
+``npm run watch:all``
+
+and upon changes it will automatically rebuild the files.
 
 
 # CREATING YOUR OWN THEME
@@ -58,41 +67,33 @@ you have to copy them over from flaskbb's template folder into your template
 folder
 5. Add some information about your theme using the ``info.json``. Have look at
 aurora's ``info.json`` for an example.
-6. Edit the ``bower.json`` and ``package.json`` to your needs.
+6. Edit the ``package.json`` to your needs.
 7. Happy theming!
 
 In the end your folder structure should look like this:
 
     ── example_theme/
-        ├── bower_components
-        │   └── ...
         ├── node_modules
         │   └── ...
         ├── src
-        │   ├── styles.scss
-        │   ├── _aurora.scss
-        │   ├── _bootstrap-variables.scss
-        │   ├── _button.scss
-        │   ├── _category.scss
-        │   ├── _editor.scss
-        │   ├── _fixes.scss
-        │   ├── _forum.scss
-        │   ├── _management.scss
-        │   ├── _misc.scss
-        │   ├── _mixins.scss
-        │   ├── _navigation.scss
-        │   ├── _panel.scss
-        │   ├── _profile.scss
-        │   ├── _topic.scss
-        │   └── _variables.scss
+        │   ├── img
+        │   │   └── ...
+        │   ├── js
+        │   │   └── ...
+        │   └── scss
+        │       └── ...
         ├── static
+        │   ├── img
         │   ├── css
         │   ├── fonts
         │   └── js
         ├── templates
+        │   ├── ...
         │   └── layout.html
-        ├── bower.json
-        ├── Gulpfile.js
+        ├── tools
+        │   ├── build_css
+        │   ├── build_fonts
+        │   └── build_js
         ├── info.json
         ├── LICENSE
         ├── package.json

flaskbb/themes/aurora/package.json

@@ -3,20 +3,41 @@
   "description": "The default theme for FlaskBB.",
   "version": "1.0.0",
   "license": "BSD-3-Clause",
-  "author": "Peter Justin",
+  "author": "Peter Justin <peter.justin@outlook.com>",
   "url": "https://flaskbb.org",
   "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sh4nks/flaskbb"
+  },
+  "bugs": "https://github.com/sh4nks/flaskbb/issues",
+  "keywords": [
+    "flaskbb",
+    "theme",
+    "aurora"
+  ],
+  "scripts": {
+    "clean": "rm -f node_modules",
+    "autoprefixer": "postcss -u autoprefixer -r static/css/*",
+    "scss": "./tools/build_css",
+    "uglify": "./tools/build_js",
+    "imagemin": "imagemin src/img/* -o static/img",
+    "fonts": "./tools/build_fonts",
+    "build:css": "npm run scss && npm run autoprefixer",
+    "build:js": "npm run uglify",
+    "build:images": "npm run imagemin && npm run fonts",
+    "build:all": "npm run build:css && npm run build:js && npm run build:images",
+    "watch:css": "onchange 'src/scss' -- npm run build:css",
+    "watch:js": "onchange 'src/js' -- npm run build:js",
+    "watch:all": "npm-run-all -p watch:css watch:js"
+  },
   "devDependencies": {
-    "bower": "^1.6.9",
-    "gulp": "^3.8.11",
-    "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-sass": "^2.2.0",
-    "gulp-uglify": "~1.5.3"
+    "autoprefixer": "^6.4.0",
+    "imagemin-cli": "^3.0.0",
+    "node-sass": "^3.8.0",
+    "npm-run-all": "^3.0.0",
+    "onchange": "^2.5.0",
+    "postcss-cli": "^2.5.2",
+    "uglify-js": "^2.7.3"
   }
 }

flaskbb/themes/aurora/tools/build_css

@@ -0,0 +1,6 @@
+node-sass \
+    src/scss/styles.scss \
+    --include-path 'src/scss node_modules/bootstrap-sass/assets/stylesheets/bootstrap node_modules/font-awesome/scss/font-awesome' \
+    --precision 8 \
+    --output-style compressed \
+    --output static/css/

flaskbb/themes/aurora/tools/build_fonts

@@ -0,0 +1,2 @@
+cp node_modules/font-awesome/fonts/* static/fonts/ && \
+cp -r node_modules/bootstrap-sass/assets/fonts/bootstrap static/fonts/

flaskbb/themes/aurora/tools/build_js

@@ -0,0 +1,10 @@
+uglifyjs \
+    node_modules/jquery/dist/jquery.min.js \
+    node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js \
+    node_modules/bootstrap-markdown/js/bootstrap-markdown.js \
+    node_modules/marked/lib/marked.js \
+    node_modules/jquery-textcomplete/dist/jquery.textcomplete.min.js \
+    src/js/*.js \
+    -m \
+    -c \
+    -o static/js/scripts.min.js