So the .Net project uses a .csproj file to keep track of files that are included in project which eventually make it's way on prod. Having a webpack configuration that bundles the JS and CSS and also moves all assets into a /media folder, all with a hash how it's possible to "include" those files in the project in an automatic way. Maybe by reading an asset-manifest.json file or some other way?
Working with MVC applications for example you can configure webpack to output the bundle in your scripts/dist folder and your mvc app can referrence this one.
Other option if you need advanced scenario is using gulp to copy files / clean / whatever.
Related
I have a project that uses source files external to the project. Effectively, there is the actual project source code (an Typescript/Angular 2 application, lets call it the 'core' stuff), and this is a generic web application that is meant to be the base code that consumes these external source files.
The external files include additional stuff-- that could be SCSS files, images, evn additional JS. The way I want this to work is that webpack copies these external files from any source directory (this is critical, it is not part of the core project) to a local .tmp directory. The files in the .tmp directory are worked on along with the core src files to generate the prod output.
I can't figure out how to add these additional external source files to the watch list. Effectively what I'm looking to do is watch that directory and as things change, it re-copies the affected files to the local .tmp directory and triggers a recompile.
Presently I have to restart webpack and have a very very ugly solution using Grunt to watch the additional files. It's nasty but these kinds of workarounds have historically been what I've had to do with webpack.
Does anyone have a better solution? Ideally I'd like to not have to mix grunt with webpack. Webpack should be able to do this, but its hard to know whether there's an existing plugin for this or what the best approach would be.
Also, please spare the "look for it on google" or "read the docs" comments. I've combed through it all, hard, and have not found anything.
Thanks in advance.
As of now Webpack doesn't watch external files out-of-the-box . You need a plugin for that.
Basically idea is to have a file watcher module chokidar / watch , listening to the file change , and when there is a change, restart the webpack compilation phase . Webpack plugins can access the compilation object and we you need to hook it to a compiler phase i.e. 'emit' , 'after-emit' etc.
This Webpack plugin exactly solves your problem - https://www.npmjs.com/package/filewatcher-webpack-plugin .
My application is using JSPM and SystemJS for module loading and is using angular.
My config.js file has angular map like:
"angular": "github:angular/bower-angular#1.5.8"
So when I do import angular from 'angular', I am getting the angular.js file from the Path specified in config.js file. That's good.
Now the requirement is I want to use minified third party javascript files (angular.min.js) in the app. But there is no minified files in jspm registry
So the initial loading time of my application is high because of so many large files e.g. angular.js, browser.js etc. that takes too much time to load.
I know, I can do a jspm bundle to minify all dependency files recursively which includes vendors' files also. But my questions are:
1 - Is it possible to use vendor's minified file (angular.min.js) directly with JSPM? It is good to use vendor's minified file rather than minifying them ourshelves, Isn't it?
2 - If above one is not possible, then how can I bundle only my application specific files and still able to use (bundle separately) minified angular.js file?
What is the recommended approach here?
In your config.js file you can map any file with a name and have it imported by SystemJs in the browser
So you could potentially do something like
"angular": "jspm_packages/...../angular.min" (The path to your file)
However the recommended approach would be to bundle and minify all your vendor files and as you mentioned, bundle your application specific files separately
You can do this with something like Gulp or Grunt to generate the 2 files
There are lots of examples online of how to do this but here is one to get you started
https://blog.dmbcllc.com/using-gulp-to-bundle-minify-and-cache-bust/
Once you have generated both files you add them to your html page via a script tag
<script src="Your File Path"></script>
Option 2 is the preferred approach and I would recommend spending the time to get setup as you only have to do it one time to get your head around it
As a school project I am making a multi-platform app. I decided to use JavaScript. I thought it would be great to have something like an MVVM pattern with Ionic2 where VM is the Angular2 part of Ionic and I would have two Views. One for mobile(the html/css parts of Ionic), and Electron for desktop. I have a problem though. In a basic Ionic project the View and the Angular part is tightly coupled, I mean they are in the same directory, cannot change the HTMLs easily.
What I thought would be great (although other solutions are welcome) is to have an "ionic" folder and a "desktop" folder, both the same structure same file names.
When building the app for mobile with Ionic I want all the files in the src folder to be copied to a dist/ folder and html,css files from src/ionic copied to their place like in a normal ionic project(the only difference, that it would be under a dist/ folder not src/, so I have to make the www/index.html to include these too instead of src/ which it does normally in ).
And when building for Desktop I just copy all the things the same way but from src/desktop instead of src/ionic.
That way I could have my business logic in "plain" Angular2 and could be reused creating the app both for desktop and mobile.
So my question is can I modify the Ionic build process somehow, to allow me to do this? Can I create my own gulp or grunt file? Or webpack? How to do that?
Finally I wrote my own gulp file, to copy the files to src/.tmp/ and after the copy task is ready I call the original scripts which are used by ionic to serve, build the projects. I could solve everything with this method.
On serve task gulp watches for changes in src/ files excluding src/.tmp and copies the changed files to the src/.tmp folder. Which is watched by ionic and rebuilt everytime something changes.
I was lucky because ionic is built on top of angular, so the builder toolset used by ionic is 100% compatible with plain angular projects.
I have created two script bundles for my jquery js files and bootstrap js files and a content bundle for all css files. What about my js files which i have used in my app and other application folders? Can i do bundle and minify those application's js files using bundle.config of my MVC Project? I am little confused what to bundle and what not to bundle and what project structure to follow ? Any help will be highly appreciated. Does bundle.config automatically does the minification of files?
You can create bundles per view, that include all the css or js for that view. You can bundle all the scripts, except the one that are pulled from cdn. The minification do not happen by default, you need to set BundleTable.EnableOptimizations = true;.
Try to obtain the third-party libraries already minified, and put it on the scripts folder using .min.js suffix. asp will use that files instead of minify the current sources.
example:
jquery.signalR-2.2.0.js // this on the bundle
jquery.signalR-2.2.0.min.js // on optimization mode asp will use this library
I have previously relied on .NET to optimize (concatenate, minify, version) css and js files in my MVC apps. I recently added grunt to my solution which I've wired in to build events to concatenate, minify, etc. these files and my app will use these grunt-generated files.
The remaining concern I just realized, however, is versioning. When .NET optimizes a file, they also implement versioning. It looks like I can just include the gulp-generated files in bundles to handle the versioning, but is there a different way?
Thanks in advance.
I'm handling it in my deployment script. When a deployment is triggered, the deployment script gets the commit sha (deploying via git) and injects it into a web.config setting.
Then inside my Layout file I will reference the css/js files with /css/app.min.css?version=AppSettings["version"]