NBundle

Easy to use SASS Compiler, CSS Bundler, CSS Minifier and JS Bunder.

Implemented as a dotnet tool which can be run in the following modes:

• Single-shot mode: reads configuration file and performs the compile/bundle/minify operations.
• Watcher mode: performs a single shot operation then monitors the source folders for changes, automatically performing operations when files are modified. This is designed for live editing (e.g. modifying scss and js source files, where an asp.net web application references compiled and bundled versions.)

SASS Compiler converts to CSS and also runs an autoprefixer post-processor to automatically add vendor prefixes to CSS properties where needed. This ensures source files can use clean, minimal declarations. For example:

  user-select:none

compiles to:

  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none

Install Instructions

dotnet tool install -g NBundle

Usage Instructions

• nbundle (Single shot mode, expects nbundle.json in current directory)
• nbundle -c path/to/nbundle.json (Single shot mode, custom config file location)
• nbundle -w (Watcher mode, expects nbundle.json in current directory)
• nbundle -w -c path/to/nbundle.json (Watcher mode, custom config file location)

Example config file (default name: nbundle.json)

{
  "css": {
    "bundles": [
      {
        "destinationFilePath": "wwwroot/assets/css/bundle.css",
        "sourceFilePaths": [
          "Test/assets/scss/*.scss"
        ],
        "excludeSourceFilePaths": [
          "Test/assets/scss/do-not-include.scss"
        ],
        "minify": true,
        "commentPrefix": "AUTOGENERATED FILE - DO NOT EDIT",
        "addSourceFilePathComments": true
      }
    ]
  },
  "js": {
    "bundles": [
      {
        "destinationFilePath": "wwwroot/assets/js/bundle.js",
        "sourceFilePaths": [
          "Test/assets/js/*.js"
        ],
        "excludeSourceFilePaths": [
          "Test/assets/js/do-not-include.js"
        ],
        "minify": false,
        "commentPrefix": "AUTOGENERATED FILE - DO NOT EDIT",
        "addSourceFilePathComments": true
      }
    ]
  }
}

Warnings

• Use at your own risk - this was created quickly and is not as efficient as it could be. Pull requests welcome!
• CSS minification works, and will NOT add the comment prefix or source file paths to the output (regardless of the settings). If you want comments, set minify to false.
• JS minification doesnt work at present (flag doesnt do anything).