Migrate from Rollup to Gulp and add Buble

pull/21/head
Nikita Karamov 2020-09-18 19:40:26 +02:00
parent 045ca283c3
commit a27b6fb434
No known key found for this signature in database
GPG Key ID: E40DFE6E993540FF
8 changed files with 1347 additions and 374 deletions

81
gulpfile.js Normal file
View File

@ -0,0 +1,81 @@
const path = require('path');
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const rename = require('gulp-rename');
const autoprefixer = require('autoprefixer');
const banner = require('postcss-banner');
const calc = require('postcss-calc');
const cssnano = require('cssnano');
const cssVariables = require('postcss-css-variables');
const mixins = require('postcss-mixins');
const rollup = require('rollup');
const loadConfigFile = require('rollup/dist/loadConfigFile');
const pkg = require('./package.json');
const networks = require('./src/networksMixin');
const isDev = process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development';
const bannerText = `${pkg.name} v${pkg.version} by Nikita Karamov\n${pkg.homepage}`;
async function js() {
const { options, warnings } = await loadConfigFile(
path.resolve(__dirname, 'rollup.config.js'),
);
if (warnings.count > 0) {
// eslint-disable-next-line no-console
console.warn(`${warnings.count} warnings`);
warnings.flush();
}
const allOutputs = [];
options.forEach((optionObj) => {
optionObj.output.forEach((outputObj) => {
allOutputs.push([rollup.rollup(optionObj), outputObj]);
});
});
await Promise.all(allOutputs.map(
([bundlePromise, outputObj]) => bundlePromise.then((bundle) => bundle.write(outputObj)),
));
}
async function css() {
gulp.src(path.resolve(__dirname, 'src', 'style.css'))
.pipe(postcss({
plugins: [
mixins({
mixins: {
networks,
},
}),
cssVariables,
calc,
(!isDev) && cssnano({
preset: 'default',
}),
autoprefixer,
banner({
banner: bannerText,
important: true,
}),
],
}))
.pipe(rename({
basename: pkg.name,
extname: isDev ? '.css' : '.min.css',
}))
.pipe(gulp.dest(path.resolve(__dirname, isDev ? 'dev' : 'dist')));
}
exports.default = gulp.parallel(js, css);
exports.dev = function dev() {
gulp.watch('src/networks*.js', gulp.parallel(js, css));
gulp.watch('src/shareon.js', js);
gulp.watch('src/autoinit.js', js);
gulp.watch('src/style.css', css);
};

View File

@ -32,8 +32,8 @@
"dist"
],
"scripts": {
"build": "rollup -c",
"dev": "rollup -w -c",
"build": "gulp",
"dev": "cross-env NODE_ENV=development gulp dev",
"pretest": "run-s build",
"test:lint": "eslint --ext .js,.ts ./src/",
"test:size": "size-limit",
@ -42,13 +42,20 @@
},
"devDependencies": {
"@nickkaramoff/rollup-plugin-consts": "^1.1.0",
"@rollup/plugin-buble": "^0.21.3",
"@rollup/plugin-strip": "^2.0.0",
"@rollup/plugin-typescript": "^5.0.2",
"@size-limit/preset-small-lib": "^4.5.5",
"autoprefixer": "^10.0.0",
"browserslist": "^4.14.3",
"cross-env": "^7.0.2",
"cssnano": "^4.1.10",
"eslint": "^7.5.0",
"eslint-config-airbnb-base": "^14.2.0",
"eslint-plugin-import": "^2.22.0",
"gulp": "^4.0.2",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^2.0.0",
"np": "^6.3.2",
"npm-run-all": "^4.1.5",
"postcss-banner": "^3.0.2",
@ -57,7 +64,6 @@
"postcss-mixins": "^6.2.3",
"rollup": "^2.23.0",
"rollup-plugin-license": "^2.1.0",
"rollup-plugin-postcss": "^3.1.3",
"rollup-plugin-terser": "^6.1.0",
"size-limit": "^4.5.5"
},

35
postcss.config.js Normal file
View File

@ -0,0 +1,35 @@
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable import/order */
/* eslint-disable global-require */
const pkg = require('./package.json');
const isDev = process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development';
const bannerText = `${pkg.name} v${pkg.version} by Nikita Karamov\n${pkg.homepage}`;
const plugins = [
require('postcss-mixins')({
mixins: {
networks: require('./src/networksMixin'),
},
}),
require('postcss-css-variables'),
require('postcss-calc'),
];
if (!isDev) {
plugins.push(
require('cssnano')({
preset: 'default',
}),
require('autoprefixer'),
require('postcss-banner')({
banner: bannerText,
important: true,
}),
);
}
module.exports = {
plugins,
};

