I have a project that just consists of single HTML page, which includes several JavaScript and CSS files (at the moment via <include> and <style>).
For development including the individual files is quite nice.
My problem: for bundling a release, I would like to (automatically) bundle all scripts/css into one single HTML-file.
The build process (testing, code formatting, JSDoc generation) is implemented with Grunt.
Desired solution: I need a Grunt plugin (or something that can be integrated with Grunt) to "compile" the single HTML-file file.
Just for completeness (link to the project repo): https://github.com/dennisguse/TheKarte
I used grunt-assets-inline. (Link)
Related
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 am using Webstorm a start a angularjs project. I've created a lot of *.js files. I have the include them using the tag one by one in the html files. whenever I created a new js file, I have to create the script tag.
The things I needed is just like gulp-concat, but without minifying. minified code are hard to debug.
Can anyone help on this? Thanks!
WebStorm doesn't have any built-in functions for combining files... But there are plenty of different tools on the web - plus you can create your own batch files for this.
I can suggest using Grunt grunt-contrib-concat task (https://github.com/gruntjs/grunt-contrib-concat). It supports merging files. You can run the task using Node.js run configuration, or configure it as a file watcher, or use Grunt console.
Browserify (http://browserify.org/) is one more way to go - it allows using commonjs-style syntax when developing front-end applications, combining the files into a single file for production
Or, try Webpack (https://webpack.github.io/) - it's a modern powerful module bundler
I wanted to create a javascript code library that will be eventually merged into one single minified code file. I was trying to search on how to be able to have these code files separated for development, but I could only find how to have a javascript file add a different javascript file to an existing html page. How do you separate javascript files for development only?
Develop each module of your library as separate .js files then setup a task running tool such as Grunt. You will need node.js along with npm to install Grunt.
You can then use the grunt-contrib-concat plugin to concatenate your javascript files together, and minify it using grunt-contrib-uglify.
These files are separately developed and combined into a single file generally known as minification and bundling, you could use asset compressor in Ruby on Rails in case you are developing in Ruby, otherwise pure javascript development uses Grunt based system, check UglifyJS.
When i use r.js to optimize my project, how do I get it to produce a single index.html file that includes only one script (my optimized script) and one css file (my optimized css)? Is this something I would need to write myself post build?
r.js don't include this option built-in. But with a full stack build tool, this will be achievable. I'd recommend grunt.js for this (you'll probably want to take a look at how to create custom grunt task for this though).