Export step and blockReplacement for usemin usage, to perform a copy of several files in a single flat folder
If you haven't used grunt before, be sure to check out the Getting Started guide, as it explains how to create a gruntfile as well as install and use grunt plugins, especially grunt-usemin. Once you're familiar with that process, install this plugin with this command:
This plugin uses the step grunt-contrib-copy
for grunt-usemin and need it to be installed.
npm i grunt-usemin --save-dev
npm i grunt-contrib-copy --save-dev
npm i grunt-usemin-flatcopy --save-dev
It turns:
<!-- build:flatcopyType my/unique/path/to -->
<script src="first/path/to/file1.js"></script>
<script src="second/path/to/file2.js"></script>
<script src="one/more/path/to/my/file3.js"></script>
<script src="another/path/to/my/file4.js"></script>
<!-- endbuild -->
into
<script src="my/unique/path/to/file1.js"></script>
<script src="my/unique/path/to/file2.js"></script>
<script src="my/unique/path/to/file3.js"></script>
<script src="my/unique/path/to/file4.js"></script>
In Gruntfile.js:
grunt.loadNpmTasks('grunt-usemin');
grunt.loadNpmTasks('grunt-contrib-copy');
var flatcopy = require('./node_modules/grunt-usemin-flatcopy/grunt-usemin-flatcopy.js');
grunt.initConfig({
useminPrepare: {
html: 'path/to/index.html',
options: {
dest: 'destination/root/path/',
flow: {
html: {
steps: {
flatcopyType: [flatcopy.step]
// copy the files to the single flat folder:
// destination/root/path/my/unique/path/to
// (instead of 'flatcopyType', you can use any label you want.
// Make sure to report it into the tag :
// <!-- build:flatcopyType my/unique/path/to -->)
},
// do not remove `post` property, even if empty
post: []
}
}
}
},
usemin: {
html: 'path/to/index.html',
options: {
blockReplacements: {
flatcopyType: flatcopy.blockReplacement, // <-- replacements in index.html
}
}
}
});
It supports following syntaxes:
<!-- build:<type> <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
<!-- build:<type>(<alternative_source_path>) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
// <alternative_source_path> could be a simple path (containing ** or * )
// or even a group of them like '{<path1>,<path2>}'