• HOME
  • NEWS
  • PORTFOLIO
  • LAB
  • ABOUT
  • CONTACT

Using parcel-plugin-custom-dist-structure with parcel

tags : parcel categories : programmation

by Trân on April 1, 2020


Notice: A non well formed numeric value encountered in /home/tigerbal/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/tigerbal/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/tigerbal/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/tigerbal/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/tigerbal/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/tigerbal/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/tigerbal/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/tigerbal/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /home/tigerbal/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /home/tigerbal/www/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

When building with Parcel, all the files are bundled and share the same root folder:

1
2
3
4
5
6
dist
  |- index.html
  |- index.5243.css
  |- index.5243.css.map
  |- index.5243.js
  |- index.5243.js.map

Fortunately, the plugin parcel-plugin-custom-dist-structure lets you generate the structure you want for you build. Once installed, you just have to configure the plugin settings in package.json. For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
"customDistStructure": {
    "config": {
      ".js": "assets/js",
      "assets/img": [
        ".jpg",
        ".png"
      ],
      ".css": "assets/css",
    },
    "options": {
      "development": true
    }
  }

Then your build will get this structure:

1
2
3
4
5
6
7
8
9
dist
  |- index.html
  |- assets
        |- css
          |- index.5243.css
        |- js
          |- index.5243.js
  |- index.5243.css.map
  |- index.5243.js.map

But wait… what about the map files ?
Well, you just need to add it this way:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"customDistStructure": {
    "config": {
      ".js": "assets/js",
      ".js.map": "assets/js",
      "assets/img": [
        ".jpg",
        ".png"
      ],
      ".css": "assets/css",
      ".css.map": "assets/css"
    },
    "options": {
      "development": true
    }
  }

And voilà !

1
2
3
4
5
6
7
8
9
dist
  |- index.html
  |- assets
        |- css
          |- index.5243.css
          |- index.5243.css.map
        |- js
          |- index.5243.js
          |- index.5243.js.map

FFP – Fédération Française du Paysage » « Woocommerce membership plugin : include custom field in admin search

3 thoughts on “Using parcel-plugin-custom-dist-structure with parcel”

  1. Vladimir Mikulic says:
    April 15, 2020 at 1:24 pm

    Hi Trân!
    I am the creator of the plugin. Thank you for showing it on your blog!
    The last example can be also written like this to improve readability :)

    “customDistStructure”: {
    “config”: {
    “assets/js”: [
    “.js”,
    “.js.map”,
    ],
    “assets/img”: [
    “.jpg”,
    “.png”
    ],
    “assets/css”: [
    “.css”,
    “.css.map”
    ]
    },
    “options”: {
    “development”: true
    }
    }

    Reply
    1. Vladimir Mikulic says:
      April 15, 2020 at 1:25 pm

      JSON can’t be formatted in the comment :(

      Reply
      1. Trân says:
        April 17, 2020 at 2:54 pm

        I know, sorry for that…
        Thanks for the great plugin !

        Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 
Tags / Mots clefs

parcel
 

© fruit du dragon - freelance creative coder

Categories

  • général
  • inspiration
  • lab
  • programmation
  • sites
  • work

Tags

android architecture archives canvas cellules-studio cornelius css culturel demonstrateur design eshop flash fremok html html/css/js hugo IFTTT incandescence Instagram institutionnel ios ipad jeux js krpano luxe media design mobile musée nomoon paper fold photographie requins-marteaux responsive sbam snippet tablette toute-attente tran nn transport typographie ui ultranoir woocommerce wordpress

Stats


Notice: Undefined variable: extra in /home/tigerbal/www/wp-content/plugins/pulsemaps/pm-widget.php on line 47

Archives

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org