grunt-usemin-flatcopy

grunt-usemin-flatcopy

Export step and blockReplacement for usemin usage, to perform a copy of several files in a single flat folder

Getting Started

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

What does it do ?

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>}'