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"]
Related
From the webpacker gem:
Webpacker makes it easy to use the JavaScript pre-processor and
bundler Webpack 2.x.x+ to manage application-like JavaScript in Rails.
It coexists with the asset pipeline, as the primary purpose for
Webpack is app-like JavaScript, not images, CSS, or even JavaScript
Sprinkles (that all continues to live in app/assets).
However, it is possible to use Webpacker for CSS, images and fonts
assets as well, in which case you may not even need the asset
pipeline. This is mostly relevant when exclusively using
component-based JavaScript frameworks.
Why is it more relevant for component-base frameworks to use Webpacker for assets? If I'm using React, what difference does it make to get assets from asset pipepline vs Webpack?
In terms of strictly holding assets - I don't think there's too much difference. However, I've recently migrated one of our apps from the asset pipeline to webpack - I will try share some learnings of why webpack is beneficial below.
Despite Rails being a fast moving and dynamic web framework, using the newest front-end tools with the default rails assets handler is difficult. Managing JS libraries with bundler is a pain. Webpack makes maintaining 3rd party libraries considerably easier.
Page loads using webpack were faster with webpack than the default asset pipeline considering it compiled files by default during each refresh.
Rails directory structure doesn't distinguish clearly enough between the front-end and back-end of the application. The dawn of single page applications has meant that identifying the client-side of an app as a separate entity and not some addon to the back-end is something we viewed as quite important. Front end components are not just addons. They are their own beings.
Separating assets from views is strange - views and assets create one being and should sit in one place, Rails views are treated more like a backpack on the controller.
Hot-reloading of our app front-end is great. This saves a lot of time in development.
However
we've found that it can be volatile with constant configuration changes and unfriendly as a result.
It doesn't run automatically on a request, like something like sprockets does. For example, if you are using webpacker, You need to have the webpacker dev server running that first looks for file changes, then compiles, and only then may reload your page.
The fact that webpack is primarily concerned with js and not jpegs, pngs, svgs etc. makes comparing the rails asset pipeline and webpack a little confusing...
Not sure if it did, but I hope this helps!
I am starting my own Angular web application. I have experience coding in c# and angular but I have never had to set up my own project/solution. In this case, I would like to set up an ASP.NET Web API that will communicate to an Angular SPA front end in JSON (although it should be agnostic to the front end, any application that speaks JSON should be able to communicate with it).
Additionally, I have heard good things about grunt and so I would like to incorporate it into the project (at the very least to compile LESS and minify and combine my angular files).
I am working with visual studio professional 2013. I began by creating a Web API project and downloading the WebEssentials plugin.
I am just a little confused on how to continue here. Should I split out my angular into a separate project in the same solution? How do I include grunt?
How do I use grunt in the context of visual studio to include my angular files in my index.html file?
The project comes with a Scripts folder and a Views folder. I know that it is preferable to structure the angular files by function so that the controllers and views are housed together. Should I be including my views in the scripts folder? How does that affect my build procedure?
I realize these may be very naive questions. Please bear with me, I am a complete beginner when it comes to these kinds of tasks. All I have done in the past is basically code.
Let's go step by step:
Visual Studio Solution with Web Api and Angular JS
You can store both Web Api and Angular code in same solution and project.
In this case you can arrange structure like this:
Content
Controllers
Models
Scripts (with app/ folder and vendor scripts like angular, jquery, etc.)
Views
index.html for angular application you can put into Scripts/app folder.
And all views for Angular you can put into Scripts/app/views folder.
Using Grunt/Gulp
Grunt/Gulp/Cake/Broccoli - those tools are simply an a javascript task runners, which allows you to to various things like combine your vendor scripts into one file, minify and combine your scripts into one file, transform your LESS to CSS, etc.
To use those task runners you can use Project Build Events. In project build events you can run Grant/Gulp tasks, which will do all the magic for you.
Also there is an extension for Visual Studio called Task Runner. This extension lets you execute any Grunt/Gulp task or target inside Visual Studio by adding a Task Runner Explorer window.
Example of using Gulp in Visual Studio Project by using Task Runner
To run your Gulp tasks by Task Runner automatically you need to add a line into start of your gulpfile.js
/// <vs AfterBuild='<here is a name of your Gulp task>' />
This line will force your task to run after each rebuild of your project.
Useful Info
To get additional info about Apps with AngularJS on ASP.NET you can check video by John Papa: "Building Rich Apps with AngularJS on ASP.NET"
Usefull Gulp modules:
gulp-useref - Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
gulp-less - Less for Gulp.
gulp-uglify - Minify files with UglifyJS.
I use RequireJS for managing dependencies between my JavaScript libraries and modules. The backend is written in Django. Django has many apps for managing static assets, but none of them talk about incorporating the r.js compiler.
What's the best way to manage and compile my JS files using r.js in Django?
My requirements are:
Versioned output file to get around caching when the file is updated.
Automatically use uncompiled JS file when DEBUG = True in settings.py for Django, and the compiled file when Debug = False.
Some of the libraries will be loaded from CDN (such jquery) with a local fallback.
Any suggestions will be much appreciated.
Seems as though django-require covers at least some of what you need, https://github.com/etianen/django-require .
I have been loading so many JS and CSS in my project.
To improve my site performance, I started with YUICompression integrated with Ant build.
So each time when I build the project it creates minified file with appending"-min.js"
Example: myscript.js after build, new file "myscript-min.js".
Now I have changing all the files to load myscript-min.js in my pages.
Is there any automation or simpler way to load the minify file.
Thanks in Advance!!!
In your code, try to determine the environment (production or development) from where you're loading the page. For instance, when developing on a local machine, you can check your IP address, a server environment variable (using Apache SetEnv), script path, etc. Using that data, either load the minified script (in production environment), or the separate scripts (in your development environment).
I am assuming that you're using a server side scripting language, like PHP. If you're serving static HTML files, it gets a bit more tricky (I'm thinking dynamic javascript loading or something).
If you (can) use PHP in your project then have a look at the minify project. It takes care of most of the chores. You are free to use uncompressed versions of your CSS and JS files, minify will compress them on-demand when these files are requested over HTTP.
If you're using PHP, just do the following:
Edit the apache config file on your production machine and add this line to httpd.conf (restart apache afterwards). On a shared hosting you should try .htaccess if you don't have access to httpd.conf.
SetEnv ENVIRONMENT production
This simply adds a variable to apache telling your that you're running in production mode. On your development machine, change the value "production" to "development" or whatever makes sense to you.
Then in your PHP file, you can switch between loading the full JS files and the minified one, like so:
if(isset($_SERVER['ENVIRONMENT']) && $_SERVER['ENVIRONMENT'] == "production")
{
... production minified JS here
}
else
{
... development unminified JS here
}
Single Page Javascript Application
I have built a sophisticated ajax-driven single page webapp that uses a RESTful backend web service serving JSON. The javascript is split into many different files, each file representing some sort of feature or component.
While the service has been in alpha testing, I've just be serving all these files separately without minification. But now that I'd like to launch a beta version, I really need to combine files, minify them, and version them. I want to add this to my build process, using Maven.
Javascript File Types
I'm using the following "types" of javascript files, of which #3 and #4 are my concerns:
External files, such a jquery and jquery-ui served from the Google CDN. Rarely change these versions, can be handled manually.
Jquery plugins that I'm hosting myself, such as fullcalendar or ui-layout. Again, I rarely update these to new versions and can handle it manually.
Application-wide javascript code. Custom javascript that is spread across many files and can change occasionally. All of these files need to be loaded for the app to work.
Feature-specific javascript code. Custom javascript that is loaded on demand when a specific feature is requested. This code can change quite frequently and is not loaded at startup.
Build Objectives
I'd like to do the following during my build process:
Concatenate all type 3 javascript files together, minify them, and save as a single file with a version number. For instance: app-2.0.6.min.js, where 2.0.6 is the maven project version.
All type 4 files should be individually minified and saved as separate files with version numbers in the name. For instance: feature-abc-56ab32de29.min.js, where 56ab32de29 is the version number of that specific file.
Update HTML files with <script> tags to point to javascript files with the correct version numbers.
Update Javscript files that load type 4 feature javascript files to point to the right versions.
Questions
Is there a maven plugin that will assist with the concatenation?
Is there a maven plugin that will assist with the minification? Ideally, I'd like to use Google Closure Compiler, but would work with others if simpler.
Is there a maven plugin that will assist with the versioning?
Is there a way to have the type 4 javascript files have independent version numbers? Ideally, if a file doesn't change between version 2.0.5 and 2.0.6, there is no need for users to download a new version and their cached version would work fine. I'm using GIT for source control, so would there be a way to use a file's GIT hashcode for versioning?
Is there a solution that will compress the javascript that is inline in regular HTML files without killing the HTML?
Is there a solution that will compress and version my CSS files as well?
Take a look at the yuicompressor-maven-plugin. It can aggregate various js (as well as css) files as well as minify and obfuscate them.
Here's a brand-new Maven plugin that targets this task: http://mojo.codehaus.org/webminifier-maven-plugin/
I've successfully incorporated RequireJS optimization (uses Google Closure compiler + does concatenation) in a Maven environment (for single page JS app). See my question and the follow up answer for details: RequireJS Compilation in Maven project with external JS dependencies
You could probably expand on that to version and archive the minified JS artifacts.