Put the minified html in to javascript for grunt task

Question

I have to minify my html and add it in the minified js as an innerHtml. Currently, I am running the following grunt task and manually copying the minified html to the JS file. But , how can I get the minified html as an output and put that inside js, so that I can do all the task in single run.

module.exports = function(grunt) {

   grunt.initConfig({
       concat: {
           css: {
               src: ['src/css/style.css',...],
               dest: 'dest/css/main.css'
             },

           js: {
               src: ['src/js/angular.min.js',...],
               dest: 'dest/js/main.js'
             }
           },
       uglify: {
           js: {
               src: 'dest/js/main.js',
               dest: 'dest/js/main.min.js'
               }
           },
       cssmin: {
           css: {
               src: 'dest/css/main.css',
               dest: 'dest/css/main.min.css'
               }
           },
       minifyHtml: {
           options: {
            cdata: true
           },
           dist: {
            files: {
                'dest/html/index.html': 'src/html/index.html'
            }
        }
    }
       });

   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-minify-html');
   grunt.registerTask('build', ['concat', 'uglify', 'cssmin','minifyHtml']);
};

Answer 1

Have you tried grunt-contrib-copy? Here is what my task looks like:

copy: {
  main: {
    expand: true,
    cwd: 'src/img',
    src: '**',
    dest: 'dist/img',
    flatten: true,
    filter: 'isFile',
  }
}

npm install grunt-contrib-copy

Answer 2

I had to use the grunt-copy-part-of-file to manage this working.

'copy-part-of-file': {
      simple_replace_scripts: {
          options: {
              sourceFileStartPattern: '<!-- INDEX START -->',
              sourceFileEndPattern: '<!-- INDEX END -->',
              destinationFileStartPattern: "<!-- JS START -->'",
              destinationFileEndPattern: "'<!-- JS END -->"
          },
          files: {
              'dest/js/my.js': ['src/html/index.html']
          }
      }
  }