WordPress.org

Make WordPress Core

Changeset 43760


Ignore:
Timestamp:
10/19/2018 06:05:13 AM (13 months ago)
Author:
pento
Message:

Build Tools: Copy package JavaScript and CSS into wp-includes.

  • grunt webpack:dev now copies packages JS into /src/wp-includes/js/dist, and CSS into /src/wp-includes/css/dist.
  • grunt webpack:prod does the same, but into /build instead of /src.
  • grunt build now runs the webpack:prod task.

Props atimmer, pento.
Fixes #45119.

Location:
branches/5.0
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • branches/5.0/.gitignore

    r43748 r43760  
    1919/jsdoc
    2020/vendor
     21/src/wp-includes/js/dist
     22/src/wp-includes/css/dist
    2123
    2224# Files and folders that get created in wp-content
  • branches/5.0/Gruntfile.js

    r43719 r43760  
    936936        'includes:embed',
    937937        'usebanner',
     938        'webpack:prod',
    938939        'jsvalidate:build'
    939940    ] );
  • branches/5.0/src/wp-includes/css

    • Property svn:ignore set to
      dist

  • branches/5.0/src/wp-includes/js

    • Property svn:ignore set to
      dist

  • branches/5.0/src/wp-includes/script-loader.php

    r43753 r43760  
    9797        }
    9898
    99         $path     = "/js/dist/vendor/$handle$dev_suffix.js";
     99        $path = "/wp-includes/js/dist/vendor/$handle$dev_suffix.js";
    100100
    101101        $scripts->add( $handle, $path, $dependencies, false, 1 );
     
    338338    foreach ( $packages_dependencies as $package => $dependencies ) {
    339339        $handle  = 'wp-' . $package;
    340         $path    = "/js/dist/$package$suffix.js";
     340        $path    = "/wp-includes/js/dist/$package$suffix.js";
    341341
    342342        $scripts->add( $handle, $path, $dependencies, false, 1 );
     
    16081608    $styles->add( 'wp-editor-font', $fonts_url );
    16091609
    1610     $styles->add( 'wp-block-library-theme', '/styles/dist/block-library/theme.css' );
     1610    $styles->add( 'wp-block-library-theme', '/wp-includes/css/dist/block-library/theme.css' );
    16111611    $styles->add_data( 'wp-block-library-theme', 'rtl', 'replace' );
    16121612
    16131613    $styles->add(
    16141614        'wp-edit-blocks',
    1615         '/styles/dist/block-library/editor.css',
     1615        '/wp-includes/css/dist/block-library/editor.css',
    16161616        array(
    16171617            'wp-components',
     
    16341634    foreach ( $package_styles as $package => $dependencies ) {
    16351635        $handle  = 'wp-' . $package;
    1636         $path     = '/styles/dist/' . $package . '/style.css';
     1636        $path     = '/wp-includes/css/dist/' . $package . '/style.css';
    16371637
    16381638        $styles->add( $handle, $path, $dependencies );
  • branches/5.0/tools/webpack/packages.js

    r43752 r43760  
    3838 * Maps vendors to copy commands for the CopyWebpackPlugin.
    3939 *
    40  * @param {Object} vendors Vendors to include in the vendor folder.
     40 * @param {Object} vendors     Vendors to include in the vendor folder.
     41 * @param {string} buildTarget The folder in which to build the packages.
    4142 *
    4243 * @return {Object[]} Copy object suitable for the CopyWebpackPlugin.
    4344 */
    44 function mapVendorCopies( vendors ) {
     45function mapVendorCopies( vendors, buildTarget ) {
    4546    return Object.keys( vendors ).map( ( filename ) => ( {
    4647        from: join( baseDir, `node_modules/${ vendors[ filename ] }` ),
    47         to: join( baseDir, `build/js/dist/vendor/${ filename }` ),
     48        to: join( baseDir, `${ buildTarget }/js/dist/vendor/${ filename }` ),
    4849    } ) );
    4950}
     
    5152module.exports = function( env = { environment: 'production', watch: false } ) {
    5253    const mode = env.environment;
    53     const suffix = mode === 'production' ? '.min': '';
     54    const suffix = mode === 'production' ? '.min' : '';
     55    const buildTarget = ( mode === 'production' ? 'build' : 'src' ) + '/wp-includes';
    5456
    5557    const packages = [
     
    144146    } );
    145147
    146     const developmentCopies = mapVendorCopies( vendors );
    147     const minifiedCopies = mapVendorCopies( minifiedVendors );
    148     const minifyCopies = mapVendorCopies( minifyVendors ).map( ( copyCommand ) => {
     148    const developmentCopies = mapVendorCopies( vendors, buildTarget );
     149    const minifiedCopies = mapVendorCopies( minifiedVendors, buildTarget );
     150    const minifyCopies = mapVendorCopies( minifyVendors, buildTarget ).map( ( copyCommand ) => {
    149151        return {
    150152            ...copyCommand,
     
    159161    let cssCopies = packages.map( ( packageName ) => ( {
    160162        from: join( baseDir, `node_modules/@wordpress/${ packageName }/build-style/*.css` ),
    161         to: join( baseDir, `build/styles/dist/${ packageName }/` ),
     163        to: join( baseDir, `${ buildTarget }/css/dist/${ packageName }/` ),
    162164        flatten: true,
    163165        transform: ( content ) => {
     
    191193        output: {
    192194            filename: `[basename]${ suffix }.js`,
    193             path: join( baseDir, 'build/js/dist' ),
     195            path: join( baseDir, `${ buildTarget }/js/dist` ),
    194196            library: {
    195197                root: [ 'wp', '[name]' ]
Note: See TracChangeset for help on using the changeset viewer.