如何使用grunt合并并最小化React代码

Question

I want to concat and minify two files:

App.js

import React from "react";
import ReactDOM from "react-dom";

import Layout from "./components/Layout"

const app = document.getElementById('app');
ReactDOM.render(<Layout/>,app);

and Layout.js

import React from "react";

export
default class Layout extends React.Component {
    getVal() {
      return "Gašper";
    }
    render() {
        return ( < h1 > Hello {
              this.getVal()
            } < /h1>
        );
    }
}

This is my Grunfile.js

/**
 * Created by gaspergracner on 14/06/16.
 */

module.exports = function(grunt) {

    var babel = require('rollup-plugin-babel');

    grunt.initConfig({
        /*Copy bower files to build/js/vendor */
        bowercopy: {
            options: {
                srcPrefix: 'bower_components'
            },
            dev: {
                options: {
                    destPrefix: 'source/js/vendor'
                },
                files: {
                    'jquery/jquery.js': 'jquery/dist/jquery.js',
                    'react/react.js': 'react/react.js'
                }
            },
            prod: {
                options: {
                    destPrefix: 'build/js/vendor'
                },
                files: {
                    'jquery/jquery.js': 'jquery/dist/jquery.js',
                    'react/react.js': 'react/react.js'
                }
            }
        },
        /*transform from ES6*/
        babel: {
            options: {
                sourceMap: true
            },
            dev: {
                files: {
                    'source/js/scripts.js': 'source/js/scripts.js'
                }
            },
            prod: {
                files: {
                    'build/js/scripts.min.js': 'build/js/scripts.min.js'
                }
            }
        },
        /*Prepare files for browser*/
        browserify: {
            dev: {
                src: ['source/js/scripts.js'],
                dest: 'source/js/scripts.js'
                // Note: The entire `browserify-shim` config is inside `package.json`.
            },
            prod: {
                src: ['build/js/scripts.min.js'],
                dest: 'build/js/scripts.min.js'
                // Note: The entire `browserify-shim` config is inside `package.json`.
            }
        },
        /*concat files*/
        concat: {
            js_dev: {
                src: ['app/scripts/**/**.js'],
                dest: 'source/js/scripts.js',
            },
            css_dev: {
                src: ['app/styles/**/**.css'],
                dest: 'source/css/main.css',
            },
            js_prod: {
                src: ['app/scripts/**/**.js'],
                dest: 'build/js/scripts.min.js',
            },
            css_prod: {
                src: ['app/styles/**/**.css'],
                dest: 'build/css/main.min.css',
            }

        },
        htmlmin: {
            prod: {
                options: {
                    removeComments: true,
                    collapseWhitespace: true
                },
                files: {
                    'build/index.html': 'app/index.html'
                }
            },
            dev: {
                files: {
                    'source/index.html': 'app/index.html',
                }
            }
        },
        uglify: {
            scripts: {
                files: {
                    'build/js/scripts.min.js': ['build/js/scripts.min.js']
                }
            }
        },
        cssmin: {
            target: {
                files: [{
                    expand: true,
                    cwd: 'build/css',
                    src: ['*.min.css'],
                    dest: 'build/css',
                    ext: '.min.css'
                }]
            }
        },
        clean: {
            dev: ["source/"],
            prod: ["build/"]
        },
        main: {
            options: {
                out: 'out/out.js'
            },
            files: {
                src: 'src/**/*.js'
            }
        }

    });

    grunt.loadNpmTasks('grunt-bowercopy');
    grunt.loadNpmTasks('grunt-browserify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-copy');

    grunt.loadNpmTasks('grunt-concat-deps');

    //minification
    grunt.loadNpmTasks('grunt-contrib-htmlmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    //cleaning
    grunt.loadNpmTasks('grunt-contrib-clean');


    var devel = [
        'clean:dev',
        'bowercopy:dev',
        'htmlmin:dev',
        'concat:css_dev',
        'concat:js_dev',
        'babel:dev',
        'browserify:dev'
    ];

    var prod = [
        'clean:prod',
        'bowercopy:prod',
        'htmlmin:prod',
        'concat:css_prod',
        'concat:js_prod',
        'babel:prod',
        'browserify:prod',
        'uglify',
        'cssmin'
    ]



    grunt.registerTask('default',devel );
    grunt.registerTask('prod',prod );

};

When the babel:dev is runed i got a error:

Warning: source/js/scripts.js: Duplicate declaration "React" Use --force to continue.

Are there some ways to concat files and leave arhitecture as it is?

Answer 1

I found the solution. The great example is: https://github.com/alexbeletsky/react-grunt-es6