From 5516db22c3dd38a6bb3ec8674e36bcc8f9bba90c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 29 Mar 2020 11:36:44 +1100 Subject: Gulp file broken down --- tasks/build.js | 227 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 227 insertions(+) create mode 100644 tasks/build.js (limited to 'tasks/build.js') diff --git a/tasks/build.js b/tasks/build.js new file mode 100644 index 00000000..797f67a7 --- /dev/null +++ b/tasks/build.js @@ -0,0 +1,227 @@ +/* eslint-disable import/no-extraneous-dependencies */ +// ========================================================================== +// Gulp build script +// ========================================================================== +/* eslint no-console: "off" */ + +const path = require('path'); +const gulp = require('gulp'); +// JavaScript +const terser = require('gulp-terser'); +const rollup = require('gulp-better-rollup'); +const babel = require('rollup-plugin-babel'); +const commonjs = require('rollup-plugin-commonjs'); +const resolve = require('rollup-plugin-node-resolve'); +// CSS +const sass = require('gulp-sass'); +const clean = require('gulp-clean-css'); +const prefix = require('gulp-autoprefixer'); +// Images +const svgstore = require('gulp-svgstore'); +const imagemin = require('gulp-imagemin'); +// Utils +const del = require('del'); +const filter = require('gulp-filter'); +const header = require('gulp-header'); +const rename = require('gulp-rename'); +const plumber = require('gulp-plumber'); +const size = require('gulp-size'); +const sourcemaps = require('gulp-sourcemaps'); +const browserSync = require('browser-sync').create(); +// Configs +const pkg = require('../package.json'); +const build = require('../build.json'); +// Info from package +const { browserslist: browsers } = pkg; +const minSuffix = '.min'; +// Paths +const root = path.join(__dirname, '..'); +const paths = { + plyr: { + // Source paths + src: { + sass: path.join(root, 'src/sass/**/*.scss'), + js: path.join(root, 'src/js/**/*.js'), + sprite: path.join(root, 'src/sprite/*.svg'), + }, + + // Output paths + output: path.join(root, 'dist/'), + }, + demo: { + // Source paths + src: { + sass: path.join(root, 'demo/src/sass/**/*.scss'), + js: path.join(root, 'demo/src/js/**/*.js'), + }, + + // Output paths + output: path.join(root, 'demo/dist/'), + + // Demo + root: path.join(root, 'demo/'), + }, +}; + +// Task lists +const tasks = { + css: [], + js: [], + sprite: [], +}; + +// Size plugin +const sizeOptions = { showFiles: true, gzip: true }; + +// Clean out /dist +gulp.task('clean', done => { + const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*')); + + // Don't delete the mp4 + dirs.push(`!${path.join(paths.plyr.output, '**/*.mp4')}`); + + del(dirs); + + done(); +}); + +// JavaScript +Object.entries(build.js).forEach(([filename, entry]) => { + const { dist, formats, namespace, polyfill, src } = entry; + + formats.forEach(format => { + const name = `js:${filename}:${format}`; + const extension = format === 'es' ? 'mjs' : 'js'; + tasks.js.push(name); + + gulp.task(name, () => + gulp + .src(src) + .pipe(plumber()) + .pipe(sourcemaps.init()) + .pipe( + rollup( + { + plugins: [ + resolve(), + commonjs(), + babel({ + presets: [ + [ + '@babel/env', + { + // debug: true, + useBuiltIns: polyfill ? 'usage' : false, + corejs: polyfill ? 3 : undefined, + bugfixes: true, + }, + ], + ], + babelrc: false, + exclude: [/\/core-js\//], + }), + ], + }, + { + name: namespace, + format, + }, + ), + ) + .pipe(header('typeof navigator === "object" && ')) // "Support" SSR (#935) + .pipe( + rename({ + extname: `.${extension}`, + }), + ) + .pipe(gulp.dest(dist)) + .pipe(filter(`**/*.${extension}`)) + .pipe(terser()) + .pipe(rename({ suffix: minSuffix })) + .pipe(size(sizeOptions)) + .pipe(sourcemaps.write('')) + .pipe(gulp.dest(dist)), + ); + }); +}); + +// CSS +Object.entries(build.css).forEach(([filename, entry]) => { + const { dist, src } = entry; + const name = `css:${filename}`; + tasks.css.push(name); + + gulp.task(name, () => + gulp + .src(src) + .pipe(plumber()) + .pipe(sass()) + .pipe( + prefix(browsers, { + cascade: false, + }), + ) + .pipe(clean()) + .pipe(size(sizeOptions)) + .pipe(gulp.dest(dist)), + ); +}); + +// SVG Sprites +Object.entries(build.sprite).forEach(([filename, entry]) => { + const { dist, src } = entry; + const name = `sprite:${filename}`; + tasks.sprite.push(name); + + gulp.task(name, () => + gulp + .src(src) + .pipe(plumber()) + .pipe( + imagemin([ + imagemin.svgo({ + plugins: [{ removeViewBox: false }], + }), + ]), + ) + .pipe(svgstore()) + .pipe(rename({ basename: path.parse(filename).name })) + .pipe(size(sizeOptions)) + .pipe(gulp.dest(dist)), + ); +}); + +// Build all tasks +gulp.task('js', gulp.parallel(...tasks.js)); +gulp.task('css', gulp.parallel(...tasks.css)); +gulp.task('sprites', gulp.parallel(...tasks.sprite)); + +// Watch for file changes +gulp.task('watch', () => { + // Plyr core + gulp.watch(paths.plyr.src.js, gulp.parallel('js')); + gulp.watch(paths.plyr.src.sass, gulp.parallel('css')); + gulp.watch(paths.plyr.src.sprite, gulp.parallel('sprites')); + + // Demo + gulp.watch(paths.demo.src.js, gulp.parallel('js')); + gulp.watch(paths.demo.src.sass, gulp.parallel('css')); +}); + +// Serve via browser sync +gulp.task('serve', () => + browserSync.init({ + server: { + baseDir: paths.demo.root, + }, + notify: false, + watch: true, + ghostMode: false, + }), +); + +// Build distribution +gulp.task('build', gulp.series('clean', gulp.parallel('js', 'css', 'sprites'))); + +// Default gulp task +gulp.task('default', gulp.series('build', gulp.parallel('serve', 'watch'))); -- cgit v1.2.3 From 502d5977d79148957828cbf313b7ef4c9f31973f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 11 Apr 2020 16:23:14 +1000 Subject: Converted to 2 space indentation --- tasks/build.js | 1 - 1 file changed, 1 deletion(-) (limited to 'tasks/build.js') diff --git a/tasks/build.js b/tasks/build.js index 9604f834..bd801e32 100644 --- a/tasks/build.js +++ b/tasks/build.js @@ -31,7 +31,6 @@ const size = require('gulp-size'); const sourcemaps = require('gulp-sourcemaps'); const browserSync = require('browser-sync').create(); // Configs -const pkg = require('../package.json'); const build = require('../build.json'); // Info from package const minSuffix = '.min'; -- cgit v1.2.3 From e48b1d11ce37960bc5803056561ec2b3996258c3 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Fri, 24 Apr 2020 00:47:41 +1000 Subject: Housekeeping --- tasks/build.js | 270 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 135 insertions(+), 135 deletions(-) (limited to 'tasks/build.js') diff --git a/tasks/build.js b/tasks/build.js index bd801e32..9f1efd4f 100644 --- a/tasks/build.js +++ b/tasks/build.js @@ -37,37 +37,37 @@ const minSuffix = '.min'; // Paths const root = path.join(__dirname, '..'); const paths = { - plyr: { - // Source paths - src: { - sass: path.join(root, 'src/sass/**/*.scss'), - js: path.join(root, 'src/js/**/*.js'), - sprite: path.join(root, 'src/sprite/*.svg'), - }, - - // Output paths - output: path.join(root, 'dist/'), + plyr: { + // Source paths + src: { + sass: path.join(root, 'src/sass/**/*.scss'), + js: path.join(root, 'src/js/**/*.js'), + sprite: path.join(root, 'src/sprite/*.svg'), }, - demo: { - // Source paths - src: { - sass: path.join(root, 'demo/src/sass/**/*.scss'), - js: path.join(root, 'demo/src/js/**/*.js'), - }, - - // Output paths - output: path.join(root, 'demo/dist/'), - - // Demo - root: path.join(root, 'demo/'), + + // Output paths + output: path.join(root, 'dist/'), + }, + demo: { + // Source paths + src: { + sass: path.join(root, 'demo/src/sass/**/*.scss'), + js: path.join(root, 'demo/src/js/**/*.js'), }, + + // Output paths + output: path.join(root, 'demo/dist/'), + + // Demo + root: path.join(root, 'demo/'), + }, }; // Task lists const tasks = { - css: [], - js: [], - sprite: [], + css: [], + js: [], + sprite: [], }; // Size plugin @@ -75,115 +75,115 @@ const sizeOptions = { showFiles: true, gzip: true }; // Clean out /dist gulp.task('clean', done => { - const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*')); + const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*')); - // Don't delete the mp4 - dirs.push(`!${path.join(paths.plyr.output, '**/*.mp4')}`); + // Don't delete the mp4 + dirs.push(`!${path.join(paths.plyr.output, '**/*.mp4')}`); - del(dirs); + del(dirs); - done(); + done(); }); // JavaScript Object.entries(build.js).forEach(([filename, entry]) => { - const { dist, formats, namespace, polyfill, src } = entry; - - formats.forEach(format => { - const name = `js:${filename}:${format}`; - const extension = format === 'es' ? 'mjs' : 'js'; - tasks.js.push(name); - - gulp.task(name, () => - gulp - .src(src) - .pipe(plumber()) - .pipe(sourcemaps.init()) - .pipe( - rollup( - { - plugins: [ - resolve(), - commonjs(), - babel({ - presets: [ - [ - '@babel/env', - { - // debug: true, - useBuiltIns: polyfill ? 'usage' : false, - corejs: polyfill ? 3 : undefined, - bugfixes: true, - }, - ], - ], - babelrc: false, - exclude: [/\/core-js\//], - }), - ], - }, - { - name: namespace, - format, - }, - ), - ) - .pipe(header('typeof navigator === "object" && ')) // "Support" SSR (#935) - .pipe( - rename({ - extname: `.${extension}`, - }), - ) - .pipe(gulp.dest(dist)) - .pipe(filter(`**/*.${extension}`)) - .pipe(terser()) - .pipe(rename({ suffix: minSuffix })) - .pipe(size(sizeOptions)) - .pipe(sourcemaps.write('')) - .pipe(gulp.dest(dist)), - ); - }); -}); + const { dist, formats, namespace, polyfill, src } = entry; -// CSS -Object.entries(build.css).forEach(([filename, entry]) => { - const { dist, src } = entry; - const name = `css:${filename}`; - tasks.css.push(name); + formats.forEach(format => { + const name = `js:${filename}:${format}`; + const extension = format === 'es' ? 'mjs' : 'js'; + tasks.js.push(name); gulp.task(name, () => - gulp - .src(src) - .pipe(plumber()) - .pipe(sass()) - .pipe(postcss([customprops(), autoprefixer(), clean()])) - .pipe(size(sizeOptions)) - .pipe(gulp.dest(dist)), + gulp + .src(src) + .pipe(plumber()) + .pipe(sourcemaps.init()) + .pipe( + rollup( + { + plugins: [ + resolve(), + commonjs(), + babel({ + presets: [ + [ + '@babel/env', + { + // debug: true, + useBuiltIns: polyfill ? 'usage' : false, + corejs: polyfill ? 3 : undefined, + bugfixes: true, + }, + ], + ], + babelrc: false, + exclude: [/\/core-js\//], + }), + ], + }, + { + name: namespace, + format, + }, + ), + ) + .pipe(header('typeof navigator === "object" && ')) // "Support" SSR (#935) + .pipe( + rename({ + extname: `.${extension}`, + }), + ) + .pipe(gulp.dest(dist)) + .pipe(filter(`**/*.${extension}`)) + .pipe(terser()) + .pipe(rename({ suffix: minSuffix })) + .pipe(size(sizeOptions)) + .pipe(sourcemaps.write('')) + .pipe(gulp.dest(dist)), ); + }); +}); + +// CSS +Object.entries(build.css).forEach(([filename, entry]) => { + const { dist, src } = entry; + const name = `css:${filename}`; + tasks.css.push(name); + + gulp.task(name, () => + gulp + .src(src) + .pipe(plumber()) + .pipe(sass()) + .pipe(postcss([customprops(), autoprefixer(), clean()])) + .pipe(size(sizeOptions)) + .pipe(gulp.dest(dist)), + ); }); // SVG Sprites Object.entries(build.sprite).forEach(([filename, entry]) => { - const { dist, src } = entry; - const name = `sprite:${filename}`; - tasks.sprite.push(name); - - gulp.task(name, () => - gulp - .src(src) - .pipe(plumber()) - .pipe( - imagemin([ - imagemin.svgo({ - plugins: [{ removeViewBox: false }], - }), - ]), - ) - .pipe(svgstore()) - .pipe(rename({ basename: path.parse(filename).name })) - .pipe(size(sizeOptions)) - .pipe(gulp.dest(dist)), - ); + const { dist, src } = entry; + const name = `sprite:${filename}`; + tasks.sprite.push(name); + + gulp.task(name, () => + gulp + .src(src) + .pipe(plumber()) + .pipe( + imagemin([ + imagemin.svgo({ + plugins: [{ removeViewBox: false }], + }), + ]), + ) + .pipe(svgstore()) + .pipe(rename({ basename: path.parse(filename).name })) + .pipe(size(sizeOptions)) + .pipe(gulp.dest(dist)), + ); }); // Build all tasks @@ -193,26 +193,26 @@ gulp.task('sprites', gulp.parallel(...tasks.sprite)); // Watch for file changes gulp.task('watch', () => { - // Plyr core - gulp.watch(paths.plyr.src.js, gulp.parallel('js')); - gulp.watch(paths.plyr.src.sass, gulp.parallel('css')); - gulp.watch(paths.plyr.src.sprite, gulp.parallel('sprites')); - - // Demo - gulp.watch(paths.demo.src.js, gulp.parallel('js')); - gulp.watch(paths.demo.src.sass, gulp.parallel('css')); + // Plyr core + gulp.watch(paths.plyr.src.js, gulp.parallel('js')); + gulp.watch(paths.plyr.src.sass, gulp.parallel('css')); + gulp.watch(paths.plyr.src.sprite, gulp.parallel('sprites')); + + // Demo + gulp.watch(paths.demo.src.js, gulp.parallel('js')); + gulp.watch(paths.demo.src.sass, gulp.parallel('css')); }); // Serve via browser sync gulp.task('serve', () => - browserSync.init({ - server: { - baseDir: paths.demo.root, - }, - notify: false, - watch: true, - ghostMode: false, - }), + browserSync.init({ + server: { + baseDir: paths.demo.root, + }, + notify: false, + watch: true, + ghostMode: false, + }), ); // Build distribution -- cgit v1.2.3