Simplify build config and dev environment (#30)
This commit is contained in:
Nikita Karamov
GitHub
commit
a0ed639379
86
gulpfile.js
86
gulpfile.js
|
|
@ -1,86 +0,0 @@
|
|||
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() {
|
||||
const plugins = [
|
||||
mixins({
|
||||
mixins: {
|
||||
networks,
|
||||
},
|
||||
}),
|
||||
cssVariables,
|
||||
calc,
|
||||
];
|
||||
|
||||
if (!isDev) {
|
||||
plugins.push(
|
||||
cssnano({
|
||||
preset: 'default',
|
||||
}),
|
||||
autoprefixer(),
|
||||
banner({
|
||||
banner: bannerText,
|
||||
important: true,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
gulp.src(path.resolve(__dirname, 'src', 'style.css'))
|
||||
.pipe(postcss(plugins))
|
||||
.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);
|
||||
};
|
||||
41
package.json
41
package.json
|
|
@ -32,10 +32,11 @@
|
|||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "gulp",
|
||||
"build:dev": "cross-env NODE_ENV=development gulp",
|
||||
"dev": "cross-env NODE_ENV=development gulp dev",
|
||||
"build": "rollup --config",
|
||||
"build:dev": "cross-env NODE_ENV=development rollup --config",
|
||||
"dev": "cross-env NODE_ENV=development rollup --config --watch",
|
||||
"lint": "eslint src/*.js",
|
||||
"release": "np",
|
||||
"size": "size-limit",
|
||||
"test": "yarn lint && yarn build && yarn size",
|
||||
"postversion": "yarn build"
|
||||
|
|
@ -44,26 +45,24 @@
|
|||
"@nickkaramoff/rollup-plugin-consts": "^1.1.0",
|
||||
"@rollup/plugin-buble": "^0.21.3",
|
||||
"@rollup/plugin-strip": "^2.0.0",
|
||||
"@size-limit/preset-small-lib": "^4.5.5",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"browserslist": "^4.14.3",
|
||||
"cross-env": "^7.0.2",
|
||||
"@size-limit/preset-small-lib": "^4.9.1",
|
||||
"autoprefixer": "^10.2.1",
|
||||
"browserslist": "^4.16.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"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",
|
||||
"postcss-banner": "^3.0.2",
|
||||
"postcss-calc": "^7.0.2",
|
||||
"eslint": "^7.18.0",
|
||||
"eslint-config-airbnb-base": "^14.2.1",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"np": "^7.2.0",
|
||||
"postcss": "^8.2.4",
|
||||
"postcss-banner": "^4.0.0",
|
||||
"postcss-calc": "^8.0.0",
|
||||
"postcss-css-variables": "^0.17.0",
|
||||
"postcss-mixins": "^6.2.3",
|
||||
"rollup": "^2.23.0",
|
||||
"rollup-plugin-license": "^2.1.0",
|
||||
"rollup-plugin-terser": "^6.1.0",
|
||||
"size-limit": "^4.5.5"
|
||||
"postcss-mixins": "^7.0.2",
|
||||
"rollup": "^2.36.2",
|
||||
"rollup-plugin-postcss": "^4.0.0",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"size-limit": "^4.9.1"
|
||||
},
|
||||
"size-limit": [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,36 +1,69 @@
|
|||
import { join, resolve } from 'path';
|
||||
|
||||
import buble from '@rollup/plugin-buble';
|
||||
import consts from '@nickkaramoff/rollup-plugin-consts';
|
||||
import license from 'rollup-plugin-license';
|
||||
import strip from '@rollup/plugin-strip';
|
||||
import postcss from 'rollup-plugin-postcss';
|
||||
import { terser } from 'rollup-plugin-terser';
|
||||
|
||||
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 networks = require('./src/networksMixin');
|
||||
const { urlBuilderMap } = require('./src/networks');
|
||||
|
||||
const isDev = process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development';
|
||||
|
||||
const pkg = require('./package.json');
|
||||
|
||||
const outputDir = isDev ? './dev/' : './dist/';
|
||||
const isDev = process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'development';
|
||||
const outputDir = resolve('.', 'dist');
|
||||
const bannerText = `${pkg.name} v${pkg.version}`;
|
||||
|
||||
const bannerText = `${pkg.name} v${pkg.version} by Nikita Karamov\n${pkg.homepage}`;
|
||||
const postcssPlugins = [
|
||||
mixins({
|
||||
mixins: {
|
||||
networks,
|
||||
},
|
||||
}),
|
||||
cssVariables,
|
||||
calc,
|
||||
];
|
||||
|
||||
const plugins = [
|
||||
if (!isDev) {
|
||||
postcssPlugins.push(
|
||||
cssnano({
|
||||
preset: 'default',
|
||||
}),
|
||||
autoprefixer(),
|
||||
banner({
|
||||
banner: bannerText,
|
||||
important: true,
|
||||
inline: true,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
const getPlugins = (css) => [
|
||||
consts({
|
||||
urlBuilderMap,
|
||||
}),
|
||||
css && postcss({
|
||||
extract: resolve(join(outputDir, 'shareon.min.css')),
|
||||
plugins: postcssPlugins,
|
||||
}),
|
||||
(!isDev) && strip({
|
||||
debugger: true,
|
||||
include: ['**/*.js'],
|
||||
functions: ['console.log', 'console.debug', 'assert.*'],
|
||||
sourceMap: false,
|
||||
}),
|
||||
(!isDev) && license({
|
||||
banner: {
|
||||
commentStyle: 'ignored',
|
||||
content: bannerText,
|
||||
(!isDev) && buble({
|
||||
transforms: {
|
||||
modules: false,
|
||||
},
|
||||
}),
|
||||
(!isDev) && buble({ transforms: { modules: false } }),
|
||||
];
|
||||
|
||||
const getOutput = (baseDir) => {
|
||||
|
|
@ -43,33 +76,34 @@ const getOutput = (baseDir) => {
|
|||
{
|
||||
...defaultParameters,
|
||||
format: 'iife',
|
||||
file: `${baseDir}${pkg.name}${isDev ? '' : '.min'}.js`,
|
||||
plugins: isDev ? [] : [terser({ output: { comments: false } })],
|
||||
file: join(baseDir, `${pkg.name}${isDev ? '' : '.min'}.js`),
|
||||
plugins: isDev ? [] : [terser({ output: { comments: /^!/ } })],
|
||||
banner: `/*! ${bannerText} */`,
|
||||
},
|
||||
(!isDev) && {
|
||||
...defaultParameters,
|
||||
format: 'cjs',
|
||||
file: `${baseDir}${pkg.name}.cjs`,
|
||||
file: join(baseDir, `${pkg.name}.cjs`),
|
||||
banner: `/*! ${bannerText} */`,
|
||||
},
|
||||
(!isDev) && {
|
||||
...defaultParameters,
|
||||
format: 'esm',
|
||||
file: `${baseDir}${pkg.name}.mjs`,
|
||||
file: join(baseDir, `${pkg.name}.mjs`),
|
||||
banner: `/*! ${bannerText} */`,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const config = [
|
||||
export default [
|
||||
{
|
||||
input: './src/autoinit.js',
|
||||
output: getOutput(`${outputDir}`),
|
||||
plugins,
|
||||
input: join(__dirname, 'src', 'autoinit.js'),
|
||||
output: getOutput(outputDir),
|
||||
plugins: getPlugins(true),
|
||||
},
|
||||
{
|
||||
input: './src/shareon.js',
|
||||
output: getOutput(`${outputDir}noinit/`),
|
||||
plugins,
|
||||
input: join(__dirname, 'src', 'shareon.js'),
|
||||
output: getOutput(join(outputDir, 'noinit')),
|
||||
plugins: getPlugins(false),
|
||||
},
|
||||
];
|
||||
|
||||
export default config;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import initializeShareon from './shareon';
|
||||
import './style.css';
|
||||
|
||||
window.onload = () => {
|
||||
initializeShareon();
|
||||
|
|
|
|||
Loading…
Reference in New Issue