Imagine I've just used bower install angular-date-range-picker to install a plugin I want in the root directory of my project.
Now typically all of my js files (angular project) are sitting in a folder called js on on the root directory of the project.
Here's where I feel I'm missing something. How do I include my nice new plugin into my project without tracing back through every dependency the bower command installed? I typically include all my scripts on the index.html with tags. I've copied the plugin js file out of the bower_components folder and into my js folder (which I now feel is wrong).
If this is an acceptable way to link to plugins then should I be linking directly to the bower_components folder and how do I include all of that plugin's dependencies without literally writing a script tag for each one? (And how do I know what it depends on, there are other plugins in that bower_components folder for instance).
Apologies if this question doesn't make any sense, I'm obviously missing some very important workflow knowledge and I don't know how to phrase the question to find want I want with Google.
You should be writing a script tag for each one. In most cases, check the corresponding github repo to see what dependency libraries are needed. In addition to this, a hint to see what file you should be referencing in your script tag will have an extension of .min. .min is a minified version of the library that removes whitespace and replaces large variable names.
Once your application is ready for production, there are a couple things you can do.
You may want to move to a Content Delivery Network (CDN) instead of referencing your files locally. The advantage of this is you'll have a reliable host hosting your library files.
Another option is to use either Grunt or Gulp, which has the ability to combine all of your dependancy files into one file. The advantage of this is having a much quicker load time of loading one file instead of multiple.
Content Delivery Network - Wikipedia
Grunt - Homepage
Gulp - Homepage
Usually it's configured something like this:
<!-- build:js ${contextRoot}/app/assets/scripts/modules.min.js -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/select2/select2.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
...
<!-- endbuild -->
to include script into index.html. Then during build process some grunt/gulp (grunt-usemin, for example) plugins can replace the entire section between <!-- build: --> comments with minified version of the files.
As said before, you can use Grunt with grunt-injector, it's been specially made for that and can be used to automatically inject bower dependencies into your index.html, as well as your other js/css files (you will need the wiredep dependency).
You will no longer have to worry about your files injection.
Related
Currently I am working on a website project. Its file structure looks like below:
source_code
- application
- node_modules
- system
- www
-- js
-- css
-- img
-- third-party
-- index.php
- package.json
This time I would like to ensure third-party libraries with NPM.
What is the best practice if some package should be available in public way and I want to avoid the manual copy-paste flow.
(Example packages: jquery, lazysize, bootstrap)
It depends on how you're setting things up to be used. If you're using webpack, for example, you would probably handle your JavaScript dependencies in package.json, and let webpack collect all these into a dist/bundle.js file which is the actual JS file included in your index.html.
If you don't have a packaging step like this set up, you can do one of these methods:
Link out to a CDN in your index.html (<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>)
Download this file in www/js/lib/ and include it locally within the site (<script src="/js/lib/jquery-3.2.1.slim.min.js"></script>).
I am noticing that Aurelia is building to the scripts directory in my CLI project. Is it safe to add this directory to .gitignore, or is there some reason to track changes to 'scripts' in Git?
You can safely add scripts to the .gitignore file.
Aurelia CLI uses the scripts folder to store the generated scripts (vendor-bundle.js and app-bundle.js).
vendor-bundle.js is for libraries (e.g. aurelia-binding, bluebird and jquery).
app-bundle.js is for all your HTML, CSS and JS files from the src folder combined in one JS file.
Because these files are renewed every time you run au run or au bundle, there is no need for them to be in version control.
Depending on what functions the scripts have, you might want to leave them in the repo.
E.g.: you add a new member to your team, and said scripts might be required for your project to work. In which case, if they're not in the repo, he will bother one of you to transfer them to his computer.
Edit: If the scripts are automatically generated every time you build the project, or if they are downloaded via a packet-manager, then there is no need to leave them in the repository.
If this is the case, it's a safe bet you can add the folder to the .gitignore. If this is not the case, then it might be better to leave them in the repository.
This all depends on your project, where you are putting your scripts and how the frameworks work.
I would like to use the angular-cli to build an app that bundles my app code but does not include the Angular2 framework or other large external JavaScript libraries in the bundled code. I would like to load these libraries from a CDN when the page loads. Is there a way to do this?
Also, is there a way to do this while preserving the benefits of a local build where only the parts of the Angular2 framework that I am using gets loaded?
I saw this question, but it was for SystemJS and I don't think it applies to Angular-cli: How to load angular2 using CDN and SystemJS
You simply need to add the appropriate <script src=""> tags pointing to the CDN to the index.html file.
Remember to remove the .js files from angular-cli.json so they don't get bundled with the app.
Currently, you can't do that for the Angular 2 js files itself, they are automatically bundled with your app. Though the latest updates enable the web servers and browsers to cache the vendor files, so they don't get redownloaded on every visist to your app but only when the hash changes.
When creating an application with Angular, version 2 or greater, uses a build system that only includes the portions of the Angular platform you use. Templates can be compiled at build time, allowing the build process to remove the template compiler from your bundled payload. Finally the build process does tree-shaking with the help of static analysis of your code, which further removes from the payload bundle unused portions of the platform.
If you provide Angular from a CDN, it would need to be the kitchen sink, the entire platform. This would be huge and a detriment to your application.
You are much better off allowing angular-cli bundle the portions of the platform that you need. As the WebPack treeshaking plugin improves your bundle sizes will get smaller.
I would add your whole app to a CDN such as Akamai. For example (depending on how your app is structured) you could cache files such as the ones in the below list...
index.html
List item
application.css
application.js
templates.js
vendors.css
vendors.js
This would give even better performance than just caching the Angular framework files on the CDN.
I need some help with organizing js files in VS.
So my problem is, that VS(MVC) put all js files by default into the script directory, but i also have js created by me, in a sub directory, like this:
Now my problem is that when i open the scripts folder, the js files installed by NuGet take 2-3 screens in length, so i either have to open/close it every time, or scroll trought like there is no tomorrow.
So my question is, is there any good solutions to it? Like moving all the files into a subdirectory, and change every bundles, and NuGet config, or should i create a separate script directory for my custom js files? Any good ideas?
You can place and use as many subdirectories you wish for your own scripts.
With the help of Bundle.IncludeDirectory all your scripts will be added to the bundle without having to define multiple bundles.
Concerning nuget I don't think you can (re)place those scripts at a location of your choice.
See Stackoverflow: Include all files in a folder in a single bundle
Sadly you cannot change the default folder that NuGet downloads the files. Is the author of the NuGet package that decides where it will get installed.
An alternative is to use Bower. With it you can control where files get downloaded (look at this question).
Or, as you said, move your own javascripts to another folder and forget about the default.
I made a gulpfile to setup a front-end development working environment.
Here is how it works:
The script grabs Bower packages defined in bower.json and outputs in to the /public folder the main files of every installed package, js and css in their respective production folders (/public/js) (/public/css).
The scripts also starts a watch task on all files, css, js and html files and whenever I save those files on the development folder (/src) their /public counterparts will be updated in real-time.
This way i simply install packages locally with Bower and by running this gulpfile i will have the production files ready in my /public folder, but i need to link them!
As said, the missing part that I want the script to write links to those files in the head of my index.html, based on what packages I decided to install from Bower.
So for example, if I downloaded Bootstrap, I want the script to automatically inject in to the head of my html page the link to Bootstrap css and js files right before the body closing tag (ideally).
Here's my script on github, have a look at the README and at the gulpfile:
I don't know what approach and/or if there's a gulp plugin to use to achieve that, if someone can point me in the right direction i would appreciate very much. Thanks.
For this I currently use gulp-inject, works like a charm!
How about just using
gulp wiredep
Example:
Add Holder.js package to existing Yeoman/Bower/Gulp project.
bower install holderjs --save
This added it to the dependency array. After you need to get it added to your html by using
gulp wiredep
I was looking for this too. And it seems that gulp-processhtml plugin can fit for this task and/ or gulp-replace and/ or gulp-preprocess.