I use npm as my build tool, by populating the scripts field with various commands for the tasks I need. I’m satisfied with the setup, except for one small detail: when building for production, I’d like for references to CSS files in <link> tags and references to JS files in <script> tags to be updated for cache busting (i.e. to be modified by appending ?random_string to the file names, or similar).
I’m using jade, in case there’s a way to do it that way that I missed.
I don’t mind if the solution busts every file, even if they weren’t changed since the last build. What I care is that it does not require me to add complex code to the website itself (like a function with this as its sole purpose); it should preferably be an external command.
So far, I haven’t been able to find an acceptable solution. I’m almost about to resort to a regex, but would really rather have a more robust solution.
Since Jade allows executing any piece of Javascript code you can append a datestring at the end of your URL as a query string which is the standard way of invalidating cached scripts:
script(src="/app.js?#{Date.now()}")
Related
I'm new to webpack, and am trying to get my head around how I can switch an existing project to using it (am now using React in parts of it, so it has become necessary).
The kinds of things I am uncertain about:
As the package.json contains all my server side stuff too, will it not try to compile all this into the bundle.js?
My project contains a huge number of statically served files, and also a load of EJS generated pages. What's the best method for converting everything to webpack, I'm thinking it's going to be a bit of a headache to switch everything to 'require' statements instead of tags, but I guess it's the only way of taking full advantage of the benefits of webpack? Are there any recommended methods (or even scripts that will handles these changes for me?!).
Webpack will take care of "tree shaking" for you -- that is, it will only include the modules that your entry points explicitly use, no matter what is in your package.json file.
Looks like there is some support for EJS already in Webpack. A good conversation of it is here: https://www.npmjs.com/package/ejs-simple-loader#purpose You can then transition gradually (or not at all) as need be.
1.The backend dependencies in your package.json is unrelated to your frontend stuff. You just need to indicate the correct entry points.
FYI Entry Points
2.My suggestion is that you can find one EJS loader in GitHub to solve it.
FYI Loader
I’m building an electron app. In it, I have a webview with a preload script. Inside said script, I’d like to use sweetalert.
I installed sweetalert with npm install --save sweetalert. Inside my script I load it with require('sweetalert') and call it with swal("Hello world!");. I now notice it doesn’t look right, as the alert is missing its required CSS file. But I’m loading it with require('sweetalert'), which is great since sweetalert can just remain in its directory inside node_modules and I don’t have to care for it, but its CSS is an integral part of it, and is not getting pulled the same way.
Now, what is the recommended way of solving this? Keep in mind I’m inside a javascript file and would like to remain that way. Do I really have to go get the CSS file and inject it in some way? And how would I do it correctly, since it is inside node_modules? After testing it, it seems like it can’t be done in this particular case due to Content Security Policy.
Either way, that seems so clunky in comparison to the require statement, it’d seem weird for a simpler solution to not be available.
You'll have to include it like you would normally do in a browser, for example in index.html. Copy it out of the module folder into your css folder if you have one and link it with the link tag. It depends on if you're using plain electron or some other boilerplate template with there is a gulp/grunt workflow on where to stick it but that's it really, electron is just a browser that's running your JS/html so it's really the exact same process. require only loads the JS module but not the styles.
if you wanted to include it dynamically you could use the same techniques as a regular browser for example (ex. document.write/create element).
I'm not familiar with sweetalert, but hopefully this helps.
Your syntax for require should be something similar to this.
var sweetalert = require('sweetalert')
You should then be able to access methods on the sweetalert object using the following syntax.
sweetalert.someMethod()
Remember requiring just returns a javascript object. Those objects usually have methods that will allow certain functionality. If you want to add sweetalert to your page, you will either need to inject it within the html, or the javascript within the sweetalert module will need to dynamically create html where the css is included. I hope that clarifies some things and helps you get a better sense of some of the inner workings.
For example, if I'd like to read the source code of the process.chdir JavaScript function, how can I do that?
I can find process.js on github but not sure that's the right file. Is there an easier way to navigate from docs directly to source?
There is not a simple way to navigate directly from the web doc to source. To find the code for a specific function, you have several choices:
Create a small test app that calls the function in question, run node-inspector and step into the function of interest. That will take you right into the source code that your installed version of node.js is running. You can then continue stepping or just examine the local source code shown in the debugger.
Grep your own node.js installation. Since all the .js files are right there and in plain text, you can find it there.
Go to Github like you've done and find the relevant function. This is not always easy to do (as you've discovered) and it doesn't guarantee that you're looking at the source for the exact same version you have installed. If you're a Github wiz, you can always figure out how to see the right version, but that's a bit more work.
If the code you want is actually implemented in native code, then you're going to have to use options 3 or maybe option 2 (if you have native sources locally).
I'm looking for something like gulp-html-replace but instead of replacing what's in between the
Will be useful for modifying html documents.
I think you're asking the wrong question. If you have a consistent part (content) present in multiple html documents, you should be using a server side language to generate the html pages. That way you can create partials and modularize them to be included in multiple pages so when you change it once the change can be reflected.
If this is somehow not an option (for whatever reason) you should consider looking at something like handlebars
Also if the content is fairly static, most modern editors will allow you to search / replace in multiple files, there should be no reason to use gulp for what you are describing.
That being said try gulp-inject
At the moment when you go to select an image inside an entry using the EE default file manager, the default view is 'show files as a list'.
Is there a way to show the thumbnail view as the default?
At this point I would be happy with a core hack.
I don't usually use the file manager for sites (much prefer Assets) but this client had a tight budget
I've wondered about doing this in the past as well - turns out it's pretty simple. Open up ee_filebrowser.js and search for the first instance of a("#dir_choice").val(). Immediately after that add this:
; a("#view_type").val('thumb').change();
Make sure you include the leading ;.
I've only tested this in Safari but I can't see why it wouldn't work everywhere. Incidentally, JS beautifier makes this sort of thing infinitely easier.
I don't recommend hacking core for any reason and I suggest it should be avoided at all cost.
With that said, I will provide what I've found out just the same.
Looks like the following files, in EE 2.5.3, are what you'd want to edit:
/themes/javascript/compressed/jquery/plugins/ee_filebrowser.js
/system/expressionengine/libraries/File_field.php
I found these doing a file search in my text editor for view_type which was from the id of that dropdown. The javascript is minified so you'd probably want to un-minify it and then rewrite the part which handles the switch. I'm not the best JS/jQuery person out there, and un-minified js makes it a bit harder too so, I won't offer any more than what I've found so far.
Consider pulling out the parts parts from the two files if you aren't great with js and maybe start a new post tagged accordingly.
Also note: there might be more to this than just those two files so consider this answer a start and nothing more.