Generate Sourcemap and clean up Gulpfile

Simon Egersand

2017-02-06 f75765a1fdf7ee3e91ee71053ef60c3de1126d46

Generate Sourcemap and clean up Gulpfile

 .babelrc

New file
@@ -0,0 +1,6 @@
{
  "presets": [
    [ "es2015", { "modules": false } ]
  ],
  "plugins": ["transform-remove-strict-mode"]
}

 example/webpack.config.js

@@ -10,8 +10,5 @@
    output: {
        path: path.resolve(__dirname, '.'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js']
    }
};

 gulpfile.js

@@ -1,59 +1,71 @@
var gulp = require('gulp'),
const babel = require('gulp-babel'),
    gulp = require('gulp'),
    insert = require('gulp-insert'),
    plumber = require('gulp-plumber'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps'),
    through = require('through2'),
    uglify = require('gulp-uglify'),
    webpack = require('gulp-webpack')
;
    webpack = require('webpack-stream')
    ;

var packageName = 'react-datetime';
var pack = require( './package.json' );
const pack = require( './package.json' );

var getWPConfig = function( filename ) {
gulp.task( 'sub', () => {
    // Reason behind having sub as separate task:
    // https://github.com/shama/webpack-stream/issues/114
    return gulp.src( './Datetime.js' )
        .pipe( webpack( getWebpackConfig() ) )
        .pipe( gulp.dest( 'tmp/' ) );
});

gulp.task( 'build', ['sub'], () => {
    return gulp.src( ['tmp/react-datetime.js'] )
        .pipe( sourcemaps.init( { loadMaps: true } ) )
            .pipe( through.obj( function( file, enc, cb ) {
                // Dont pipe through any source map files as
                // it will be handled by gulp-sourcemaps
                const isSourceMap = /\.map$/.test( file.path );
                if ( !isSourceMap ) this.push( file );
                cb();
            }))
            .pipe( plumber() )
            // .pipe( babel( { presets: [ 'es2015'] } ) )
            .pipe( insert.prepend( setHeader ) )
            .pipe( gulp.dest( 'dist/' ) ) // Save .js
            .pipe( uglify() )
            .pipe( insert.prepend( setHeader ) )
            .pipe( rename( { extname: '.min.js' } ) )
        .pipe( sourcemaps.write( '.' ) )
        .pipe( gulp.dest( 'dist/' ) ); // Save .min.js
    // TODO: Remove tmp folder
});

gulp.task( 'default', ['build'] );

/*
 * Utility functions
 */

const getWebpackConfig = () => {
    return {
        devtool: '#cheap-module-source-map',
        externals: {
            react: 'React',
            'react-dom': 'ReactDOM',
            moment: 'moment'
        },
        output: {
            libraryTarget: 'umd',
            library: 'Datetime',
            filename: filename + '.js'
            libraryTarget: 'umd',
            filename: 'react-datetime.js'
        }
    };
};

var cr = ( '/*\n%%name%% v%%version%%\n%%homepage%%\n%%license%%: https://github.com/arqex/' + packageName + '/raw/master/LICENSE\n*/\n' )
    .replace( '%%name%%', pack.name)
    .replace( '%%version%%', pack.version)
    .replace( '%%license%%', pack.license)
    .replace( '%%homepage%%', pack.homepage)
;

var handleError = function( err ) {
    console.error( 'Error:', err );
};

function wp( config, minify ) {
    var stream =  gulp.src( './Datetime.js' )
        .pipe( webpack( config ) )
const setHeader = ( '/*\n%%name%% v%%version%%\n%%homepage%%\n%%license%%: https://github.com/YouCanBookMe/react-datetime/raw/master/LICENSE\n*/\n' )
        .replace( '%%name%%', pack.name)
        .replace( '%%version%%', pack.version)
        .replace( '%%license%%', pack.license)
        .replace( '%%homepage%%', pack.homepage)
    ;

    if( minify ) {
        stream = stream.pipe( uglify() ).on( 'error', handleError );
    }

    return stream.pipe( insert.prepend( cr ) )
        .pipe( gulp.dest( 'dist/' ) )
    ;
}

gulp.task( 'build', function( callback ) {
    var config = getWPConfig( 'react-datetime' );
    config.devtool = '#eval';
    wp( config );

    config = getWPConfig( 'react-datetime.min' );
    return wp( config, true );
});

gulp.task( 'default', ['build'] );

 package.json

@@ -2,10 +2,10 @@
  "name": "react-datetime",
  "version": "2.8.4",
  "description": "A lightweight but complete datetime picker React.js component.",
  "homepage": "https://github.com/arqex/react-datetime",
  "homepage": "https://github.com/YouCanBookMe/react-datetime",
  "repository": {
    "type": "git",
    "url": "https://github.com/arqex/react-datetime"
    "url": "https://github.com/YouCanBookMe/react-datetime"
  },
  "main": "./DateTime.js",
  "files": [
@@ -44,11 +44,18 @@
  },
  "devDependencies": {
    "@types/react": "^0.14.49",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.1",
    "babel-plugin-transform-remove-strict-mode": "0.0.2",
    "babel-preset-es2015": "^6.22",
    "eslint": "^3.1.0",
    "gulp": "^3.9.0",
    "gulp-babel": "^6.1",
    "gulp-insert": "^0.4.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sourcemaps": "^2.4.0",
    "gulp-uglify": "^1.2.0",
    "gulp-webpack": "^1.5.0",
    "jsdom": "^7.0.2",
    "mocha": "^3.2.0",
    "moment": ">=2.16.0",
@@ -56,9 +63,11 @@
    "react": ">=0.13",
    "react-addons-test-utils": ">=0.13",
    "react-dom": ">=0.13",
    "through2": "^2.0.3",
    "typescript": "^2.0.10",
    "webpack": "^1.5.1",
    "webpack-dev-server": "^1.7.0"
    "webpack": "^2.2.1",
    "webpack-dev-server": "^1.7.0",
    "webpack-stream": "^3.2.0"
  },
  "dependencies": {
    "object-assign": "^3.0.0",