From c1b652a169720afc4e1278046c19541849abc23e Mon Sep 17 00:00:00 2001 From: Milan Ricoul Date: Mon, 23 Sep 2019 12:56:16 +0200 Subject: [PATCH 1/5] feat : add webpack-php-output --- src/js/vendor/webpack-php-output.js | 118 ++++++++++++++++++++++++++++ webpack.config.js | 10 +++ 2 files changed, 128 insertions(+) create mode 100644 src/js/vendor/webpack-php-output.js diff --git a/src/js/vendor/webpack-php-output.js b/src/js/vendor/webpack-php-output.js new file mode 100644 index 00000000..16dc395a --- /dev/null +++ b/src/js/vendor/webpack-php-output.js @@ -0,0 +1,118 @@ +// TODO: remove lodash and other dependencies +var _ = require('lodash') +var path = require('path') +var url = require('url') +var fs = require('fs') + +function PhpOutputPlugin(options) { + var defaults = { + outPutPath: false, // false for default webpack path of pass string to specify + assetsPathPrefix: '', + phpClassName: 'WebpackBuiltFiles', // + phpFileName: 'WebpackBuiltFiles', + nameSpace: false, // false {nameSpace: 'name', use: ['string'] or empty property or don't pass "use" property} + path: '', + extraPurePatches: [], + } + + this.options = _.defaults(options, defaults) +} + +PhpOutputPlugin.prototype.apply = function apply(compiler) { + var options = this.options + + var getCssFiles = function(filelist, filepath) { + return _.map( + _.filter(filelist, filename => filename.endsWith('.css')), // filtering + filename => path.join(options.assetsPathPrefix, filepath, filename) // mapping filtered + ) + } + + var getJsFiles = function(filelist, filepath) { + let files = _.map( + _.filter(filelist, filename => filename.endsWith('.js')), // filtering + filename => path.join(options.assetsPathPrefix, filepath, filename) // mapping filtered + ) + + if (options.extraPurePatches.length) { + files = files.concat(options.extraPurePatches) + } + + // return files.sort().reverse() + return files + } + + var arrayToPhpStatic = function(list, varname) { + var out = ' static $' + varname + ' = [\n' + _.forEach(list, function(item) { + out += " '" + item + "'," + }) + out += '\n ];\n' + return out + } + + var objectToPhpClass = function(obj) { + // Create a header string for the generated file: + var out = ' { + out += 'use ' + use + ';\n' + }) + } + } + out += 'class ' + options.phpClassName + ' {\n' + + _.forEach(obj, (list, name) => { + out += arrayToPhpStatic(list, name) + }) + + out += '\n}\n' + return out + } + + var mkOutputDir = function(dir) { + // Make webpack output directory if it doesn't already exist + try { + fs.mkdirSync(dir) + } catch (err) { + // If it does exist, don't worry unless there's another error + if (err.code !== 'EEXIST') throw err + } + } + + compiler.plugin('emit', function(compilation, callback) { + var stats = compilation.getStats().toJson() + var toInclude = [] + + // Flatten the chunks (lists of files) to one list + for (var chunkName in stats.assetsByChunkName) { + var asset = stats.assetsByChunkName[chunkName] + + if (typeof asset === 'string') { + toInclude.push(asset) + } else if (Array.isArray(asset)) { + toInclude = _.union(toInclude, asset) + } + } + + var out = objectToPhpClass({ + jsFiles: getJsFiles(toInclude, options.path), + cssFiles: getCssFiles(toInclude, options.path), + }) + + // Write file using fs + // Build directory if it doesn't exist + var outPutPath = options.outPutPath ? options.outPutPath : compiler.options.output.path + + mkOutputDir(path.resolve(outPutPath)) + fs.writeFileSync(path.join(outPutPath, options.phpFileName + '.php'), out) + + callback() + }) +} + +module.exports = PhpOutputPlugin diff --git a/webpack.config.js b/webpack.config.js index 1d7206bc..29142304 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -4,6 +4,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin') const ManifestPlugin = require('webpack-manifest-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') +const PhpOutputPlugin = require('./src/js/vendor/webpack-php-output') const SoundsPlugin = require('sounds-webpack-plugin') const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const WebpackProgressOraPlugin = require('webpack-progress-ora-plugin') @@ -137,6 +138,15 @@ const webpackConfig = { to: 'img/sample/', }, ]), + new PhpOutputPlugin({ + devServer: false, // false or string with server entry point, e.g: app.js or + outPutPath: path.resolve(__dirname, 'dist/'), // false for default webpack path of pass string to specify + assetsPathPrefix: '', + phpClassName: 'WebpackBuiltFiles', // + phpFileName: 'WebpackBuiltFiles', + nameSpace: false, // false {nameSpace: 'name', use: ['string'] or empty property or don't pass "use" property} + path: '', + }), new WebpackProgressOraPlugin(), ], } From dedf53b4acb13d812578c5f86599b13933d8511f Mon Sep 17 00:00:00 2001 From: Milan Ricoul Date: Mon, 23 Sep 2019 13:41:09 +0200 Subject: [PATCH 2/5] feat : set dynamic assets in header and footer --- src/templates/partials/footer.php | 9 ++++++++- src/templates/partials/header.php | 9 ++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/templates/partials/footer.php b/src/templates/partials/footer.php index 2604596d..11a65514 100755 --- a/src/templates/partials/footer.php +++ b/src/templates/partials/footer.php @@ -37,6 +37,13 @@ function loadJS(e,t){"use strict";var n=window.document.getElementsByTagName("sc loadJS('assets/js/vendor_async/fonts-css-async.js'); } - + + + \ No newline at end of file diff --git a/src/templates/partials/header.php b/src/templates/partials/header.php index b7079b04..ca4ed046 100755 --- a/src/templates/partials/header.php +++ b/src/templates/partials/header.php @@ -51,7 +51,14 @@ - + + + From e57a0ad11a1399378b5f6951bf27d789a5eed13e Mon Sep 17 00:00:00 2001 From: Milan Ricoul Date: Mon, 23 Sep 2019 13:53:03 +0200 Subject: [PATCH 3/5] fix : prevent BS reloads --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 29142304..9508aae7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -170,7 +170,7 @@ module.exports = (env, argv) => { fn: function(event, file) { const bs = require('browser-sync').get('bs-webpack-plugin') - if (event === 'change' && file.indexOf('.css') === -1) { + if (event === 'change' && file !== 'dist/WebpackBuiltFiles.php' && file.indexOf('.css') === -1) { bs.reload() } From 9e6f6a25aa7fec352db529bddf440dc4e72f71cc Mon Sep 17 00:00:00 2001 From: Nicolas Fiascaro Date: Tue, 19 Nov 2019 11:13:10 +0100 Subject: [PATCH 4/5] fix (build) : require path --- webpack.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/webpack.config.js b/webpack.config.js index 9508aae7..48a8d39f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,5 @@ const config = require('./webpack.settings') +const path = require('path') const BrowserSyncPlugin = require('browser-sync-webpack-plugin') const CopyWebpackPlugin = require('copy-webpack-plugin') const ManifestPlugin = require('webpack-manifest-plugin') From 232ca06a1b713a21740491f51e39346565cc2cd9 Mon Sep 17 00:00:00 2001 From: Nicolas Fiascaro Date: Wed, 20 Nov 2019 11:52:26 +0100 Subject: [PATCH 5/5] fix (build) : Exclude editor-style from front-end --- src/js/vendor/webpack-php-output.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/vendor/webpack-php-output.js b/src/js/vendor/webpack-php-output.js index 16dc395a..7b785a36 100644 --- a/src/js/vendor/webpack-php-output.js +++ b/src/js/vendor/webpack-php-output.js @@ -23,14 +23,14 @@ PhpOutputPlugin.prototype.apply = function apply(compiler) { var getCssFiles = function(filelist, filepath) { return _.map( - _.filter(filelist, filename => filename.endsWith('.css')), // filtering + _.filter(filelist, filename => filename.endsWith('.css') && !filename.startsWith('editor-style')), // filtering filename => path.join(options.assetsPathPrefix, filepath, filename) // mapping filtered ) } var getJsFiles = function(filelist, filepath) { let files = _.map( - _.filter(filelist, filename => filename.endsWith('.js')), // filtering + _.filter(filelist, filename => filename.endsWith('.js') && !filename.startsWith('editor-style')), // filtering filename => path.join(options.assetsPathPrefix, filepath, filename) // mapping filtered )