Package: sc.recipe.staticresources
Table of ContentsLife, the Universe, and EverythingMostly HarmlessDon’t PanicConfiguration optionsname (required)short_name (required)directorydestinationbobtemplateThe default templateJavaScript HelperUsageShare and EnjoyChangelog1.1b7 (2019-10-02)1.1b5 (2018-10-05)1.1b4 (2018-10-03)1.1b3 (2018-10-03)1.1b2 (2018-10-03)1.1b1 (2018-09-28)1.0b1 (2018-08-24)1.0a2 (2018-01-24)1.0a1 (2017-11-21)Life, the Universe, and EverythingThis Buildout recipe is used to integrate Plone andwebpack.In recent years, many tools were created to manage static resource files, these tools can:automatically compress imagesuse CSS pre and post-processors to write less and better code, taking advantage of new standards still not available to all browsersuse JavaScript transpilers to write ES6 code and generate ES5 equivalent code, that works on all browsersminify the resulting codeAnd many other options, practically everything related to process static resources can be achived by an official or community package.This recipe let’s you write less lines into your Buildout configuration and provides a nice template to start with.We choosewebpackbecause it’s proven to be the best toolchain available, and many people in the Plone community are already using it.Mostly HarmlessGot an idea? Found a bug? Let us know byopening a support ticket.Don’t PanicInstallationTo enable this product in a buildout-based installation:Edit your buildout.cfg and add these lines:[buildout]...parts +=nodestaticresources[node]recipe=gp.recipe.nodeversion=8.11.2npms=npm yarnscripts=npm yarn[staticresources]recipe=sc.recipe.staticresourcesname=my.packageshort_name=mypackageAfter updating the configuration you need to run ‘’bin/buildout’’, which will take care of updating your system.The recipe is responsible for:creating thewebpackfolder structure, if none existscreating the script to accesswebpackenvironment to handle more complex scenarioscreate all scripts listed inwebpack/package.jsonscripts entries.Configuration optionsname (required)This is the package name or the theme name used in the package.
This field is required.short_name (required)A short name is needed to be used as the UMD JavaScript library name and the name of the script inserted into Plone.
This field is required.directoryRelative path to webpack folder, you can use this field to define more than one webpack folder for different themes.
If this option is not present, the default value is${buildout:directory}/webpack.destinationDestination path relative to webpack directory, you should add this option to point the resulting static resources folder,
it can be the theme folder or a static resources directory.
If this option is not present, the default value is./distfolder.bobtemplateCustom webpack bobtemplate path.
It’s possible to change the default bobtemplate path to another that follows your project needs, if you prefer.
If this option is not present, the default value is the bobtemplate that exists into this package.The default templateIn the default template we selected what webpack tools are valid to our needs, what is basically theme and addons development.
This is the list of what we include:HTML LoaderUsed to process the HTML file; in our use case it’s used when we create a new theme.Image Webpack LoaderProcess all images referenced to save space in the final images,
it tile the workflow with some specialized tools for each image format.SVG URL LoaderProcess all SVG files and creates a data-url string.
For example it inserts the SVG file into the final CSS file to save requests.Webpack SpriteSmithBrings an easy way to create image sprites,
you simply add the icon images in one folder and it creates all you need to use the sprite with your choosen CSS pre-processor.BabelA transpiler that makes possible to use the next generation of JavaScript today.SassThe most mature, stable, and powerful professional grade CSS extension language in the world.PostCSSA post-processor used to transform styles with JavaScript plugins.
In our configuration we usePostCSS Preset Envplugin to add automatically all vendor prefixes for the last 3 versions of major browsers,
as soon as the browsers support more features your final CSS will automatically cost less bytes.HardSourceWebpackPluginThis plugin provides an intermediate caching step for modules.JavaScript HelperThere’s a little helper created to simplify the configuration burden of add-ons that use this recipe.
Let’s see how to use it:Create apackage.jsonfile with the following:{"name":"my.package","version":"0.0.1","main":"app/mypackage.js","scripts":{"build":"./node_modules/.bin/webpack -p","debug":"NODE_ENV=debug ./node_modules/.bin/webpack --watch","watch":"./node_modules/.bin/webpack -p --watch","test":"NODE_ENV=testing ./node_modules/.bin/karma start --single-run"},"repository":{},"license":"GPL-2.0","dependencies":{"sc-recipe-staticresources":"simplesconsultoria/sc.recipe.staticresources#1.1b4"}}This way it’s possible to add all dependencies of the configuration with just one line,
keeping versions well tested across all ecosystems just like Buildout’s versions do.Create awebpack.config.jsfile with the following:constmakeConfig=require('sc-recipe-staticresources');constCopyWebpackPlugin=require('copy-webpack-plugin');module.exports=makeConfig(// name'my.package',// shortName'mypackage',// path`${__dirname}/dist`,//publicPath`${__dirname}/../src/my/package/browser/static`,//callbackfunction(config,options){config.entry.unshift('./app/img/img1.png','./app/img/img2.png','./app/img/img3.png',);config.plugins.push(newCopyWebpackPlugin([{from:'app/folder/*',to:'folder',flatten:true}]),);},);This way it’s possible to inherit a configuration of all dependencies in the current version.Our mrbob template generates this configuration when the recipe is run for the first time.
You can modify it to fit your needs,
but for most themes and add-ons these defaults are a good starting point (something similar to Buildout’s extend configuration).UsageIn our simplest example, the following scripts are created:$bin/env-mypackageThis command sets the buildout node installation in the system PATH, this way you can use webpack as described in their docs.$bin/watch-mypackageThis command makes webpack wait for any change in any SASS, JS (ES6) files and generates the minified version of CSS and JS (ES5) UMD module for your application.$bin/debug-mypackageThis does the same as watch command, but don’t try to minify the final CSS and JS.
Used for debug purposes.$bin/build-mypackageThis command builds the CSS and JS minified, but doesn’t wait for any change.$bin/test-mypackageThis command runs the JavaScript tests usingkarma,mocha,chaiandsinon.Note thatshort_nameis added at the end of the script name.
This way you can have multiple webpack folders in the same package (if you have multiple themes inside the same package, for example).Share and EnjoyThis package would not have been possible without the contribution of the following people:Rodrigo Ferreira de SouzaHéctor VelardeChangelog1.1b7 (2019-10-02)Respect Plone external URL (closes#44).
[rodfersou]Fixes on Karma tests.
[rodfersou]1.1b5 (2018-10-05)Replace deprecatedcssnextmodule withPostCSS Preset Env(closes#37).
[rodfersou]IncludeHardSourceWebpackPluginin default configuration;
this plugin provides an intermediate caching step for modules that can speed up bundle generation up to 70% (closes#49).
[rodfersou]Fix typo on resources viewlet template.
[rodfersou]1.1b4 (2018-10-03)Fix in JavaScript helper.
[rodfersou]1.1b3 (2018-10-03)Fix node package version.
[rodfersou]1.1b2 (2018-10-03)Use a callback to fine tune the configuration at javascript helper.
[rodfersou]Review to add Sprite plugin just if necessary.
[rodfersou]Review to add SCSS files just if necessary.
[rodfersou]Use script async by default.
[rodfersou]Fix library definition to work with Plone 5.
[thet, rodfersou]Emit current package version in package.json configuration (closes#40).
[rodfersou]1.1b1 (2018-09-28)Create a module to reuse configuration.
[rodfersou]1.0b1 (2018-08-24)Change template to use a package Known-Good-Set (KGS).
[rodfersou]Update package versions.
[rodfersou]1.0a2 (2018-01-24)Review how HTML and CSS are processed (closes#23).
[rodfersou]Remove old scripts generated by this recipe after buildout run (closes#21).
[rodfersou]Rename script to debug instead of dev to avoid misunderstanding (closes#22).
[rodfersou]Fix webpack installation conflict (closes#25).
[rodfersou]Fix package license typo on template.
[hvelarde]Run build command after update recipe (closes#18).
[rodfersou]Add an error log if directory parameter is invalid.
[rodfersou]1.0a1 (2017-11-21)Initial release.