This is a grunt task. You need grunt to run this. This tool is inspired by grunt-usemin. Unfortunately usemin is not maintained any more for some time. So we have come up with a new tool to fit as a replacement. We have also included functionality from grunt-filerev.
Important to know is that makemin extracts all assets (styles, scripts, images...) from the given source files (HTML), usemin scans given directories for assets. So makemin only processes linked assets, unlinked assets are not processed.
This is what makemin will do for you:
- Read bundle definitions, and concat all sources.
- Copy all assets linked in the source files, to the destination directory.
- Minify Javascript, CSS and HTML
- Rev all assets and update links
For parsing the HTML files we use cheerio.js. cheerio.js is great tool which will allow us much better parsing than any regular expression matching. For CSS parsing we use cssurl, which also uses tokens over regular expression which is great!
We need some other grunt task in order to make thinks work, and yes we also need Grunt :)
- grunt-contrib-copy
- grunt-contrib-concat
- grunt-contrib-rename
- grunt-contrib-uglify
- grunt-contrib-cssmin
- grunt-contrib-htmlmin
The make-bundle task auto generates some other task targets, you have to call them in your registered tasks. The order of the task is important, so make sure it is correct.
The given sample will read all HTML files in wwwroot-src and will copy all processed files (styles, scripts, images...) to wwwroot-dest maintaining the original directory structure. We have also enabled log writing, so after the task is completed a file called make-bundle-sample.json will be written to project root.
// Configuration to be run (and then tested).
"make-bundle": {
sample: {
cwd: "wwwroot-src",
src: "{,*/}*.html",
dest: "wwwroot-dest",
options: {
assetRoot: "",
logWrite: true,
minCss: true,
minJs: true,
minHtml: true,
minHtmlOptions: {
removeComments: true,
collapseWhitespace: true
},
revAssets: true,
revAlgorithm: "md5",
revLength: 8
}
},
},
//...
// Task order
grunt.registerTask("default", [
"make-bundle:sample",
"concat:generated",
"copy:generated",
"make-rev:generated",
"uglify:generated",
"cssmin:generated",
"htmlmin:generated",
"rename:generated",
]);Unlike usemin you can not set a custom flow. This wont make sense in our case and will break some functions. This is the flow:
make-bundle: Reads all sources, extracts assets and bundles, configure task targets.concat:generated: Generates bundle files in destination path.copy:generated: Copies all other assets to destination.make-rev:generated: (optional) Updates assets link with reved ones.uglify:generated: (optional) Run javascript minification.cssmin:generated: (optional) Run CSS minification.htmlmin:generated: (optional) Run HTML minification.rename:generated: (optional) Rename assets when using file rev.
We use the same syntax as usemin, but we currently only process CSS and Javascript.
<!DOCTYPE html>
<head>
<!-- build:css /styles/c.css -->
<link rel="stylesheet" href="/styles/c1.css">
<link rel="stylesheet" href="/styles/c2.css">
<!-- endbuild -->
</head>
<body>
<!-- build:js ~/scripts/a.js -->
<script src="~/scripts/a1.js"></script>
<script src="/a2.js"></script>
<!-- endbuild -->
</body>
</html>Relative and absolute path are supported for all assets. Relative paths are resolved using the source file path. Tilde ~ is also supported, indicating a absolute path.
You can set some options, to enable some functionalities.
| Option | Type | Description |
|---|---|---|
| assetRoot | string | Optional relative path from source (cwd) to assets |
| minCss | boolean | Generate cssmin configuration |
| minJs | boolean | Generate uglify configuration |
| minHtml | boolean | Generate htmlmin configuration |
| minHtmlOptions | object | Please have look at html-minifier |
| revAssets | boolean | Enable asset rev |
| revAlgorithm | string | algorithm is dependent on the available algorithms supported by the version of OpenSSL on the platform. Examples are 'sha1', 'md5', 'sha256', 'sha512', etc. On recent releases, openssl list-message-digest-algorithms will display the available digest algorithms. |
| revLength | boolean | Number of characters of the file hash to prefix the file name with. |
| revFunc | function | Function to process the revised file name and return back the new file name. Type: (basename: string, name: string, extension: string) => string |
| logWrite | boolean | Write project data to disk. This used for debug and testing |
If you want to configure the cssmin or uglify task you can do so with a global option for this tasks in your Gruntfile:
"cssmin": {
options: {
// Put here global settings
},
target: {
...
}
},
"uglify": {
options: {
// Put here global settings
},
target: {
...
}
}You can find some samples on github in the sample directory.