-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
More details on error messages #1
Comments
Hi Nicola, I'm glad Optimum offers (more or less) what you're looking for and that you've found it useful. A quick bit of background which will help explain why some of the functionality you're looking for doesn't currently exist in the codebase. Optimum was originally designed as a tool to support Single Page Application development with Angular, where you generally end up with a single Where multiple html files are concerned, the issue becomes a little bit more complex as you generally need to combine bundles - something which Optimum doesn't have the ability to handle in its current form. The reason you would want to combine scripts is that it is generally a better idea to leverage client-side caching, or ETags from a performance perspective - so bundling all your resources up front means that people don't need to download the same scripts again each time they visit a different page. Answer to your QuestionThis approach will run optimum for each HTML file that find returns, it is going to be slow and won't correctly handle cross-html file bundling find . -iname "*.html" -exec optimum {} \; At the moment Optimum doesn't have a means to concatenate bundles, so the last html file's resources will win out - that's not an issue if they all refer to the same CSS and JS files, in which case you can use the command below to run Optimum for each of the files. Keep in mind that this isn't a particularly optimal solution and will end up running the CSS and JS bundling for each of the files (which will make it slow). The better approach I'll quickly take a look at adding the functionality and let you know when there is something available for you to test. Regarding the READMESounds like a good idea to me, I'll make sure it is added - if you'd like commit credit then feel free to open a pull request with that addition and I'll merge it in, otherwise happy to do it myself. |
Hi Benjamin, thank you for replying, and with a nice clear explanation and good news. I'll be very glad to test if/when you find the time to look into it, that would be great. As for the readme file, I don't mind the commit credit, thank you, feel free to adapt the suggestion to whatever final form you prefer. |
Hi Nicola, Not a problem at all - I've just published v2.2.0 of Optimum on the NPM repository - it now supports providing multiple html files on the command line and will do its absolute best to combine the JavaScript and CSS files into the global bundles. I've done some rough-and-ready tests of it and everything seems to work as expected, but feel free to let me know if anything breaks for you. I've also added a rough placeholder in the README explaining the need to make those resources available, if you feel it isn't clear enough please tell me and I'll add some examples there. |
WOW how fast. I'm going to install the new Optimum and try. I was writing this to you before seeing your last message come in: Actually, nearly all of my pages refer to the same set of resources, except a few (four at the moment) which also involve lightgallery (css and js), because they carry pictures. Maybe I could treat these few pages separately, replacing manually the multiple referenced resources with what Optimum "packed" for the other pages, and leaving resources related to lightgallery separate from the "pack", thus avoiding that the majority of the pages imply loading lightgallery although they don't need it. Or... a nice feature might be an eXclude parameter, -x path-to-resource-not-to-be-concatenated-with-others e.g.
|
As for the readme, that's nice, very precise.
Maybe it could be a bit more idiot proof (thinking of myself one hour ago) with something like this: [no changes before]... then Optimum will download the scripts and styles from the provided locations. You need to ensure that those scripts are actually available at the specified locations. If your HTML files refer to "http://localhost:xxxx/..." then you need to have your local server running at the same time as Optimum (e.g. http-server), or a "connection refused" error will be issued. |
I have removed the previous version and reinstalled:
Now I'm getting an error, "file or folder not found", calling with one argument or with more than one argument or with no arguments at all (which probably means that the optimum command itself doesn't get resolved, a matter of symlinks here with npm on Linux Fedora 22.3 probably, because auto-completion does work):
(index.html was not minified of course). Done uninstall/install again to be sure:
Same error. npm version:
Benjamin, I need to leave the PC for 6-8 hours now. I'll try to check the symlinks mentioned in the install/uninstall messages when I'm back, and I'll let you know :) Thank you again! See you later, |
Hi Nicola, As far as the exclusion option goes, it's a rather tricky problem to tackle because of the way JavaScript ordering tends to impose dependencies - simply excluding a file from the bundle can quickly lead to it becoming unusable as a result of missing dependencies, or breaking other scripts in the bundle because it isn't present. One approach you can use to work around this limitation is to make use of Regards, |
Hi Benjamin, Yes it works, great! I've been making some tests. But first I'm going to mention something I realized soon after quitting the PC last night. Workflow caveat related with resources locationThis might be a further addendum to the readme file:
(This might cause repositories of pages hosted in gitHub grow faster in size, due to git maintaining history. Of course it depends on how frequently the webmaster would change such resources, probably the habitual tasks of most websites after the initial develpment stage involve changing the actual content much more than those resources. Finally, it's probably often possible to replace absolute URLs to the same website with relative paths.) And/or in the future, when/if you are willing to consider adding this feature, there might be a new parameter specifying pairs, e.g.: -f http://www.nicolabernardelli.com/ . meaning: during the optimization process, fetch resources pertaining to the first URL or path from the second one instead (but leave the original URL or path in the optimized ouput file). Reading output more easilyI get some errors. Maybe it would be useful to have in output something like "<empty line, then>Opening file sampleFileName.html" (some tools output coloured underlined text for it, but putting an empty line before would be simple and effective). How I'm launching Optimum, console output, stdout+stderr output.public/ is where Hugo writes, I run hugo server before for it to produce a website with http://localhost:1313/ instead of http://www.nicolabernardelli.com/, in order to be able to test locally (of course the website to be optimized to be deployed into production would carry the real URL, specified in the hugo config file or on the command line). Hugo itself is a good server, or I can stop it and use http-server instead (if it runs while hugo is launched, hugo gets another port and refers resources to it, so having http-server serve on the previous one becomes unuseful).
Content of optimumMultipleResult.txt
|
Hi Nicola, Afraid I don't have the time at the moment to add the 'pairs' functionality you mentioned, I'm also not entirely certain how useful it would be seeing as all remote resource references are removed anyway when the file is bundled and replaced with the relative reference to the bundle itself. Something that you might need to test though is the relative references generated for html files which are not in the root directory, they might not point to the correct bundle file - if that is the case please let me know and I'll prioritise fixing it. In the mean time, I've worked on adding some more useful output - it should now be significantly easier to read as a result of a couple of changes to when things are printed, and some colours as well. You'll see this if you update to v2.3.0 from the npm repository. Regards, |
Hi Benjamin, OK, thank you, I'll update and test what happens with the references generated for html files not in the root directory. As for the pairs, no problem to me.
On the other hand, I've been searching (pretty much in all my spare time, as always in this period) and I've seen there are tools online which should permit me, before optimizing, to check the syntax of those files and give detailed error messages, I think I need to submit that js file first thing now and see how those tools work. Best regards! |
Hi Benjamin, After updating, that "file or folder not found" error appears again (it was solved in the previous update). |
Sorry about that, fixed again - the pains of working on Windows systems... |
Hi Benjamin, No problem, I updated Optimum soon after your fix and have been full steam on this matter almost the whole day. References generated by Optimum for html files which are not in the root directory are OK. In this error message:
Maybe "undefined" should be a file name? I get a lot messages like that. Well, as for the only JavaScript file I have at the moment, I used JSHint to check and I could very easily fix the only 2-3 warnings/errors I was getting from it (I installed the gedit plugin but these instructions did not work here, this tutorial did). But I really get a lot of warnings and error messages when checking my website with some online CSS validators, for instance the The W3C CSS Validation Service said Property text-rendering doesn't exist : optimizeLegibility but then I found out on a Mozilla document for developers that it does exist. Well, I'm not going to dig into those kind of discrepancies now, and I'm not going to revise that whole lot of messages. For now...... I ended up using copy&paste online tools I found on this page to minify CSS and JS, which do not perform CSSLint-like or JSLint-like validity/quality control (well this Java file passes JSHint now anyway, which is a JSLint fork I believe). Then I concatenated (simply with cat) into one file I called bundle.min.css the style sheets in the same order they were referenced from html (except font-awesome, which is still fetched remotely because apparently fetching it into a local resource breaks it). I don't plan to be changing css/js often, so bundle.min.css and lightgallery.min.js might stay just like that for a while. After changing my content, I simply call hugo -v, I launch this shell script I called html4production.sh and that's all, content of public/ is ready to deploy.
If instead I launch Optimum on this website now, I do still get those errors of course (as I said, I did not fix all those css related problems), but the website works almost entirely fine apparently, except a few things, e.g. the font awesome g+ logo (as foreseeable, because Optimum fetches it into a local resource), the lightgallery javascript, a minor change to the contact page which is probably easily fixable... Well it's that whole lot of CSS related warnings and errors I got from the W3C CSS Validation Service what made me decide to use those online minifiers which do not perform any deep validity control on the code. If that code works for the browsers, it's OK for me, at least for now. Maybe I'll look for some html-only uglifier/minifier, not urgent anyway. I'll be glad to test further if you need me to, Benjamin. Congratulations for Optimum which is certainly a great tool. Again, thank you! Best regards, EDIT: According to Google PageSpeed Insights my website is pretty fine now, for mobiles I have 8 of 10 rules OK, and I could probably fix rather easily the remaining 2 rules, and for desktops I'm OK on 10 of 10 rules, the Hyde-X theme was a good base despite the W3C service CSS related complains. |
Hi,
I'm trying to optimize my website, www.nicolabernardelli.com, css concat and minify (only the classes actually needed), js concat, html minify. (There's only one js at the moment, apart some inline code in the contact page.)
Optimum seems to be what I was looking for, thanks a lot for sharing it.
Question
What is the correct way to call Optimum to have the entire website optimized with all html files referring to one css file and one js file?
If I call
I only get index.html minified, and styles-head.min.css is created.
If afterwards I run Optimum on another html file, I get that one too minified, and it also references the same styles-ahead.min.css file...
What if the two html files analyzed separately need different css classes?
Should I call Optimum passing all html filenames at once?
Nope, with this call Optimum only acts on the first encountered argument (find is putting index.html first in the list here, strange, I would have expected to see 404.html first).
Suggestion
I'd like to propose two modifications to the readme.
The first is to add the answer to my question above.
The second is due to the fact that I have been getting erros and it took me a while to understand that, unlike other tools I have been trying out, Optimum is fetching referenced resources through the same interface specified in the html code.
I'd suggest to add to the readme something like this:
The text was updated successfully, but these errors were encountered: