Code Monkey home page Code Monkey logo

smidge's Introduction

Build status

Smidge Smidge

NuGet

A lightweight runtime CSS/JavaScript file minification, combination, compression & management library for ASP.Net (.NET Standard)

News

Features

  • Minification, combination, compression for JS/CSS files
  • Properly configured client side caching, persistent server side caching (no rebundling unnecessarily)
  • Fluent syntax for creating and configuring bundles
  • Debug/Production configurations for each bundle
  • Cache busting - and you can customize/replace how it works
  • JS source maps (via the Smidge.Nuglify package)
  • File watchers to auto invalidate/refresh a processed bundle
  • Extensible - you can completely customize the pre-processor pipeline and create your own processors and for any file type

Quick Start

  1. Install from Nuget:
    Install-Package Smidge
    
  2. Add Smidge config to appsettings.json:
    "smidge": {
        "dataFolder" : "App_Data/Smidge",
        "version" : "1"
      }  
  3. Add smidge to your services:
    services.AddSmidge(Configuration.GetSection("smidge"));
  4. Create a bundle in your configure method:
    app.UseSmidge(bundles =>
    {
       bundles.CreateJs("my-application", "~/js/site.js", "~/js/app");
    });
  5. Add the tag helpers to your _ViewImports.cshtml file:
    @addTagHelper *, Smidge
  6. Render your bundle:
    <script src="my-application" type="text/javascript"></script>

See Installation for full configuration details

Usage

Pre-defined bundles

Define your bundles during startup:

services.UseSmidge(bundles =>
{
   //Defining using file/folder paths:
   
   bundles.CreateJs("test-bundle-2", "~/Js/Bundle2", "~/Js/OtherFolder*js");
   
   //Or defining using JavaScriptFile's or CssFile's
   //this allows you to custom the pipeline per file
   
   bundles.Create("test-bundle-1", //bundle name
      new JavaScriptFile("~/Js/Bundle1/a1.js"),
      new JavaScriptFile("~/Js/Bundle1/a2.js"));
       
   //Then there's all sorts of options for configuring bundles with regards to customizing their pipelines,
   //customizing how rendering is done based on Debug or Production environments, if you want to 
   //enable file watchers, configure custom cache busters or the cache control options, etc...
   //There's even a fluent API to do this! Example: 
   
   bundles.CreateJs("test-bundle-3", "~/Js/Bundle3")
      .WithEnvironmentOptions(BundleEnvironmentOptions.Create()
         .ForDebug(builder => builder
            .EnableCompositeProcessing()
            .EnableFileWatcher()
            .SetCacheBusterType<AppDomainLifetimeCacheBuster>()
            .CacheControlOptions(enableEtag: false, cacheControlMaxAge: 0))
         .Build()
   );
});

If you don't want to create named bundles and just want to declare dependencies individually inside your Views, you can do that too! You can create bundles (named or unnamed) during runtime ... no problem.

See Declarations for full declaration/usage details

Rendering

The easiest way to render bundles is simply by the bundle name:

<script src="my-awesome-js-bundle" type="text/javascript"></script>
<link rel="stylesheet" href="my-cool-css-bundle"/>

This uses Smidge's custom tag helpers to check if the source is a bundle reference and will output the correct bundle URL. You can combine this with environment variables for debug/non-debug modes. Alternatively, you can also use Razor to do the rendering.

See Rendering for full rendering & debug mode details

Custom pre-processing pipeline

It's easy to customize how your files are processed including the way files are minified, how URLs are resolved, etc.... This can be done at a global/default level, at the bundle level or at an individual file level.

See Custom Pre-Processing Pipeline for information about customizing the pre-process pipeline

URLs

There's a couple of methods you can use to retrieve the URLs that Smidge will generate when rendering the <link> or <script> html tags. This might be handy in case you need to load in these assets manually (i.e. lazy load scripts, etc...):

Task<IEnumerable<string>> SmidgeHelper.GenerateJsUrlsAsync()
Task<IEnumerable<string>> SmidgeHelper.GenerateCssUrlsAsync()

See Asset URLs for information about retrieving the debug and non-debug asset urls for your bundles

Documentation

All of the documentation lives here

I haven't had time to document all of the features and extensibility points just yet but I'm working on it :)

Copyright & Licence

© 2018 by Shannon Deminick

This is free software and is licensed under the MIT License

Logo image Designed by Freepik

smidge's People

Contributors

shazwazza avatar dazinator avatar gunnim avatar jimbobsquarepants avatar slorion avatar

Watchers

James Cloos avatar Vincent Parrett avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.