Automatically switching to minified CSS & JS files in different environments - asp.net-mvc

I am using ASP.Net MVC 5 and also taking advantage of WebEssentials LESS and bundle features.
WebEssentials is setup to create minified css and js files on save. This is a feature I want because I can monitor the output and it lowers the application startup time (not using Asp.Net MVC bundles).
How can I automatically get my app to use the minified version of the files when it is deployed without having to manually change the file names?
So, for example, from:
<link href="somestyles.css" .. >
to:
<link href="somestyles-min.css" .. >
I did read that I could combine WebEssentials and Asp.Net MVC Bundles, providing I disabled the minification option in Asp.Net MVC Bundles. This would then substitute the MIN files in production (web.config [debug="false"]).
Is this my only option or is there a better way to achieve this?

This is definitely not the only way. Another way would be to completely disconnect all Microsoft-based tools (ie bundling, web essentials, etc) and use a Javascript Task Runner. Then the compiling of supersets and pre-processers, minification and whatever other front-end heavy lifting can be in one place. It can also be based on the environment.
So let's address some of your specific concerns.
Task running in the flavor of nodejs and gulp
Download nodejs
After downloading, open up a command prompt and navigate to your project source. For example:
cd "C:\Users\beloud\Documents\Visual Studio 2013\Projects\YourProject"
Initialize a node project by running npm init. This will ask you a bunch of questions about your project. After completion, it will create a file, package.json, which will track your node dependencies and project details.
Now we need to install a few packages. In the command prompt, enter the following commands:
npm install gulp -g
npm install gulp --save-dev
npm install gulp-less --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-if --save-dev
We install gulp globally, so we can use it anywhere (it will add a path for you). Then we install a handful of packages locally to our project that will be doing that actual work (minifying, processing, etc).
Create a file in the same directory as your package.json named gulpfile.js.
Now we need to create our actual tasks. In gulpfile.js, add the following:
//these are the modules that we'll be using in our task
var gulp = require('gulp'),
less = require('gulp-less'),
gulpif = require('gulp-if'),
minifycss = require('gulp-minify-css');
var isDebug = true; // I usually have a config.js file that has this and some handy static paths that I'll be referencing regularly. Then I just require it above.
gulp.task('default', function() {
return gulp.src('Content/less/**/*.less')
.pipe(less())
.pipe(gulpif(isDebug === false, minifycss())) //the first argument is the condition, the second is the method to call if the condition is true
.pipe(gulp.dest('Content/css'));
});
Run gulp in command prompt. That will run the default task. Basically, it will look for any less files in all directories under Content/less, compile them to css, minify them if isDebug is false and output it to Content/css.
Let's make it a little bit more awesome by adding a watch. Add the following to gulpfile.js:
gulp.task('watch', function() {
// Watch .less files
gulp.watch('Content/less/**/*.less', ['default']);
});
Upon running gulp, the task will stay alive until manually terminated. It will watch for changes made to any less file in Content/less and will re-run the task upon saved changes.
Now, you just need to include the name of the css file as it will remain the same, regardless of the environment.
This is a very basic example of using a task runner to achieve what you're trying to do. You can do a whole lot more with nodejs, gulp and everything else I've referenced. I would personally suggest this because, it is way more powerful than the one-off tools you're currently using and Visual Studio 2015 is already heavily relying on this new methodology so you'll most likely have to learn this anyways.
You can learn more by following this really amazing tutorial, Getting started with gulp, by Mark Goodyear.

Grunt (and gulp) support is added in the next Visual studio. This is the javascript developers tools for doing the same thing - bundling for production.
Grunt can create a build version that is not minified for testing but minified for production. I might take some more time and effort but it is the future instead of the MS try they did with bundling. You can already use grunt if you have Node.js installed and be ready for the future.
There is plenty of getting started resource out there. See also Introducing Gulp, Grunt, Bower, and npm support for Visual Studio

Is this my only option or is there a better way to achieve this?
It's not your only option, but since you are working in the realm of MVC it's one of the better options. Since it is designed to be leveraged at different levels, such as individual pages as well as layouts, it will take care of generating the appropriate link.
In general, I would recommend you use a server side bundling framework oriented to MVC so that it can handle the link generation and gives you an intuitive API.
SquishIt is an open-source framework that integrates well with MVC, and is also capable of being switched based on criteria such as a debug flag to generate the original source versus minified versions.
Both SquishIt and the new builtin MVC bundles are fairly similar in terms of what they are meant to accomplish.