View File

@ -1,16 +1,10 @@
import buble from '@rollup/plugin-buble';
import consts from '@nickkaramoff/rollup-plugin-consts';
import license from 'rollup-plugin-license';
import postcss from 'rollup-plugin-postcss';
import postcssPluginBanner from 'postcss-banner';
import postcssPluginCalc from 'postcss-calc';
import postcssPluginCssnano from 'cssnano';
import postcssPluginMixins from 'postcss-mixins';
import postcssPluginVariables from 'postcss-css-variables';
import strip from '@rollup/plugin-strip';
import { terser } from 'rollup-plugin-terser';
import { urlBuilderMap } from './src/networks';
import networksMixin from './src/networksMixin';
const { urlBuilderMap } = require('./src/networks');
const isDev = process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development';
@ -20,107 +14,61 @@ const outputDir = isDev ? './dev/' : './dist/';
const bannerText = `${pkg.name} v${pkg.version} by Nikita Karamov\n${pkg.homepage}`;
/**
* Plugins to build the project
*
* @type {Plugin[]}
*/
const plugins = [
consts({
urlBuilderMap,
}),
];
if (!isDev) {
plugins.push(strip({
(!isDev) && strip({
debugger: true,
include: ['**/*.js', '**/*.ts'],
include: ['**/*.js'],
functions: ['console.log', 'console.debug', 'assert.*'],
sourceMap: false,
}));
plugins.push(license({
}),
(!isDev) && license({
banner: {
commentStyle: 'ignored',
content: bannerText,
},
}));
}
}),
(!isDev) && buble({ transforms: { modules: false } }),
];
plugins.push(postcss({
extract: `${pkg.name}.min.css`,
plugins: [
postcssPluginMixins({
mixins: {
networks: networksMixin,
},
}),
postcssPluginVariables(),
postcssPluginCalc(),
(!isDev) && postcssPluginCssnano({
preset: 'default',
}),
postcssPluginBanner({
banner: bannerText,
important: true,
}),
],
}));
/**
* @typedef {import('rollup').OutputOptions} OutputOptions
*/
/**
*
* @param {string} baseDir base directory for the output files
* @return {OutputOptions[]} array of outputs
*/
const getOutputs = (baseDir) => {
const getOutput = (baseDir) => {
const defaultParameters = {
name: pkg.name,
exports: 'default',
};
const result = [];
if (isDev) {
result.push({
return [
{
...defaultParameters,
format: 'iife',
file: `${baseDir}${pkg.name}.js`,
});
} else {
result.push({
file: `${baseDir}${pkg.name}${isDev ? '' : '.min'}.js`,
plugins: isDev ? [] : [terser({ output: { comments: false } })],
},
(!isDev) && {
...defaultParameters,
format: 'cjs',
file: `${baseDir}${pkg.name}.cjs`,
});
result.push({
},
(!isDev) && {
...defaultParameters,
format: 'esm',
file: `${baseDir}${pkg.name}.mjs`,
});
result.push({
...defaultParameters,
format: 'iife',
file: `${baseDir}${pkg.name}.min.js`,
plugins: [terser({ output: { comments: false } })],
});
}
return result;
},
];
};
const config = [
{
input: './src/autoinit.js',
output: getOutputs(`${outputDir}`),
output: getOutput(`${outputDir}`),
plugins,
},
{
input: './src/shareon.js',
output: getOutputs(`${outputDir}noinit/`),
plugins: plugins.slice(0, -1),
output: getOutput(`${outputDir}noinit/`),
plugins,
},
];

View File

@ -1,5 +1,3 @@
import './style.css';
import initializeShareon from './shareon';
window.onload = () => {

View File

@ -101,7 +101,7 @@ const urlBuilderMap = Object.fromEntries(
]),
);
export {
NETWORKS as fullNetworkMap,
module.exports = {
fullNetworkMap: NETWORKS,
urlBuilderMap,
};

View File

@ -1,6 +1,6 @@
import { fullNetworkMap } from './networks';
const { fullNetworkMap } = require('./networks');
export default function networks() {
module.exports = function networks() {
const ruleObj = {};
Object.entries(fullNetworkMap).forEach(([name, network]) => {
@ -20,4 +20,4 @@ export default function networks() {
});
return ruleObj;
}
};

1483
yarn.lock

File diff suppressed because it is too large Load Diff