diff --git a/src/js/vendor/webpack-php-output.js b/src/js/vendor/webpack-php-output.js new file mode 100644 index 00000000..7b785a36 --- /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') && !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') && !filename.startsWith('editor-style')), // 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/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 @@ - + + + diff --git a/webpack.config.js b/webpack.config.js index 1d7206bc..48a8d39f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,9 +1,11 @@ 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') 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 +139,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(), ], } @@ -160,7 +171,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() }