Related

How do I set up a new ejabberd server?

I'm trying to figure out how to properly setup an ejabberd project that allows for easy compilation of custom beam files- so far, we've been using an existing project that is cumbersome to manage, and uses erlide as the IDE.
I would like to set up the project in a way that I can use a more helpful IDE like vscode, and somehow streamline the compiling and copying of the beam files and updating the module on the server.
Writing code in Elixir is fine as well- I just want the project to be set up in a way that is dev friendly.
Apologies if the question is too broad, but I'm not exactly sure how else to best phrase it. If you feel like I'm missing something in my current flow, please let me know, as I've basically inherited this project. If there are any clarifications required, let me know as well.
Thanks.
easy compilation of custom beam files
somehow streamline the compiling and copying of the beam files and updating the module on the server.
If the task is about compiling and loading additional modules, a running ejabberd node can compile, load and start additional modules in runtime, see
https://docs.ejabberd.im/developer/extending-ejabberd/modules/#ejabberd-contrib
Usually the modules come from
https://github.com/processone/ejabberd-contrib
but you can tell ejabberd to download other modules from other git repositories, or you can copy modules source code and tell ejabberd to install them. And those modules can be written in Erlang or Elixir. Full example: https://docs.ejabberd.im/developer/extending-ejabberd/elixir/#elixir-module-in-ejabberd-contrib
Basically:
you write the module in your development machine, test it...
when happy with the source code, copy mod_whatever.erl to the production machine, $HOME/.ejabberd-modules/sources/mod_whatever as explained in the example mentioned earlier
run ejabberdctl module_install mod_whatever
In step 2, instead of copying the source code yourself, you can have a git repository just for your module, tell ejabberd the module's git URL, similarly to https://github.com/processone/ejabberd-contrib/tree/master/extra
BTW, for step 3, starting in ejabberd 22.10, there's a page in ejabberd webadmin to install and uninstall those modules (copying the files requires manual administration of course).
I would like to set up the project in a way that I can use a more helpful IDE like vscode
What a coincidence, these days I'm playing with VSCode variants (VSCode, VSCodium, Coder's code-server and Github Codespaces) and how to develop ejabberd using them. This is useful for step 1 that I mentioned earlier (write module and test it). If you are interested in ejabberd + VSCode, tell me.

Is there a way to integrate Material-components-web in ASP.NET MVC

