implement notifications

gulpfile.babel.js

@@ -16,17 +16,20 @@ import multiEntry from 'rollup-plugin-multi-entry';
 import uglify from 'rollup-plugin-uglify';
 import { minify } from 'uglify-js';
 import imagemin from 'gulp-imagemin';
+import notify from 'gulp-notify';
 import runSequence from 'run-sequence';
+import path from 'path';
 
 const log = console.log;
 let production = false;
+let error = false;
 
 /**
  * Config
  */
 const config = {
-  src: './assets',
+    src: './assets',
-  public: './',
+    public: './',
 };
 
 /**
@@ -34,116 +37,147 @@ const config = {
  */
 const tasks = ['styles', 'scripts', 'images'];
 
+/**
+ * Notification
+ *
+ * @param {string} message
+ * @param {string} status
+ */
+function notification(message = '', status = 'success') {
+    return gulp.src('./node_modules/gulp-notify/test/fixtures/1.txt')
+        .pipe(notify({
+            title: 'Barebones',
+            message,
+            icon: path.join(__dirname, `assets/icons/${status}.png`),
+        }));
+}
+
 /**
  * Styles
  */
 gulp.task('clean-styles', () => (
-  gulp.src(`${config.public}/css`, {
+    gulp.src(`${config.public}/css`, {
-    read: false,
+        read: false,
-  })
+    })
-  .pipe(clean())
+        .pipe(clean())
 ));
 
 gulp.task('styles', ['clean-styles'], () => (
-  gulp.src([`${config.src}/styles/*.scss`])
+    gulp.src([`${config.src}/styles/*.scss`])
-  .pipe(gulpif(!production, sourcemaps.init()))
+        .pipe(gulpif(!production, sourcemaps.init()))
-  .pipe(sass({
+        .pipe(sass({
-    outputStyle: production ? 'compressed' : 'nested',
+            outputStyle: production ? 'compressed' : 'nested',
-  }).on('error', sass.logError))
+        }).on('error', (err) => {
-  .pipe(autoprefixer({
+            notification('Failed to compile styles. 😱', 'error');
-    browsers: ['last 10 versions'],
+            log(err.stack);
-  }))
+            error = true;
-  .pipe(rename({
+        }))
-    suffix: '.min',
+        .pipe(autoprefixer({
-  }))
+            browsers: ['last 10 versions'],
-  .pipe(gulpif(!production, sourcemaps.write('.')))
+        }))
-  .pipe(gulp.dest(`${config.public}/css`))
+        .pipe(rename({
+            suffix: '.min',
+        }))
+        .pipe(gulpif(!production, sourcemaps.write('.')))
+        .pipe(gulp.dest(`${config.public}/css`))
 ));
 
 /**
  * Scripts
  */
 gulp.task('clean-scripts', () => (
-  gulp.src(`${config.public}/js`, {
+    gulp.src(`${config.public}/js`, {
-    read: false,
+        read: false,
-  })
+    })
-  .pipe(clean())
+        .pipe(clean())
 ));
 
 gulp.task('scripts', ['clean-scripts'], () => {
-  let env = 'development';
+    let env = 'development';
-  if (production) {
+    if (production) {
-    env = 'production';
+        env = 'production';
-  }
+    }
 
-  rollup({
+    rollup({
-    entry: `${config.src}/scripts/scripts.js`,
+        entry: `${config.src}/scripts/scripts.js`,
-    plugins: [
+        plugins: [
-      multiEntry(),
+            multiEntry(),
-      buble(),
+            buble(),
-      nodeResolve({
+            nodeResolve({
-        browser: true,
+                browser: true,
-        main: true,
+                main: true,
-        jsnext: true,
+                jsnext: true,
-      }),
+            }),
-      commonjs({
+            commonjs({
-        include: [
+                include: [
-          'node_modules/**',
+                    'node_modules/**',
-          `${config.src}/**`,
+                    `${config.src}/**`,
+                ],
+            }),
+            json(),
+            replace({
+                'process.env.NODE_ENV': JSON.stringify(env),
+            }),
+            production ? uglify({}, minify) : '',
         ],
-      }),
+    }).then((bundle) => {
-      json(),
+        bundle.write({
-      replace({
+            format: 'iife',
-        'process.env.NODE_ENV': JSON.stringify(env),
+            moduleName: 'BarebonesBundle',
-      }),
+            sourceMap: !production,
-      production ? uglify({}, minify) : '',
+            dest: `${config.public}/js/script.min.js`,
-    ],
+        });
-  }).then((bundle) => {
+    }).catch(err => {
-    bundle.write({
+        notification('Failed to compile scripts. 😱', 'error');
-      format: 'iife',
+        log(err.stack);
-      moduleName: 'BarebonesBundle',
+        error = true;
-      sourceMap: !production,
-      dest: `${config.public}/js/script.min.js`,
     });
-  }).catch(err => log(err.stack));
 });
 
 /**
  * Watch
  */
 gulp.task('watch-files', tasks, () => {
-  gulp.watch(`${config.src}/styles/**/*.scss`, ['styles']);
+    gulp.watch(`${config.src}/styles/**/*.scss`, ['styles']);
-  gulp.watch(`${config.src}/scripts/**/*.js`, ['scripts']);
+    gulp.watch(`${config.src}/scripts/**/*.js`, ['scripts']);
-  gulp.watch(`${config.src}/images/**/*.*`, ['images']);
+    gulp.watch(`${config.src}/images/**/*.*`, ['images']);
 });
 
 /**
  * Images
  */
 gulp.task('images', () => {
-  // hadle all images that are not svg
+    // hadle all images that are not svg
-  gulp.src(`${config.src}/images/**/*.*`)
+    gulp.src(`${config.src}/images/**/*.*`)
-    .pipe(imagemin({
+        .pipe(imagemin({
-      progressive: true,
+            progressive: true,
-      svgoPlugins: [{
+            svgoPlugins: [{
-        removeViewBox: false,
+                removeViewBox: false,
-      }],
+            }],
-    }))
+        }))
-    .pipe(gulp.dest(`${config.public}/img`));
+        .pipe(gulp.dest(`${config.public}/img`));
 });
 
 /**
  * Main Tasks
  */
 gulp.task('watch', () => (
-  runSequence(tasks, 'watch-files')
+    runSequence(tasks, 'watch-files', () => {
+        if (!error) {
+            notification('Watching files... 👀');
+        }
+    })
 ));
 
 gulp.task('build', () => {
-  production = true;
+    production = true;
-  runSequence(tasks);
+    runSequence(tasks, () => {
+        if(!error) {
+            notification('Build complete! 🍻');
+        }
+    });
 });
 
 gulp.task('default', () => (
-  runSequence(tasks)
+    runSequence(tasks)
 ));

package.json

@@ -31,6 +31,7 @@
     "gulp-clean": "^0.3.2",
     "gulp-if": "^2.0.2",
     "gulp-imagemin": "^3.4.0",
+    "gulp-notify": "^3.0.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0",
     "gulp-sourcemaps": "^2.6.1",