Gruntfile to minify all HTML files of a folder? - html

I’m using https://github.com/jney/grunt-htmlcompressor to compress HTML files. But it’s requiring me to manually type-in all the HTML files which I want minified:
grunt.initConfig({
htmlcompressor: {
compile: {
files: {
'dest/index.html': 'src/index.html'
},
options: {
type: 'html',
preserveServerScript: true
}
}
}
});
Is there a way to specify that I want to minify all HTML files of the entire folder (and subfolders)?
Or, in case this html-compressor is limited, are you aware of a different npm package that does this HTML mification?


The glob pattern should be allowed for any grunt task by default. Then simply use dynamic files to build each one to your dest
Instead of:
files: {
'dest/index.html': 'src/index.html'
},
Go with:
files: [
{
expand: true, // Enable dynamic expansion.
cwd: 'src/', // Src matches are relative to this path.
src: ['**/*.html'], // Actual pattern(s) to match.
dest: 'dest/', // Destination path prefix.
},
],
As far as another plugin I would recommend grunts contrib version since it's more common and maintained by the grunt team.

Related

kagnax/html-minifier grunt plugin how to use multiple targets

I am trying to use html-minifier grunt plugin (https://github.com/gruntjs/grunt-contrib-htmlmin) and the documentation says we can use multiple targets; That is, we can specify different options for different build environment. In the below example 2 targets are configured 'dist' and 'dev'
grunt.initConfig({
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: {
'dist/index.html': 'src/index.html'
}
},
dev: {
files: {
'dist/index.html': 'src/index.html'
}
}
}
});
But my question is, while using grunt how can I instruct the plugin to use specific target? For example, for a production build I want to use "dist" target specified in plugin config. I can do grunt htmlmin but it triggers 'dev' target only.

grunt-contrib-cssmin: css source map appears empty in dev tools

I am using grunt with cssmin to minify and concatenate css files.
Css files are well concatenated and minified but when I try to watch the non minified files in chrome dev tools under 'Sources' tab, files appears empty.
Here is my cssmin task:
cssmin: {
options: {
report: 'gzip',
keepSpecialComments: 0,
sourceMap: true,
outputSourceFiles: true
},
target: {
files: {
'web/assets/dist/css/vendors.min.css': [
'bower_components/bootstrap/dist/css/bootstrap.min.css',
'bower_components/chosen/chosen.min.css',
'bower_components/slabText/css/slabtext.css',
'bower_components/video.js/dist/video-js.css',
'bower_components/video.js/dist/video-js.css'
],
'web/assets/dist/css/app.min.css': [
'app/Resources/assets/css/jumbotron-narrow.css',
'app/Resources/assets/css/custom.css',
],
}
}
},
Source map setting is enabled under chrome.
web/assets/dist/css/app.min.css.map looks like this:
{
"version":3,
"sources":["app/Resources/assets/css/jumbotron-narrow.css","app/Resources/assets/css/custom.css"],
"names":[],
"mappings":"AAeA,QAdA,KAeI,eAAgB,KADpB,QA6BA,WAEI,cAAe,IAAI,MAAM,QA7C7B,KACI,YAAa,KCUb,YAAa,eAAkB,WDHnC,QAFA,QACA,WAEI,cAAe,KACf,aAAc,KASlB,WACI,WAAY,EACZ,cAAe,EACf,YAAa,KAIjB,QACI,YAAa,KACb,MAAO,KACP,WAAY,IAAI,MAAM,QAI1B,yBACI,WACI,UAAW,OAGnB,qBACI,OAAQ,KAAK,EAIjB,WACI,WAAY,OAGhB,gBACI,QAAS,KAAK,KACd,UAAW,KAIf,WACI,OAAQ,KAAK,EAEjB,gBACI,WAAY,KAIhB,oCAII,QAFA,QACA,WAEI,cAAe,EACf,aAAc,EAGlB,QACI,cAAe,KAGnB,WACI,cAAe,GC3EvB,WACI,YAAa,eACb,IAAK,iCAAkC,mBAG3C,WACI,YAAa,YACb,IAAK,8BAA+B,mBAOxC,GACI,WAAY,KACZ,eAAgB,UAChB,YAAa,EACb,YAAa,YAAe,WAC5B,YAAa,EAAI,EAAI,IAAI,KAG7B,4BACI,QAAS,MACT,YAAa,KACb,aAAc,KACd,cAAe,IAGnB,UACI,UAAW,MACX,WAAY,KAIhB,oBACI,MAAO,IAGX,sBACI,gBAAiB,KACjB,YAAa,EAGjB,cACI,aAAc,QAIlB,iCACI,QAAS"
}
Version from my package.json:
"grunt-contrib-cssmin": "^0.12.0",
What am I doing wrong?