I'm trying to integrate material-components-web from Material.io. But it turned out to be quite a hassle. I'm also very new to the Node world, so i'm learning as i try a long.
This is what i did so far:
Coupled NPM to Visual Studio 2017, I can use a lot of functionalities, but it doesn't really work like i imagined. Npm init for example hangs, but install/update commands work fine.
Got a Packag.json with the following dependencies:
"devDependencies": {
"material-components-web": "0.44.1",
"gulp": "3.9.1",
"gulp-util": "3.0.8",
"gulp-minify-css": "1.2.4",
"gulp-path": "4.0.0",
"gulp-js-minify": "0.0.3",
"gulp-sass": "3.1.0",
"gulp-flatten": "0.4.0"
}
Installed Gulp and set up my Sass compiler and css/js minifier(for production). And set them up to run before i build my project
I have my #material folder with all the basic components in it. But now i'm running into the problem of the Javascript module dependencies.
I noticed that the standard 'require' methods where not working because it it a node specific resolver (Correct me if I'm wrong). First I tried to integrate Babel in gulp to transform the imports to ECMA. But that seemed unsuccessful.
Now i am converting all the import/exports by hand (so updating is a no go). It started out working great. But now i'm getting tangled up in dependencies hell, with references and imports all over the place... From dependencies like (focus-trap.js, tabbale and xtend)
Is this even possible to integrate in ASP.NET MVC? I also noticed that Material-components-web is starting to switch to TypeScript on their github!
Any tips or help are really appreciated.
I ended up doing the following to be able to use material-components-web for the front-end:
Downloaded Node.Js and added the NPM location as a 3rd party reference to Visual studio 2017.
Added the node_modules folder to my project and ran npm-install
Copied all the dependencies (Except 'Babel' the transpiler). And installed them with NPM
Created a WebPack config for compilation, extraction etc. etc.
It was actually pretty basic, but without any knowledge and information to use this type of NPM packages in an older MVC project was quite a big hassle to find out.
If somebody needs more informations or help, just comment below.

Mimicking build_runner serve on a nodeJs server

With the expiration of Dartium that happened just a few days ago, I felt compelled to migrate from dart 1.24.3 to Dart2, even though it is still in dev.
I have although hit a few walls doing so, one of them being related to the architecture of my apps.
I run a nodeJs server, which also acts as a webserver with client side dart.
The problem that I experience with the new dart SDK is that in order for the .dart files to be read in Chrome, they must be served using webdev serve or build_runner serve.
Obviously, these 2 commands act as the file server, which is not what I want since I'm using a nodeJS server.
By using build_runner watch I think I am enabling the build and watch of the .dart files into .dart.js inside of the following directory :
.dart_tool/build/generated//lib
I am also able to serve them from my nodeJS server. What remains is the package directory, I can't seem to find where pub serves gets the following package files:
/packages/$sdk/dev_compiler/amd/require.js
/packages/$sdk/dev_compiler/amd/dart_sdk.js
Does anyone know what build_runner serve does to include them?
Thank you,
There are 2 options for using a different server during development.
Run build_runner serve on a different port and proxy the requests to it from your other server. This has the benefit of delaying requests while a build is ongoing so you don't get an inconsistent set of assets.
Run build_runner watch --output web:build and use the created build/ directory to serve files from. This will include a build/packages directory that has these files in it.
These files are served from the lib directory of the dart sdk itself.
Note that there is another option, which is to use the -o option from build_runner. This will create a merged directory with source and generated files, which you can serve directly without relying on any internal file layout.

apache karaf clean start

I'm trying to clean start karaf on Windows using clean option.
It does delete data directory with bundles cache but it copy new bundles into data directory from system directory not local maven repository. But system directory has stale jars in comparison to local maven repository which cause karaf to start with stale bundles.
Is this a 'feature' of clean option? Am I missing something? How could I start Karaf with latest code from maven repo not dealing with file system?
You can't as the system directory is per default the one to use.
The clean does mean to clear up bundles in a awkward state and is only rarely used. Sometimes this happens if you start and stop the karaf container very close to each other then bundle might be in an incomplete state and since those bundle state is kept only a clean will help. Another way of cleaning is to delete the data folder.
So what you look like to be intending is to update certain bundles that are installed from the systems folder. For that you need to install the never version cause Karaf nows which versions are in the systems folder, those bundles are defined in the framework feature which is the basic feature to be used by Karaf itself.
If you have your own bundles in the system folder there is no way of updating those as those are regarded to be bootfeatures. In case you want to update those you'll need to make sure those features aren't boot features anymore and after that just do install the never versions of your bundles and uninstall the older ones. This can be done with the command shell.
One side note, it's usually best to ask those questions on the users mailinglist of Karaf, you get more people to answer your questions there.

Yeoman / AngularJS not loading CSS in development server

I'm using the AngularJS Yeoman generator (https://github.com/yeoman/generator-angular) and Express for the server. When running grunt server, it starts up my app fine and compiles .scss files into the .tmp folder in the root directory, but my pages don't automatically load that css. I have set up a link to the style/style.css stylesheet in my layout jade file.
I've also tried grunt compass, which works fine, but again, does not make it so my views actually load the css file in .tmp. I have the default compass setup in grunt.
This was an issue with live-reloading that has been addressed in newer releases. Update your generators through yo or by running npm update -g generator-angular. If you want to upgrade an existing project, you can run yo angular in the same directory and choose the diff option to see the changes you have to make.
As for May 22, 2015 ... the yeoman generator-angular does not work correctly unless you select Yes when asked if you'd like to include the Twitter Bootstrap. Perhaps subsequent releases will fix this.
On a good note, there are much less problems with the generator-angular than with generator-angular-ui-router (which is a disaster)

Resources