Tools: How to use autoprefixer, babel with this tool?

[SPAHI4]

es6 is really awesome and i cant imagine back to old js

[justinfagnani]

We're working on making the internal steps of the build pipeline available to import into a gulefile, where you can plug in any other compilers or processors that you want. I'll update this issue with the tracking issue for that work.

[mickeywu]

@justinfagnani Any updates for the build pipeline plugin feature? Thanks!

[FredKSchott]

@mickeywu yup! The build pipeline now exists in a standalone library: https://github.com/Polymer/polymer-build.

polymer-cli now uses a basic polymer-build pipeline for its build process. To modify/create your own build pipeline (one that runs babel on each JS file, for example) try using polymer-build yourself in a gulp task (or equivilent).

[davidsteinberger]

@FredKSchott really interested in this as well. are there any examples out there that show how that'd b e done with polymer-build?

[FredKSchott]

@davidsteinberger I'm going to be fleshing out on the repo's README early next week, but for now check out how both the CLI & polymer-starter-kit are being moved over to it.

[davidsteinberger]

Thanks! It's actually pretty clear for me how I'd do it in the starter-kit (b/c I can directly update the gulpfile), however I do not understand how the cli exposes the build-pipeline.

[FredKSchott]

Polymer CLI will remain focused on the CLI use case, so for now we have no plans to expose polymer-build or the build-pipeline directly from it.

Polymer CLI's "build" goals will be to serve beginning users and intermediate/advanced users who just need its basic pipeline. This will include some common customization and configuration options via command line flags and arguments (ex: include additional files, include service worker, etc).

For more advanced customization (ex: user defined file transformations, multiple builds, etc) we recommend using the polymer-build library to define your own, custom build pipeline in your own project. This is what polymer-starter-kit is doing.

I'll be working on that README this week to explain this, but would love any feedback you have now. Maybe a blog post digging into this a little deeper would help?

[davidsteinberger]

Have been ooo for a few days. I had a look onto the PSK2 branch. The hooks in polymer-build will make it easy to run babel and transpile ES6. However I'm still unclear how to use ES6 modules. Using browserify and bundling everything kinda defeats the advantage that lazy-loading w/ importHref provides. Any thoughts on how to bridge the gap between HTML imports and ES6 modules?

[dandv]

@FredKSchott:

I'm going to be fleshing out on the repo's README early next week, but for now check out how both the CLI & polymer-starter-kit are being moved over to it

Any updates? The README doesn't mention ES6/ES2015, and PSK doesn't use gulpfile.js any more.

[FredKSchott]

Check out https://github.com/PolymerElements/generator-polymer-init-custom-build for an example of a project built with polymer-build. It doesn't use babel, but you could imagine hooking babel into that pipeline (polymer-build is built on vinyl streams, which means it will work with most gulp plugins.

[mgibas]

I didn't like idea of switching to custom build, just for this so, I just added npm run autoprefixer to my build script.

_package.json:_

  "scripts": {
    "autoprefixer": "postcss ./src/**/*.html --replace --use autoprefixer -s postcss-html --no-map"
  }

and of course necessary packages:
npm install --save-dev postcss-cli postcss-html autoprefixer

[admwx7]

This is my "build process" (package.json):

"devDependencies": {
    "autoprefixer": "^7.2.5",
    "polymer-cli": "^1.5.7",
    "postcss-cli": "^4.1.1",
    "postcss-html": "^0.12.0"
},
"scripts": {
    "autoprefixer": "postcss \"build/**/*.html\" -r -u autoprefixer -s postcss-html --no-map",
    "build": "polymer build && npm run autoprefixer"
}