implement notifications

This commit is contained in:
Lukas Juhas 2017-11-21 17:27:56 +00:00
parent 29e510c1b6
commit 4296b41faf
4 changed files with 106 additions and 71 deletions

BIN
assets/icons/error.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
assets/icons/success.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -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',
public: './',
src: './assets',
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`, {
read: false,
})
.pipe(clean())
gulp.src(`${config.public}/css`, {
read: false,
})
.pipe(clean())
));
gulp.task('styles', ['clean-styles'], () => (
gulp.src([`${config.src}/styles/*.scss`])
.pipe(gulpif(!production, sourcemaps.init()))
.pipe(sass({
outputStyle: production ? 'compressed' : 'nested',
}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions'],
}))
.pipe(rename({
suffix: '.min',
}))
.pipe(gulpif(!production, sourcemaps.write('.')))
.pipe(gulp.dest(`${config.public}/css`))
gulp.src([`${config.src}/styles/*.scss`])
.pipe(gulpif(!production, sourcemaps.init()))
.pipe(sass({
outputStyle: production ? 'compressed' : 'nested',
}).on('error', (err) => {
notification('Failed to compile styles. 😱', 'error');
log(err.stack);
error = true;
}))
.pipe(autoprefixer({
browsers: ['last 10 versions'],
}))
.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`, {
read: false,
})
.pipe(clean())
gulp.src(`${config.public}/js`, {
read: false,
})
.pipe(clean())
));
gulp.task('scripts', ['clean-scripts'], () => {
let env = 'development';
if (production) {
env = 'production';
}
let env = 'development';
if (production) {
env = 'production';
}
rollup({
entry: `${config.src}/scripts/scripts.js`,
plugins: [
multiEntry(),
buble(),
nodeResolve({
browser: true,
main: true,
jsnext: true,
}),
commonjs({
include: [
'node_modules/**',
`${config.src}/**`,
rollup({
entry: `${config.src}/scripts/scripts.js`,
plugins: [
multiEntry(),
buble(),
nodeResolve({
browser: true,
main: true,
jsnext: true,
}),
commonjs({
include: [
'node_modules/**',
`${config.src}/**`,
],
}),
json(),
replace({
'process.env.NODE_ENV': JSON.stringify(env),
}),
production ? uglify({}, minify) : '',
],
}),
json(),
replace({
'process.env.NODE_ENV': JSON.stringify(env),
}),
production ? uglify({}, minify) : '',
],
}).then((bundle) => {
bundle.write({
format: 'iife',
moduleName: 'BarebonesBundle',
sourceMap: !production,
dest: `${config.public}/js/script.min.js`,
}).then((bundle) => {
bundle.write({
format: 'iife',
moduleName: 'BarebonesBundle',
sourceMap: !production,
dest: `${config.public}/js/script.min.js`,
});
}).catch(err => {
notification('Failed to compile scripts. 😱', 'error');
log(err.stack);
error = true;
});
}).catch(err => log(err.stack));
});
/**
* Watch
*/
gulp.task('watch-files', tasks, () => {
gulp.watch(`${config.src}/styles/**/*.scss`, ['styles']);
gulp.watch(`${config.src}/scripts/**/*.js`, ['scripts']);
gulp.watch(`${config.src}/images/**/*.*`, ['images']);
gulp.watch(`${config.src}/styles/**/*.scss`, ['styles']);
gulp.watch(`${config.src}/scripts/**/*.js`, ['scripts']);
gulp.watch(`${config.src}/images/**/*.*`, ['images']);
});
/**
* Images
*/
gulp.task('images', () => {
// hadle all images that are not svg
gulp.src(`${config.src}/images/**/*.*`)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{
removeViewBox: false,
}],
}))
.pipe(gulp.dest(`${config.public}/img`));
// hadle all images that are not svg
gulp.src(`${config.src}/images/**/*.*`)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{
removeViewBox: false,
}],
}))
.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;
runSequence(tasks);
production = true;
runSequence(tasks, () => {
if(!error) {
notification('Build complete! 🍻');
}
});
});
gulp.task('default', () => (
runSequence(tasks)
runSequence(tasks)
));

View File

@ -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",