further improvements to the flow, allow multiple js bundles, add more documentation

This commit is contained in:
Lukas Juhas 2017-11-30 13:31:38 +00:00
parent 5feb3a199c
commit 8357cef6b4
5 changed files with 52 additions and 25 deletions

View File

@ -1,8 +1,8 @@
/** /**
* Base config * Base config
* *
* src - main assets folder * @param src - Main assets folder
* public - folder where assets should be compiled * @param public - Folder where assets should be compiled
*/ */
const config = { const config = {
src: './assets', src: './assets',
@ -14,8 +14,8 @@ const config = {
* *
* For scripts and styles, each file will be a separate bundle * For scripts and styles, each file will be a separate bundle
* *
* base - base configuration * @param base - Base configuration
* scripts - array of script files to create bundles from * @param scripts - Array of script files to create bundles from
*/ */
export default { export default {
/** /**
@ -25,9 +25,11 @@ export default {
/** /**
* Scripts * Scripts
*
* Add path cotinuing after 'config.src'
*/ */
scripts: [ scripts: [
`${config.src}/scripts/scripts.js`, '/js/scripts.js',
], ],
/** /**

View File

@ -61,7 +61,7 @@ function barebones_enqueue_scripts()
{ {
// wp_enqueue_style( 'fonts', '//fonts.googleapis.com/css?family=Font+Family' ); // wp_enqueue_style( 'fonts', '//fonts.googleapis.com/css?family=Font+Family' );
// wp_enqueue_style( 'icons', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' ); // wp_enqueue_style( 'icons', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
wp_enqueue_script('script', get_stylesheet_directory_uri() . '/js/script.min.js?' . filemtime(get_stylesheet_directory() . '/js/script.min.js'), [], null, true); wp_enqueue_script('scripts', get_stylesheet_directory_uri() . '/js/scripts.min.js?' . filemtime(get_stylesheet_directory() . '/js/scripts.min.js'), [], null, true);
} }
add_action('wp_enqueue_scripts', 'barebones_enqueue_scripts'); add_action('wp_enqueue_scripts', 'barebones_enqueue_scripts');

View File

@ -31,7 +31,7 @@ let error = false;
/** /**
* Tasks - in order * Tasks - in order
*/ */
const tasks = ['clean', 'styles', 'scripts', 'images']; const tasks = ['styles', 'scripts', 'images'];
/** /**
* Notification * Notification
@ -78,14 +78,14 @@ gulp.task('styles', () => (
.pipe(gulp.dest(`${config.base.public}/css`)) .pipe(gulp.dest(`${config.base.public}/css`))
)); ));
gulp.task('scripts', () => { const roll = (entry, dest) => {
let env = 'development'; let env = 'development';
if (production) { if (production) {
env = 'production'; env = 'production';
} }
rollup({ return rollup({
entry: `${config.base.src}/scripts/scripts.js`, entry,
plugins: [ plugins: [
multiEntry(), multiEntry(),
buble(), buble(),
@ -111,13 +111,26 @@ gulp.task('scripts', () => {
format: 'iife', format: 'iife',
moduleName: 'BarebonesBundle', moduleName: 'BarebonesBundle',
sourceMap: !production, sourceMap: !production,
dest: `${config.base.public}/js/script.min.js`, dest,
}); });
}).catch((err) => { }).catch((err) => {
notification('Failed to compile scripts. 😱', 'error'); notification('Failed to compile scripts. 😱', 'error');
log(err.stack); log(err.stack);
error = true; error = true;
}); });
};
gulp.task('scripts', (cb) => {
if (config.scripts.length) {
config.scripts.forEach((filePath) => {
const formattedPath = filePath.replace(/^\/|\/$/g, ''); // remove leading forward slash
const entry = `${config.base.src}/${formattedPath}`;
const dest = `${config.base.public}/${formattedPath.replace('.js', '.min.js')}`;
// regex to remove duplicate forward slashes
roll(entry.replace(/([^:]\/)\/+/g, '$1'), dest.replace(/([^:]\/)\/+/g, '$1'));
});
}
cb();
}); });
/** /**
@ -132,7 +145,7 @@ gulp.task('watch-files', tasks, () => {
/** /**
* Images * Images
*/ */
gulp.task('images', () => { gulp.task('images', (cb) => {
// hadle all images that are not svg // hadle all images that are not svg
gulp.src(`${config.base.src}/images/**/*.*`) gulp.src(`${config.base.src}/images/**/*.*`)
.pipe(imagemin({ .pipe(imagemin({
@ -141,29 +154,41 @@ gulp.task('images', () => {
removeViewBox: false, removeViewBox: false,
}], }],
})) }))
.pipe(gulp.dest(`${config.base.public}/img`)); .pipe(gulp.dest(`${config.base.public}/img`))
.on('end', () => cb());
}); });
/** /**
* Main Tasks * Main Tasks
*/ */
gulp.task('watch', () => ( gulp.task('watch', cb => (
runSequence(tasks, 'watch-files', () => { runSequence('clean', () => {
if (!error) { runSequence(tasks, 'watch-files', () => {
notification('Watching files... 👀'); if (!error) {
} notification('Watching files... 👀');
}
cb();
});
}) })
)); ));
gulp.task('build', () => { gulp.task('build', (cb) => {
production = true; production = true;
runSequence(tasks, () => {
if (!error) { runSequence('clean', () => {
notification('Build complete! 🍻'); runSequence(tasks, () => {
} if (!error) {
notification('Build complete! 🍻');
cb();
}
});
}); });
}); });
gulp.task('default', () => ( gulp.task('default', cb => (
runSequence(tasks) runSequence('clean', () => {
runSequence(tasks, () => {
cb();
});
})
)); ));