I am using bower And grunt for my web app, by now I had some issues trying to import resources to the dist/ directory. I am using material design icons but I need just few of them. By now the only chance that I've got is to manually tell grunt what to copy in the copy task. Is there a way to have this automatically done just for the resources used?
As far as I know, that is not possible unless you manually find a way to scan your css and HTML files. Sounds like you need to write your own gulp module or search an existing one on the internet.
Related
I've written an electron application which is packed via electron-packager and shipped to users. Now of course I'd like to put at least some very basic Protection on my sources, ideally merging all my JS files into one big file, and uglify this file.
Of course this would break all require Statements in the HTML and JS files (even if I only minify / uglify without merging, the JS files get renamed).
Is there any convenient way to merge those files upon building the app, without rewriting my working environment?
You can wrap your project with webpack. I'm not sure which framework has been used at your renderer UI framework.
But you can use this plugin https://webpack.js.org/plugins/uglifyjs-webpack-plugin/.
This will help to make uglify your source code.
After webpack build then you just need to change the entry point for main and renderer.
I am building a Spring project with Bower to manage client libraries. I am interested to know what is the best practices way to expose those libraries (or any sort of client libraries managed by a package manager) to the web client.
I can see that I can use a .bowerrc file to choose where to install the files. I could have them install into a static resources folder, one where each of the files installed would be accessible to http requests. It struck me as a potential code smell, however, to expose all the files, instead of the ones that I specifically need.
I could copy individual files into such a directory, or adopt an automated solution to do the same. If this is not considered necessary, however, I would prefer not to expend the effort.
Which of these, or any other solution (if any) is considered the clear best practices way to do this and why? (Please provide a reference to support your answer.) To be clear, I am not interested in individual opinion, but rather if there is a known, clearly preferred, solution.
After looking at what a lot of projects and tutorial suggest, it seems that the clear way to do this is the following:
Use a framework like Grunt or Gulp to separate "built" code from source code. Built code, in this case refers to code that is copied, minified, and/or concatenated into a separate folder. The Grunt or Gulp configuration file should include all application code, as well as select source files from bower components. The running application should reference only these "built" files. The directory of "built" client-side code should be served statically by Spring.
I have used bower before. But this time I need to add a commercial javascript library whose license I purchased online.
It seems to be the kind of library you would add with bower, but this one is not contained in any repository so it can't be pulled with bower. It must be added manually.
How should I structure my folder structure so it still makes sense?
Is there any best practices for adding non-bower libraries to a bower-esque project?
I'm working on a little web application using Express.js, Backbone.js, Bootstrap and some others. I've decided to give Bower a try to manage the front end components for this one, but after installing the packages, I noticed that all of them installed tons of stuff that I don't need at all, like LESS files (Bootstrap) or QUnit tests for the framework (Backbone), README.md files, documentation source code, and so on:
As you can see, it's absolute madness in here.
I've searched the package index a bit and I've found a leaner version of Bootstrap called bootstrap.css, but after installing I noticed it is still version 2.3.2, so pretty much outdated.
Isn't there a way to install up to date dist versions of all those libraries?
The idea of having a package manager is nice but it seems a bit off putting to have my application source bloated with all this stuff. I most definitely do not need the Backbone documentation installed on my web server.
This is a matter of package authors not configuring their bower.json to ignore those extraneous files and folders. Additionally, not all package authors configure their bower.json to list the main file(s) for their package.
You can see how without having those two pieces of information-- what files aren't needed, and which ones are the "main" files-- Bower, or any other tool, can't reliably guess what is necessary and what is junk.
As far as it bloating your server; ideally, you shouldn't be committing Bower components. You would have a build process that takes your source files, wherever they may be on disk, and morphs them into one minified file.
You can try bowercopy.
What does it do?
Download all the bower components listed in bower.json
Copy files you need to specified folder
(Optional) Remove the bower_components folder.
Every time you run the bowercopy task, it will do the process above.
A grunt config example
bowercopy: {
options: {
destPrefix:'app/jslib', // Here is the dest folder
clean:true // It's optinal
},
dist: {
// List all the files you need here
src:'backbone/backbone.js' // "src" can be an array
}
}
Yeah, You have to specify all the files you need one by one. But it does achieve your goal.
The case
I'm trying to get to the most convenient solution of setting up a big javascript project.
Requirements are:
Modular javascript: just one object in the global namespace if necessary
Compatible with bower components
Compatible with grunt: building and deployment done by grunt (contrib-usemin or contrib-requirejs)
To my own suprise, this turns out to be a non trivial task.
I'm running into the following issues when using AMD:
Loading bower components cannot alwasy be done easily. Raphael for example cannot be loaded using AMD without modifying the source. Which is really not an option when using bower, since I only push the dependency list to git. Also: loading javascript libraries that do not support AMD, can be shimmed, but consist of more than one file (like jquery-ui) are problematic; I would need to hack that together.
De requirejs optimizer builds everything into one file, not allowing the option to seperate libraries from site scripts. Something that seems a sane thing to do.
When I'm NOT using AMD I run into other issues:
How do I control dependencies in a large project?
A possible solution
So I'm contemplating a solution that would:
Keep it portable, don't force AMD on future users
Prevent global namespace clutter
Remain compatible with bower
Allow usemin to build the whole lot in grunt
It would consist of a small script defining a require( <deps>, <factory> ) and a `define( , , ) function that implements basic module definition and injection. It would not implement any asynchronous loading or queuing of scripts with unmatched dependencies!
Furthermore I will define any module using the named module patter instead of using anonymous modules. Even though this will sacrifice a minimal amount of portability.
Now I can use either requirejs or that tiny dependency injector in combination with manual <script src=""></script> loading. When using the latter option I would still need to register the loaded non-amd libraries using something like this:
define( 'raphael', [], function() { return Raphael; })
What do you think? Am I doing something sane? Reinventing the wheel? Unnecessarily complex?
Update
I think I could use almond (https://github.com/jrburke/almond) to fullfill the abovementioned purpose.
Loading bower components cannot alwasy be done easily. Raphael for example cannot be loaded using AMD without modifying the source
you could use the shim config from requirejs to make modules loaded that are usually not AMD loadable. (or is raphael a really special case?)
De requirejs optimizer builds everything into one file, not allowing the option to seperate libraries from site scripts. Something that seems a sane thing to do.
thats not true imho. read http://requirejs.org/docs/optimization.html#wholemultipage