Edit: Firstly, try specifying a root in your options of the Gruntfile.js as follows:
// ...
cssmin: {
options: {
// ...
root: 'web/assets/dist/css/' // <-- Add this too.
},
target: {
// ...
}
/...
The Issue
The sourceMap file that grunt-contrib-cssmin is generating is incorrectly specifying the paths in the sources Array. The resultant sourceMap should be as follows:
app.min.css.map
{
"version":3,
"sources":[
"../../../../app/Resources/assets/css/jumbotron-narrow.css",
"../../../../app/Resources/assets/css/custom.css"
],
"names":[],
"mappings":"AAeA,QAdA,KAeI,eAAgB,KADpB,QA6BA,WAEI,cAAe,IAAI,MAAM,QA7C7B,KACI,YAAa,KCUb,YAAa,eAAkB,WDHnC,QAFA,QACA,WAEI,cAAe,KACf,aAAc,KASlB,WACI,WAAY,EACZ,cAAe,EACf,YAAa,KAIjB,QACI,YAAa,KACb,MAAO,KACP,WAAY,IAAI,MAAM,QAI1B,yBACI,WACI,UAAW,OAGnB,qBACI,OAAQ,KAAK,EAIjB,WACI,WAAY,OAGhB,gBACI,QAAS,KAAK,KACd,UAAW,KAIf,WACI,OAAQ,KAAK,EAEjB,gBACI,WAAY,KAIhB,oCAII,QAFA,QACA,WAEI,cAAe,EACf,aAAc,EAGlB,QACI,cAAe,KAGnB,WACI,cAAe,GC3EvB,WACI,YAAa,eACb,IAAK,iCAAkC,mBAG3C,WACI,YAAa,YACb,IAAK,8BAA+B,mBAOxC,GACI,WAAY,KACZ,eAAgB,UAChB,YAAa,EACb,YAAa,YAAe,WAC5B,YAAa,EAAI,EAAI,IAAI,KAG7B,4BACI,QAAS,MACT,YAAa,KACb,aAAc,KACd,cAAe,IAGnB,UACI,UAAW,MACX,WAAY,KAIhB,oBACI,MAAO,IAGX,sBACI,gBAAiB,KACjB,YAAa,EAGjB,cACI,aAAc,QAIlB,iCACI,QAAS"
}
Note the sourceRoot prefixes ../../../../ added to each path in the sources Array.
In the SourceMap Specification a section reads:
Resolving Sources
If the sources are not absolute URLs after prepending of the “sourceRoot”, the sources are resolved relative to the SourceMap (like resolving script src in a html document).
If specifying a root path, (as initially mentioned), does not resolve the issue then it indicates that this part of the specification is not being honoured by grunt-contrib-cssmin.
Alternate Solution
If the initial suggested fix does not work then consider adding a custom Task to invoke a Function which fixes each sources path after the sourceMap(s) have been created by grunt-contrib-cssmin.
You could do something like this:
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig( {
cssmin: {
options: {
report: 'gzip',
keepSpecialComments: 0,
sourceMap: true,
outputSourceFiles: true
},
target: {
files: {
'web/assets/dist/css/vendors.min.css': [
'bower_components/bootstrap/dist/css/bootstrap.min.css',
'bower_components/chosen/chosen.min.css',
'bower_components/slabText/css/slabtext.css',
'bower_components/video.js/dist/video-js.css'
],
'web/assets/dist/css/app.min.css': [
'app/Resources/assets/css/jumbotron-narrow.css',
'app/Resources/assets/css/custom.css'
]
}
}
}
});
/**
* Helper function prefixes sources paths in sourceMap files with a sourceRoot.
*
* `grunt-contrib-cssmin` does not apply the correct sourceRoot for each
* path in the `sources` Array. See github issue #248 for further info:
* (https://github.com/gruntjs/grunt-contrib-cssmin/issues/248)
*
* #param {String} filePath - The path to the sourceMap to fix.
* #param {String} sourceRootPrefix - The sourceRoot prefix e.g. ../../
*/
function prefixSourceMap(filePath, sourceRootPrefix) {
var json = grunt.file.readJSON(filePath);
json.sources = json.sources.map(function (_path) {
return sourceRootPrefix + _path;
});
grunt.file.write(filePath, JSON.stringify(json));
}
// Register Task to invoke function for fixing paths in each sourceMap file.
grunt.registerTask('fixSourceMaps', 'Fix paths in each sourceMap', function () {
prefixSourceMap('web/assets/dist/css/vendors.min.css.map', '../../../../');
prefixSourceMap('web/assets/dist/css/app.min.css.map', '../../../../');
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask("default", [
'cssmin',
'fixSourceMaps' // <-- Must be after cssmin tasks.
]);
};
Notes
The the custom grunt.registertask named fixSourceMaps invokes the prefixSourceMap function for each sourceMap file to fix.
Two arguments are passed to the prefixSourceMap function, namely:
filePath - The path to the sourceMap to fix.
sourceRootPrefix - The sourceRoot prefix e.g. ../../
For fixing both sourceMap files (vendors.min.css.map and app.min.css.map) the sourceRootPrefix argument is specified as ../../../../ - This is specified as four levels due to the relationship between the resultant .min.css file and it's location to the original unminified source .css file within your directory structure.
If you were to add another set of .css files to minify to your cssmin.target.files Task, in which the relationship between the resultant .min.css file and the unminified source .css file was not four levels, you will need to specify a different sourceRootPrefix value.
For example, lets say in cssmin.target.files the following css is to be minified:
// ...
target: {
files: {
//...
'web/assets/quux.min.css': [ // <-- Two levels deep
'path/to/file/foo.css',
'path/to/file/baz.css'
],
// ...
}
}
// ...
As the resultant quux.min.css is saved in the directory two levels deep then the sourceRootPrefix argument is passed to the prefixSoureMap functions as '../../'. For example:
//...
grunt.registerTask('fixSourceMaps', 'Fix paths in each sourceMap', function () {
prefixSourceMap('web/assets/quux.min.css.map', '../../');
//...
});
//...

as explained in comment above, there was 2 issues in my Gruntfile :
missing root directive as explained by #RobC
original assets were not accessible by the webserver, so I moved them in a location under the web root of my virtualhost. In my case web/assets. Here is my cssmin task that is now working:
cssmin: {
options: {
root: 'web/assets/dist/css/',
report: 'gzip',
keepSpecialComments: 0,
sourceMap: true,
outputSourceFiles: true
},
target: {
files: {
'web/assets/dist/css/app.min.css': [
'web/assets/css/jumbotron-narrow.css',
'web/assets/css/custom.css',
],
}
}
},

how to make webpack sourcemap to original files

I'm trying to debug an application written in Angular 2 build from webpack with VScode. I'm able to use the debugger for chrome extension in VSCode to attach my application. And it did hit the break point of the compiled js file. But it cannot find the sourcemap files.
It seems that webpack will have a webpack:// to host the files which the *.js file pointed to, like in the image:
And I can set the breakpoint inside the ts files inside webpack folder. However vscode is not able to find the ts files. So I change the configuration of webpack to
output: {
path:root('__build');
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
And then all files seemed to map to the absolute paths of the original ts files. And in chrome developer tool it looks like this:
But both chrome and vscode said the files inside this file:// is different from the original ts files. So I'm wondering whether there's a way that in webpack's configuration could make *.js file sourcemap to original ts files. And here's all my configurations:
typescript configuration:
{
"compilerOptions": {
"outDir": "dist",
"target": "ES5",
"module": "commonjs",
"sourceMap": true
}
}
webpack config:
{
entry: "./src/app/bootstrap",
output: {
path: root('__build__'),
filename: env({
'development': '[name].js',
'all': '[name].[hash].min.js'
}),
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
devtool:'source-map',
devServer: {
contentBase: "public/"
}
}
Another thing is that if in chrome developer tools, if I add the original files into the workspace and map the files from file:// to this folder, I can actually set breakpoints inside these files. So I'm wondering there's a way to map to local resources in vscode.

I changed this:
output: {
// ...snip...
devtoolModuleFilenameTemplate: function(info){
return "file:///"+info.absoluteResourcePath;
}
},
to this:
output: {
// ...snip...
devtoolModuleFilenameTemplate: function(info){
return "file:///"+encodeURI(info.absoluteResourcePath);
}
},
and now it encodes the spaces properly, and the sourcemap file works as expected.

Thanks to Rob Lourens, this problem is caused by spaces and other special characters in the file path that may break sourcemaps.

CSS cache update and CDNs

When I develop web applications, I'm used to add a ?ver=XXX at the end of my CSS URIs.
I'm updating a wordpress theme and I found a filter that removes any ?ver= from "static ressources" :
add_filter( 'script_loader_src', 'mb_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', 'mb_remove_script_version', 15, 1 );
Searching the web I found that without removing thoses ver=, CDN may not work and do not cache the CSS files ! That's a big surprise to me as I used it everywhere.
I use this version to force browsers to update their cache when I modify the CSS (by versionning up).
How do you force browser to understand the file must be downloaded again without using a ver= ?
--
Thank you
Nicolas.

You can use a tool such as Grunt (or gulp) to rev your assets:
https://www.npmjs.com/package/grunt-wp-assets
https://www.npmjs.com/package/gulp-rev

Thank to your answers, here is the full answer :
In my theme there is this file "theme-functions.php" in the ~theme/lib directory.
This is the file that loads the css file using the enqueue_style function :
wp_enqueue_style( '_mbbasetheme-style', get_template_directory_uri() . '/style.min.css' );
Using grunt as suggested, I was able to achieve the following steps :
Compass the SASS file and make a unique css file ==> style.css
Minify my unique css file to make it lighter ==> style.min.css
Version my css file to make a unique file name ==> style.4c72.min.css
These steps use the following grunt-plugins :
grunt-contrib-compass : with this grunt rule in Gruntfile.js
compass: {
dist: {
options: {
config: 'config.rb'
}
}
},
grunt-contrib-cssmin : with this grunt rule in Gruntfile.js
cssmin: {
options: {
keepSpecialComments: 1
},
minify: {
expand: true,
cwd: '',
src: ['*.css', '!*.min.css'],
dest: '',
ext: '.min.css'
}
},
grunt-wp-assets : with this grunt rule in Gruntfile.js
version: {
assets: {
options: {
algorithm: 'sha1',
length: 4,
format: false,
rename: false,
minify: true,
manifest: 'manifest.json'
},
files: {
'lib/theme-functions.php': ['style.min.css']
}
}
},
As you can see, the last one takes a file in argument to update the reference to the css file. After the grunt execution (actually a grunt-contrib-watch rule), the theme-functions.php is updated to :
wp_enqueue_style( '_mbbasetheme-style', get_template_directory_uri() . '/style.4c72.min.css' );

RequireJS Text Plugin installed with Bower

How should I be using requirejs-text which is installed via bower? I am supposed to put it in baseUrl but wonder if I could use it from components/requirejs-text/? Whats the best practice?

Define the path to the plugin in the config:
requirejs.config({
paths: {
"text" : "components/requirejs-text/text"
}
},
And use it in your module as documented on https://github.com/requirejs/text:
require(["some/module", "text!some/module.html", "text!some/module.css"],
function(module, html, css) {
//the html variable will be the text
//of the some/module.html file
//the css variable will be the text
//of the some/module.css file.
}
);
You can use also technically use the plugin without the path definition in the requirejs.config, but this is propbably not best practice:
require(["your_path_to_the_plugin_from_baseurl/without_js_at_the_end!some/textfile"],
function(yourTextfile) {
}
);

in PROJECT_APP/bower.js add this line under the dependencies section:
"requirejs": "~2.1.8",
"requirejs-text":"~2.0.10", // this is new
"qunit": "~1.12.0",
then run bower install, it should install this plugin and display at the end a path such as requirejs-text#2.0.10 vendor/bower/requirejs-text (depends on your configuration).
Finally, in the config.js file, add this line under
require.config({
paths: {
// Make vendor easier to access.
"vendor": "../vendor",
// Almond is used to lighten the output filesize.
"almond": "../vendor/bower/almond/almond",
// add the requirejs text plugin here
"text" : "../vendor/bower/requirejs-text/text",
// Opt for Lo-Dash Underscore compatibility build over Underscore.
"underscore": "../vendor/bower/lodash/dist/lodash.underscore",
// Map remaining vendor dependencies.
"jquery": "../vendor/bower/jquery/jquery",
"backbone": "../vendor/bower/backbone/backbone"
}
});
Then to use it, simply require it, in this case you can access it with the template variable
define([
// These are path alias that we configured in our bootstrap
'app', // general app variables
'jquery', // lib/jquery/jquery
'underscore', // lib/underscore/underscore
'backbone', // lib/backbone/backbone
'text!templates/books.html' // use the plugin to import a template
], function(app,$, _, Backbone, template){ // don't forget to define it !

This is how I have install requirejs-text using bower
In your project's bower.json file:
{
"name":"{{YOUR PROJECT NAME}}",
"version":"{{YOUR PROJECT VERSION}}",
"dependencies":{
"requirejs-text":"2.0.6"
}
}