mirror of
https://github.com/lidarr/lidarr.git
synced 2025-08-20 21:43:33 -07:00
New: Cleanup UI tooling, Update to Webpack 4, Gulp 4 (#655)
* New: Webpack 4 * New: Gulp 4 * New: Transpile UI for old browsers Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
This commit is contained in:
Qstick
GitHub
parent
fe3761fc2e
commit
0a6f552d5b
217 changed files with 2265 additions and 2625 deletions
|
|
@ -1,15 +1,17 @@
|
|||
const gulp = require('gulp');
|
||||
const runSequence = require('run-sequence');
|
||||
|
||||
require('./clean');
|
||||
require('./copy');
|
||||
require('./webpack');
|
||||
|
||||
gulp.task('build', () => {
|
||||
return runSequence('clean', [
|
||||
'webpack',
|
||||
'copyHtml',
|
||||
'copyFonts',
|
||||
'copyImages',
|
||||
'copyJs'
|
||||
]);
|
||||
});
|
||||
gulp.task('build',
|
||||
gulp.series('clean',
|
||||
gulp.parallel(
|
||||
'webpack',
|
||||
'copyHtml',
|
||||
'copyFonts',
|
||||
'copyImages',
|
||||
'copyJs'
|
||||
)
|
||||
)
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
var path = require('path');
|
||||
var gulp = require('gulp');
|
||||
var print = require('gulp-print').default;
|
||||
var cache = require('gulp-cached');
|
||||
var livereload = require('gulp-livereload');
|
||||
var paths = require('./helpers/paths.js');
|
||||
const path = require('path');
|
||||
const gulp = require('gulp');
|
||||
const print = require('gulp-print').default;
|
||||
const cache = require('gulp-cached');
|
||||
const flatten = require('gulp-flatten');
|
||||
const livereload = require('gulp-livereload');
|
||||
const paths = require('./helpers/paths.js');
|
||||
|
||||
gulp.task('copyJs', () => {
|
||||
return gulp.src(
|
||||
|
|
@ -12,6 +13,7 @@ gulp.task('copyJs', () => {
|
|||
])
|
||||
.pipe(cache('copyJs'))
|
||||
.pipe(print())
|
||||
.pipe(flatten())
|
||||
.pipe(gulp.dest(paths.dest.root))
|
||||
.pipe(livereload());
|
||||
});
|
||||
|
|
@ -30,7 +32,8 @@ gulp.task('copyFonts', () => {
|
|||
)
|
||||
.pipe(cache('copyFonts'))
|
||||
.pipe(print())
|
||||
.pipe(gulp.dest(paths.dest.fonts))
|
||||
.pipe(flatten({ subPath: 2 }))
|
||||
.pipe(gulp.dest(paths.dest.root))
|
||||
.pipe(livereload());
|
||||
});
|
||||
|
||||
|
|
@ -40,6 +43,7 @@ gulp.task('copyImages', () => {
|
|||
)
|
||||
.pipe(cache('copyImages'))
|
||||
.pipe(print())
|
||||
.pipe(gulp.dest(paths.dest.images))
|
||||
.pipe(flatten({ subPath: 2 }))
|
||||
.pipe(gulp.dest(paths.dest.root))
|
||||
.pipe(livereload());
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
require('./build.js');
|
||||
require('./clean.js');
|
||||
require('./copy.js');
|
||||
require('./imageMin.js');
|
||||
require('./start.js');
|
||||
require('./stripBom.js');
|
||||
require('./watch.js');
|
||||
require('./webpack.js');
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
const gulpUtil = require('gulp-util');
|
||||
const colors = require('ansi-colors');
|
||||
|
||||
module.exports = function errorHandler(error) {
|
||||
gulpUtil.log(gulpUtil.colors.red(`Error (${error.plugin}): ${error.message}`));
|
||||
console.log(colors.red(`Error (${error.plugin}): ${error.message}`));
|
||||
this.emit('end');
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
const path = require('path');
|
||||
const rootPath = path.resolve(__dirname + '/../../src/');
|
||||
module.exports = function(source) {
|
||||
if (this.cacheable) {
|
||||
this.cacheable();
|
||||
}
|
||||
|
||||
const resourcePath = this.resourcePath.replace(rootPath, '');
|
||||
const wrappedSource =`
|
||||
<!-- begin ${resourcePath} -->
|
||||
${source}
|
||||
<!-- end ${resourcePath} -->`;
|
||||
|
||||
return wrappedSource;
|
||||
};
|
||||
|
|
@ -3,11 +3,11 @@ const root = './frontend/src/';
|
|||
const paths = {
|
||||
src: {
|
||||
root,
|
||||
html: root + '*.html',
|
||||
scripts: root + '**/*.js',
|
||||
content: root + 'Content/',
|
||||
fonts: root + 'Content/Fonts/',
|
||||
images: root + 'Content/Images/',
|
||||
html: `${root}*.html`,
|
||||
scripts: `${root}**/*.js`,
|
||||
content: `${root}Content/`,
|
||||
fonts: `${root}Content/Fonts/`,
|
||||
images: `${root}Content/Images/`,
|
||||
exclude: {
|
||||
libs: `!${root}JsLibraries/**`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
var gulp = require('gulp');
|
||||
var print = require('gulp-print').default;
|
||||
var paths = require('./helpers/paths.js');
|
||||
|
||||
gulp.task('imageMin', () => {
|
||||
var imagemin = require('gulp-imagemin');
|
||||
return gulp.src(paths.src.images)
|
||||
.pipe(imagemin({
|
||||
progressive: false,
|
||||
optimizationLevel: 4,
|
||||
svgoPlugins: [{ removeViewBox: false }]
|
||||
}))
|
||||
.pipe(print())
|
||||
.pipe(gulp.dest(paths.src.content + 'Images/'));
|
||||
});
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
// will download and run lidarr (server) in a non-windows enviroment
|
||||
// you can use this if you don't care about the server code and just want to work
|
||||
// with the web code.
|
||||
|
||||
var http = require('http');
|
||||
var gulp = require('gulp');
|
||||
var fs = require('fs');
|
||||
var targz = require('tar.gz');
|
||||
var del = require('del');
|
||||
var spawn = require('child_process').spawn;
|
||||
|
||||
function download(url, dest, cb) {
|
||||
console.log('Downloading ' + url + ' to ' + dest);
|
||||
var file = fs.createWriteStream(dest);
|
||||
http.get(url, function(response) {
|
||||
response.pipe(file);
|
||||
file.on('finish', function() {
|
||||
console.log('Download completed');
|
||||
file.close(cb);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function getLatest(cb) {
|
||||
var branch = 'develop';
|
||||
process.argv.forEach(function(val) {
|
||||
var branchMatch = /branch=([\S]*)/.exec(val);
|
||||
if (branchMatch && branchMatch.length > 1) {
|
||||
branch = branchMatch[1];
|
||||
}
|
||||
});
|
||||
|
||||
var url = 'http://services.lidarr.audio/v1/update/' + branch + '?os=osx';
|
||||
|
||||
console.log('Checking for latest version:', url);
|
||||
|
||||
http.get(url, function(res) {
|
||||
var data = '';
|
||||
|
||||
res.on('data', function(chunk) {
|
||||
data += chunk;
|
||||
});
|
||||
|
||||
res.on('end', function() {
|
||||
var updatePackage = JSON.parse(data).updatePackage;
|
||||
console.log('Latest version available: ' + updatePackage.version + ' Release Date: ' + updatePackage.releaseDate);
|
||||
cb(updatePackage);
|
||||
});
|
||||
}).on('error', function(e) {
|
||||
console.log('problem with request: ' + e.message);
|
||||
});
|
||||
}
|
||||
|
||||
function extract(source, dest, cb) {
|
||||
console.log('extracting download page to ' + dest);
|
||||
new targz().extract(source, dest, function(err) {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
}
|
||||
console.log('Update package extracted.');
|
||||
cb();
|
||||
});
|
||||
}
|
||||
|
||||
gulp.task('getSonarr', function() {
|
||||
try {
|
||||
fs.mkdirSync('./_start/');
|
||||
} catch (e) {
|
||||
if (e.code !== 'EEXIST') {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
getLatest(function(updatePackage) {
|
||||
var packagePath = './_start/' + updatePackage.filename;
|
||||
var dirName = './_start/' + updatePackage.version;
|
||||
download(updatePackage.url, packagePath, function() {
|
||||
extract(packagePath, dirName, function() {
|
||||
// clean old binaries
|
||||
console.log('Cleaning old binaries');
|
||||
del.sync(['./_output/*', '!./_output/UI/']);
|
||||
console.log('copying binaries to target');
|
||||
gulp.src(dirName + '/Lidarr/*.*')
|
||||
.pipe(gulp.dest('./_output/'));
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task('startSonarr', function() {
|
||||
var ls = spawn('mono', ['--debug', './_output/Lidarr.exe']);
|
||||
|
||||
ls.stdout.on('data', function(data) {
|
||||
process.stdout.write(data);
|
||||
});
|
||||
|
||||
ls.stderr.on('data', function(data) {
|
||||
process.stdout.write(data);
|
||||
});
|
||||
|
||||
ls.on('close', function(code) {
|
||||
console.log('child process exited with code ' + code);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
const gulp = require('gulp');
|
||||
const paths = require('./helpers/paths.js');
|
||||
const stripbom = require('gulp-stripbom');
|
||||
|
||||
function stripBom(dest) {
|
||||
gulp.src([paths.src.scripts, paths.src.exclude.libs])
|
||||
.pipe(stripbom({ showLog: false }))
|
||||
.pipe(gulp.dest(dest));
|
||||
}
|
||||
|
||||
gulp.task('stripBom', () => {
|
||||
stripBom(paths.src.root);
|
||||
});
|
||||
|
|
@ -1,27 +1,18 @@
|
|||
const gulp = require('gulp');
|
||||
const livereload = require('gulp-livereload');
|
||||
const watch = require('gulp-watch');
|
||||
const gulpWatch = require('gulp-watch');
|
||||
const paths = require('./helpers/paths.js');
|
||||
|
||||
require('./copy.js');
|
||||
require('./webpack.js');
|
||||
|
||||
function watchTask(glob, task) {
|
||||
const options = {
|
||||
name: `watch: ${task}`,
|
||||
verbose: true
|
||||
};
|
||||
return watch(glob, options, () => {
|
||||
gulp.start(task);
|
||||
});
|
||||
}
|
||||
|
||||
gulp.task('watch', ['copyHtml', 'copyFonts', 'copyImages', 'copyJs'], () => {
|
||||
function watch() {
|
||||
livereload.listen({ start: true });
|
||||
|
||||
gulp.start('webpackWatch');
|
||||
gulp.task('webpackWatch')();
|
||||
gulpWatch(paths.src.html, gulp.series('copyHtml'));
|
||||
gulpWatch(`${paths.src.fonts}**/*.*`, gulp.series('copyFonts'));
|
||||
gulpWatch(`${paths.src.images}**/*.*`, gulp.series('copyImages'));
|
||||
}
|
||||
|
||||
watchTask(paths.src.html, 'copyHtml');
|
||||
watchTask(`${paths.src.fonts}**/*.*`, 'copyFonts');
|
||||
watchTask(`${paths.src.images}**/*.*`, 'copyImages');
|
||||
});
|
||||
gulp.task('watch', gulp.series('build', watch));
|
||||
|
|
|
|||
|
|
@ -4,15 +4,16 @@ const livereload = require('gulp-livereload');
|
|||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const errorHandler = require('./helpers/errorHandler');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
|
||||
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const browsers = require('../browsers');
|
||||
|
||||
const uiFolder = 'UI';
|
||||
const root = path.join(__dirname, '..', 'src');
|
||||
const frontendFolder = path.join(__dirname, '..');
|
||||
const srcFolder = path.join(frontendFolder, 'src');
|
||||
const isProduction = process.argv.indexOf('--production') > -1;
|
||||
|
||||
console.log('ROOT:', root);
|
||||
console.log('Source Folder:', srcFolder);
|
||||
console.log('isProduction:', isProduction);
|
||||
|
||||
const cssVarsFiles = [
|
||||
|
|
@ -22,74 +23,21 @@ const cssVarsFiles = [
|
|||
'../src/Styles/Variables/animations'
|
||||
].map(require.resolve);
|
||||
|
||||
const extractCSSPlugin = new ExtractTextPlugin({
|
||||
filename: path.join('_output', uiFolder, 'Content', 'styles.css'),
|
||||
allChunks: true,
|
||||
disable: false,
|
||||
ignoreOrder: true
|
||||
});
|
||||
|
||||
const plugins = [
|
||||
extractCSSPlugin,
|
||||
|
||||
new OptimizeCssAssetsPlugin({}),
|
||||
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'vendor'
|
||||
}),
|
||||
|
||||
new webpack.DefinePlugin({
|
||||
__DEV__: !isProduction,
|
||||
'process.env.NODE_ENV': isProduction ? JSON.stringify('production') : JSON.stringify('development')
|
||||
}),
|
||||
|
||||
new MiniCssExtractPlugin({
|
||||
filename: path.join('_output', uiFolder, 'Content', 'styles.css')
|
||||
})
|
||||
];
|
||||
|
||||
function babelPlugins() {
|
||||
|
||||
const bplugins = [];
|
||||
|
||||
bplugins.push(
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
'@babel/plugin-syntax-dynamic-import',
|
||||
'@babel/plugin-syntax-import-meta',
|
||||
'@babel/plugin-proposal-json-strings',
|
||||
[
|
||||
'@babel/plugin-proposal-decorators',
|
||||
{
|
||||
legacy: true
|
||||
}
|
||||
],
|
||||
'@babel/plugin-proposal-function-sent',
|
||||
'@babel/plugin-proposal-export-namespace-from',
|
||||
'@babel/plugin-proposal-numeric-separator',
|
||||
'@babel/plugin-proposal-throw-expressions'
|
||||
);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
bplugins.push('@babel/transform-react-jsx-source');
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
bplugins.push('transform-react-remove-prop-types');
|
||||
}
|
||||
|
||||
return bplugins;
|
||||
}
|
||||
|
||||
if (isProduction) {
|
||||
plugins.push(new UglifyJSPlugin({
|
||||
sourceMap: true,
|
||||
uglifyOptions: {
|
||||
mangle: false,
|
||||
output: {
|
||||
comments: false,
|
||||
beautify: true
|
||||
}
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
const config = {
|
||||
mode: isProduction ? 'production' : 'development',
|
||||
devtool: '#source-map',
|
||||
|
||||
stats: {
|
||||
|
|
@ -108,8 +56,8 @@ const config = {
|
|||
|
||||
resolve: {
|
||||
modules: [
|
||||
root,
|
||||
path.join(root, 'Shims'),
|
||||
srcFolder,
|
||||
path.join(srcFolder, 'Shims'),
|
||||
'node_modules'
|
||||
],
|
||||
alias: {
|
||||
|
|
@ -122,6 +70,10 @@ const config = {
|
|||
sourceMapFilename: '[file].map'
|
||||
},
|
||||
|
||||
optimization: {
|
||||
chunkIds: 'named'
|
||||
},
|
||||
|
||||
plugins,
|
||||
|
||||
resolveLoader: {
|
||||
|
|
@ -136,48 +88,56 @@ const config = {
|
|||
{
|
||||
test: /\.js?$/,
|
||||
exclude: /(node_modules|JsLibraries)/,
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
plugins: babelPlugins(),
|
||||
presets: ['@babel/env', '@babel/react']
|
||||
}
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
configFile: `${frontendFolder}/babel.config.js`,
|
||||
envName: isProduction ? 'production' : 'development',
|
||||
presets: [
|
||||
[
|
||||
'@babel/preset-env',
|
||||
{
|
||||
modules: false,
|
||||
loose: true,
|
||||
debug: false,
|
||||
useBuiltIns: 'entry',
|
||||
targets: browsers
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// CSS Modules
|
||||
{
|
||||
test: /\.css$/,
|
||||
exclude: /(node_modules|globals.css)/,
|
||||
use: extractCSSPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [
|
||||
{
|
||||
loader: 'css-variables-loader',
|
||||
options: {
|
||||
cssVarsFiles
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: true,
|
||||
importLoaders: 1,
|
||||
localIdentName: '[name]-[local]-[hash:base64:5]',
|
||||
sourceMap: true
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
config: {
|
||||
ctx: {
|
||||
cssVarsFiles
|
||||
},
|
||||
path: 'frontend/postcss.config.js'
|
||||
}
|
||||
use: [
|
||||
{ loader: MiniCssExtractPlugin.loader },
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
localIdentName: '[name]/[local]/[hash:base64:5]',
|
||||
modules: true
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
ident: 'postcss',
|
||||
config: {
|
||||
ctx: {
|
||||
cssVarsFiles
|
||||
},
|
||||
path: 'frontend/postcss.config.js'
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// Global styles
|
||||
|
|
@ -225,17 +185,16 @@ const config = {
|
|||
};
|
||||
|
||||
gulp.task('webpack', () => {
|
||||
return gulp.src('index.js')
|
||||
.pipe(webpackStream(config, webpack))
|
||||
.pipe(gulp.dest(''));
|
||||
return webpackStream(config, webpack)
|
||||
.pipe(gulp.dest('./'));
|
||||
});
|
||||
|
||||
gulp.task('webpackWatch', () => {
|
||||
config.watch = true;
|
||||
return gulp.src('')
|
||||
.pipe(webpackStream(config, webpack))
|
||||
|
||||
return webpackStream(config, webpack)
|
||||
.on('error', errorHandler)
|
||||
.pipe(gulp.dest(''))
|
||||
.pipe(gulp.dest('./'))
|
||||
.on('error', errorHandler)
|
||||
.pipe(livereload())
|
||||
.on('error', errorHandler);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue