What is the best practice for controlling the order in which scripts / stylesheets are concatenated when using Brunch?
A simple version of my problem involves an application using Twitter Bootstrap, which requires jQuery. Bootstrap requires that jQuery is loaded first.
Initially I had the following in my vendor/ directory:
jquery-1.9.1.min.js and bootstrap.min.js
Which was concatenated by Brunch into my vendor.js file in alphabetical order, namely, bootstrap first.
To solve this I appended a number to the beginning of each script to designate the order in which I wanted them to concat -- 1-jquery-1.9.1.min.js and 2-bootstrap.min.js
I haven't been able to find information on how to do this more elegantly but I can't imagine that's the best way to accomplish this. Thanks for any help!
you can set order of concatenation in config
http://brunch.io/docs/config#-files-
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.
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()}")
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.
Commonly movable type will publish HTML files which contains absolute path, but if I want to host the site under different domain(e.g., both HTTP and HTTPS), it is very inconvenient.
So is there a way to change all the paths to resource of my site to absolute ones?
Thanks
I think you want "reletive" paths. The relative directories can be symlinked/aliased on the server. Once file paths are aliased...
Update your mt-config.cgi file to use reletive paths for the required config directives:
StaticWebPath
CGIPath
This is also covered in the installation guide
Short of constructing the URLs yourself in your templates, you'll need a plugin. I've found that MTRelativeURL works well, despite not being updated in a while.
The plugin adds a few new tags but the simple approach is to use the 'relative_url' filter where needed:
<$MTEntryPermalink relative_url="1"$>
Keep in mind that you'll want to continue using absolute URLs for the links in your RSS feed.