samrith-s / parcel-plugin-structurize Goto Github PK
View Code? Open in Web Editor NEWA plugin to customize the output (dist) directory structure during production.
License: MIT License
A plugin to customize the output (dist) directory structure during production.
License: MIT License
It appeared to me that I could add a custom file type handler by simply incorporating the following into my package.json
file like so:
"parcel-plugin-structurize": {
"fonts": {
"match": "*.{eto,woff,ttf}",
"folder": "fonts"
}
}
Is there a way to extend structurize to support abitrary file types?
Not only build
When I first created this plugin over a year ago, I had no plans to maintain it. It was just something to fulfil a requirement at work.
This project is doing reasonably well, and though I don't provide regular updates, I am keen on giving it a complete revamp. This issue will be the point of discussion for everything pertaining to v2
of this plugin.
The plugin now uses Typescript. This choice has been made keeping in mind the number of people making the switch to it and also in terms of maintainability and code discoverability.
As of 19/08/2020, the plugin engine support is currently:
"node": ">=12"
The previous version supported up to node@v8
. If there is a strong enough case, I might still consider adding support for node@v10
.
v2
Feature ListUsers will have fine-grained control over where certain files go and can group using a multitude of options.
Example:
[
{
"files": ".{jpg,png,gif,bmp,webp}",
"folder": "images"
},
{
"files": "*.svg",
"folder": "vectors"
}
]
Configuration using parcel-structurize.json
or parcel-plugin-structurize
key in package.json
. This will help the user declutter package.json
. The plugin will still ship with sane defaults to power zero-config integration.
Remove the restriction of the plugin wherein it acts only on .html
input sources. If there are no .html
input sources, there is a lot of redundant code that runs. This rework should also make the plugin faster.
Provide a map of all the resources changes upon completion. Right now user sees no information about updates to the output.
To help test this, simple clone the repository and checkout to the v2
branch (it is already the default branch). To test it out in your project, you can run:
yarn add -D parcel-plugin-structurize@next
To report bugs please use the v2
bug report template.
With the new configuration users can provide tags that the plugin should target Tags can be any valid HTML selector.
Example:
[
{
"files": ".{css,svg}",
"folder": "assets",
"source": "link[rel='stylesheet'], img[src*='.svg']"
}
]
The plugin no longer iterates over HTML files to find and replace instances. This also means JSDOM is no longer a dependency.
The files
option in the new configuration will be able to accept glob patterns or regexes for more fine-tuning.
Example:
[
{
// glob match - Selects all CSS and SVG files
"files": ".{css,svg}",
"folder": "assets"
},
{
// regex match - Selects all files with names <file-name>.vendor.js,
"files": /(vendor\.js)$/,
"folder": "vendor"
}
]
Glob pattern already allows specifying complicated matches. Regex support is hence dropped.
This is the build command: parcel static/market/css/base.scss
with the following structurize config "styles": { "match": "*.{css,css.map}", "folder": "static/market/js" },
The Django app serves static folder on /static by default
Source map error: request failed with status 404
Resource URL: http://localhost:4000/static/market/css/base.css
Source Map URL: /base.css.map
Hello,
When I run "parcel build ./src/**/*.html" and parcel-plugin-structize is configured, it also rewrites my HTML files in the src folder but only on Windows 10, not on Mac or Linux.
Do you already have the problem? Do you have a solution?
Thank you for reading me and for your time :)
parcel file1.html file2.js
Look at + section. You have comma after "css", "js" and "assets"
# package.json file
{
"parcel-plugin-structurize": {
- "scripts": {
- "match": "*.{js,js.map}",
- "folder": "js"
- },
- "styles": {
- "match": "*.{css,css.map}",
- "folder": "css"
- },
- "assets": {
- "match": "*.{png,svg,jpg,jpg2,jpeg,gif,bmp,webm}",
- "folder": "assets"
- }
+ "rules": [
+ {
+ "match": "*.js",
+ "folder": "js",
+ },
+ {
+ "match": "*.css",
+ "folder": "css",
+ },
+ {
+ "match": "*.{png,svg,jpg,jpg2,jpeg,gif,bmp,webm}",
+ "folder": "assets",
+ },
+ ],
}
}
While building I got the following warning in the console:
(node:24764) UnhandledPromiseRejectionWarning: SyntaxError: Invalid regular expression: /\/: \ at end of pattern
at new RegExp (<anonymous>)
parcel-plugin-structurize/src/util.js
Line 1 in d4cc3a3
Build is completed though.
While building I got the following warning:
(node:6268) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open 'D:\projects\_draft\boilerplate-par
cel-master\dist\style.8f0dceae.css'
The file style.8f0dceae.css
has been moved to dist/css/
by this plugin and at the same time it's looking for the same file in dist/
folder, and it says it's missing.
I installed the plugin in one of my test projects and works ok for css, js, but it corrupts all the images I have in my project. The size of the (image) files are almost double in size after I run the build task.
no error messages in the console
the content of image files should be preserved
n.a.
n.a.
This is my first time ever opening an issue, so I hope I am doing this correctly and providing enough feedback ๐
I followed the usage instructions as provided. But the folders I outlined in parcel-plugin-structurize.json
are not being moved/copied over on npm run build
command.
// parcel-plugin-structurize.json
{
"rules": [
{
"match": "*.css",
"folder": "src/css"
},
{
"match": "*.{jpg,png,gif,svg}",
"folder": "src/icons"
},
{
"match": "*.{jpg,png,gif,svg}",
"folder": "src/images"
},
{
"match": "*.js",
"folder": "src/js"
}
]
}
This is what my structure looks like https://i.imgur.com/oktrIjF.png
The expectation was/is that your plugin maintains the same structure after running the npm run build
command. This is what it looks like:
"scripts": {
"dev": "npm-run-all --parallel dev:*",
"dev:parcel": "parcel serve ./src/index.html",
"dev:css": "tailwindcss -i src/css/tailwind.css -o src/css/styles.css -w",
"build": "npm-run-all clean css parcel",
"clean": "rm -rf dist/*",
"css": "tailwindcss -i src/css/tailwind.css -o src/css/styles.css",
"parcel": "parcel build src/index.html"
},
After running npm run build
, this is the resulting output https://i.imgur.com/q3GTLEk.png
Am I doing something wrong?
This currently doesn't run in watch mode.
I have a following build script:
"build": "parcel build index.html"
Added following to package.json
"parcel-plugin-structurize": {
"scripts": {
"match": "*.{js,js.map}",
"folder": "js"
},
"styles": {
"match": "*.{css,css.map}",
"folder": "css"
},
"assets": {
"match": "*.{png,svg,jpg,jpg2,jpeg,gif,bmp,webm}",
"folder": "assets"
}
}
Get following error on build
(node:11712) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open 'C:\Users\User\Downloads\vue\vue\dist\C:\Users\User\Downloads\vue\vue\index.html'
at Object.openSync (fs.js:451:3)
at Object.readFileSync (fs.js:351:35)
at markupFiles.map.file (C:\Users\User\Downloads\vue\vue\node_modules\parcel-plugin-structurize\src\index.js:41:38)
at Array.map (<anonymous>)
at Bundler.Structurize.bundler.on (C:\Users\User\Downloads\vue\vue\node_modules\parcel-plugin-structurize\src\index.js:39:45)
at Bundler.emit (events.js:182:13)
at Bundler.bundle (C:\Users\User\AppData\Roaming\npm\node_modules\parcel-bundler\src\Bundler.js:361:12)
at process.internalTickCallback (internal/process/next_tick.js:77:7)
(node:11712) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:11712) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
This plugin is very useful to me, but it only supports parcel bundler, but it doesn't support parcel v2. I don't know when it will be supported? ๐
The plugin "parcel-plugin-custom-dist-structure" has encountered an error.
Error: ENOENT: no such file or directory, open '/home/andrew/web/html/dist/1.html'
Successful build without errors
On Windows, running https://github.com/chrisdmacrae/parceleventy with structurize defaults, and getting this error.
(node:24340) UnhandledPromiseRejectionWarning: Error: EISDIR: illegal operation on a directory, read
at Object.readSync (fs.js:493:3)
at tryReadSync (fs.js:332:20)
at Object.readFileSync (fs.js:369:19)
at allStyles.forEach (D:\Workspace\test\node_modules\parcel-plugin-structurize\src\structurers\assets.structurize.js:35:38)
at Proxy.forEach (<anonymous>)
at markups.forEach (D:\Workspace\test\node_modules\parcel-plugin-structurize\src\structurers\assets.structurize.js:27:37)
(node:24340) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting
a promise which was not handled with .catch(). (rejection id: 1)
(node:24340) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with
a non-zero exit code.
When using parcel-plugin-structurize to move around font files and PDFs, the files end up corrupted. Files remain intact when project is built with PARCEL_PLUGIN_STRUCTURIZE=false
.
Chrome DevTools errors for font files:
18 Failed to decode downloaded font: <URL>
7 OTS parsing error: incorrect file size in WOFF header
OTS parsing error: Size of decompressed WOFF 2.0 is less than compressed size
OTS parsing error: Failed to convert WOFF 2.0 font to SFNT
OTS parsing error: incorrect entrySelector for table directory
Acrobat Pro DC error when opening PDF:
An error occurred while opening this document. This file is damaged and cannot be repaired.
All files in the project should remain undamaged. :)
"parcel-plugin-structurize": {
"rules": [
{
"match": "*.{png,svg,jpg,jpg2,jpeg,gif,bmp,webm,webp}",
"folder": "static/images"
},
{
"match": "*.js",
"folder": "static/scripts"
},
{
"match": "*.css",
"folder": "static/styles"
},
{
"match": "*.{ttf,otf,woff,woff2}",
"folder": "static/fonts"
},
{
"match": "*.pdf",
"folder": "static/download"
}
]
}
I am missing some configuration in order to get all html files updated with relative paths?
My configuration is:
"parcel-plugin-structurize": {
"rules": [
{
"match": "*.html",
"folder": "."
},
{
"match": "*.js",
"folder": "js"
},
{
"match": "*.css",
"folder": "css"
},
{
"match": "*.{png,svg,jpg,jpg2,jpeg,gif,bmp,webm}",
"folder": "img"
}
]
},
I am running the build command, index.html is updated to relative css,js and images path but no other html files in the src folder.
these are my scripts:
"scripts": {
"postcss:watch": "postcss src/assets/css/index.pcss -o src/assets/css/index.css --env development -w",
"postcss:build": "postcss src/assets/css/index.pcss -o src/assets/css/index.css --env production",
"parcel:serve": "parcel src/index.html",
"parcel:watch": "parcel watch src/*.html",
"parcel:build": "parcel build src/*.html --detailed-report",
"clean": "rm -rf dist .cache",
"build": "npm-run-all -s clean postcss:build parcel:build",
"start": "npm-run-all -s clean -p postcss:watch parcel:serve"
},
The result is index file updated with relative paths but not other html files.
It's almost same issue as #12 and #14.
My src/ directory is
src/
css
index.css
js
index.js
pages
index.html
and build it, then,
build/
css
css.hash.css
js
js.hash.js
pages
index.html
The paths to assets(css and js) in index.html is flat path such like <link rel="stylesheet" href="css.hash.css" />
and <script src="js.hash.js"></script>
. It doesn't resolve path.
"parcel-plugin-structurize": {
"scripts": {
"match": "*.{js,js.map}",
"folder": "js"
},
"styles": {
"match": "*.{css,css.map}",
"folder": "css"
},
"assets": {
"match": "*.{png,svg,jpg,jpg2,jpeg,gif,bmp,webm}",
"folder": "assets"
}
}
URLs in CSS (for example in background-image property) files don't resolve according to a new folder path.
This is pretty straightforward: adding the same asset multiple times to an HTML file (for example) results in 404, because the path doesn't get updated globally.
<img src="image.svg" />
<img src="image.svg" />
<img src="image.svg" />
becomes
<img src="assets/image.c9a7e9b8.svg">
<img src="image.c9a7e9b8.svg">
<img src="image.c9a7e9b8.svg">
None.
The resulting index.html file should be updated globally:
<img src="assets/image.c9a7e9b8.svg">
<img src="assets/image.c9a7e9b8.svg">
<img src="assets/image.c9a7e9b8.svg">
Please find a minimal test case here: https://github.com/NicolasReibnitz/simple-parcel-structure-test.
Hi there,
I am facing an issue when running "parcel build". Apparently the paths required to correctly reference CSS stylesheets are not set correctly within the html file.
Means, if I run
parcel build src/index.html
with the following config added to my package.json
"devDependencies": {
"parcel-bundler": "^1.12.5",
"parcel-plugin-clean-dist": "^0.0.6",
"parcel-plugin-structurize": "^2.4.4",
"sass": "^1.34.0"
},
"parcel-plugin-structurize": {
"verbose": true,
"displayAssetsMap": true,
"rules": [
{
"match": "*.{css,css.map}",
"folder": "css"
},
{
"match": "*.{js,js.map}",
"folder": "js"
},
{
"match": "*.{png,svg,jpg,jpg2,jpeg,gif,bmp,webm,webp}",
"folder": "img"
}
]
}
I expect my index.html to be rendered with the following references to *.css and *.js
<link rel="stylesheet" href="/css/main.bb27b9fc.css">
...
<script src="/js/main.95ec2e8c.js"></script>
instead I am getting the following generated, JS looks fine but CSS is not referenced correctly (missing the css/ folder)
<link rel="stylesheet" href="/main.bb27b9fc.css">
...
<script src="/js/main.95ec2e8c.js"></script>
My output from the build command looks like this
npm run build-prod
> [email protected] build-prod
> parcel build src/index.html
โ Building...
โจ Built in 2.36s.
dist/main.95ec2e8c.js 1.24 KB 2.00s
dist/main.bb27b9fc.css.map 969 B 2ms
dist/main.95ec2e8c.js.map 875 B 0ms
dist/index.html 786 B 8ms
dist/main.bb27b9fc.css 754 B 1.71s
parcel-plugin-structurize
Config: [AbsolutePathToProject]/package.json
Assets Map:
{
'/index.html': {
source: '[AbsolutePathToProject]/dist/index.html',
destination: null,
replacer: null,
mapFile: false,
dependents: [ '/main.95ec2e8c.js' ],
config: undefined
},
'/main.95ec2e8c.js': {
source: '[AbsolutePathToProject]/dist/main.95ec2e8c.js',
destination: '[AbsolutePathToProject]/dist/js/main.95ec2e8c.js',
replacer: '/js/main.95ec2e8c.js',
mapFile: false,
dependents: [ '/main.95ec2e8c.js.map', '/main.bb27b9fc.css' ],
config: { match: '*.{js,js.map}', folder: 'js' }
},
'/main.95ec2e8c.js.map': {
source: '[AbsolutePathToProject]/dist/main.95ec2e8c.js.map',
destination: '[AbsolutePathToProject]/dist/js/main.95ec2e8c.js.map',
replacer: '/js/main.95ec2e8c.js.map',
mapFile: true,
dependents: null,
config: { match: '*.{js,js.map}', folder: 'js' }
},
'/main.bb27b9fc.css': {
source: '[AbsolutePathToProject]/dist/main.bb27b9fc.css',
destination: '[AbsolutePathToProject]/dist/css/main.bb27b9fc.css',
replacer: '/css/main.bb27b9fc.css',
mapFile: false,
dependents: [ '/main.bb27b9fc.css.map' ],
config: { match: '*.{css,css.map}', folder: 'css' }
},
'/main.bb27b9fc.css.map': {
source: '[AbsolutePathToProject]/dist/main.bb27b9fc.css.map',
destination: '[AbsolutePathToProject]/dist/css/main.bb27b9fc.css.map',
replacer: '/css/main.bb27b9fc.css.map',
mapFile: true,
dependents: null,
config: { match: '*.{css,css.map}', folder: 'css' }
}
}
Structurization complete. Modified 4 files in 6ms
- Moved 2 files to dist/js
- Moved 2 files to dist/css
If you loved the plugin, do consider starring the repository:
https://github.com/samrith-s/parcel-plugin-structurize
Think something could be improved? Create an issue on our repository:
http://bit.ly/parcel-plugin-structurize-feature-request
Any idea how this happened? Am I doing something wrong here?
Thanks a lot and take care,
best,
Jules
I use parcel-plugin-compress
to produce compressed files scripts.js
to scripts.js.br
and scripts.js.gz
, it works well, but I wanted them to be structured like following:
dist/
js/
scripts.js
scripts.js.br
scripts.js.gz
While I build, those two compressed files are missing, If I remove this plugin and rebuild then I got those files back but I don't want a flat directory structure.
My package.json
config:
"parcel-plugin-structurize": {
"scripts": {
"match": "*.{js,js.map,js.br,js.gz}",
"folder": "js"
},
"styles": {
"match": "*.{css,css.map,css.br,css.gz}",
"folder": "css"
}
}
Hello! Can you explain me, what is wrong do i do?
Paths of the resources don't change in html files when i do build. I get structured files, but in the html files still flat paths.
Repo: https://github.com/dreit-p/for-parcel-structurize
Some of the assets are not properly referenced.
This is my parcel-plugin-structurize.json
file:
{
"rules": [
{
"match": "*.js",
"folder": "js"
},
{
"match": "*.css",
"folder": "css"
},
{
"match": "*.{jpg,jpeg,jpeg2,png,gif,svg,bmp,webp}",
"folder": "images"
}
]
}
I have configured the plugin to move .css
files to the directory css
.
The files are moved appropriately, but when it is referenced from the HTML the directory is not taken into consideration. I have included a screenshot of the generated HTML to illustrate what I mean.
This is the generated HTML.
Thanks for all your effort. I not very proficient in Javascript, sorry. Let me know if there is something I've missed.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.