A Polymer CLI generator for creating custom build processes with polymer-build

JavaScript 100.00%

generator-polymer-init-custom-build's People

Stargazers

Watchers

generator-polymer-init-custom-build's Issues

Update to support multiple builds

I think we should update to support multiple builds, as polymer.json has.

@FredKSchott can you help here? 😄

writer after end error with gulp.watch

Somehow I run into an error when I try to add a gulp.swatch to the gulpfile.js.

Steps to reproduce:

scaffold project
add to the gulpfile.js:

gulp.task('watch',gulp.series('default',function() {
  const watcher = gulp.watch('src/**/*.html');
  watcher.on('all',gulp.series(['default']));
}));

run gulp watch
modify src/my-app.html file
gulp.watch crashes with this error log:

[10:44:36] Starting 'watch'...
[10:44:36] Starting 'default'...
[10:44:36] Starting 'clean'...
[10:44:36] Finished 'clean' after 12 ms
[10:44:36] Starting 'output'...
[10:44:39] gulp-imagemin: Minified 6 images (saved 9.54 kB - 24.1%)
[10:44:42] Finished 'output' after 6.59 s
[10:44:42] Starting 'serviceWorker'...
[10:44:42] Finished 'serviceWorker' after 139 ms
[10:44:42] Finished 'default' after 6.74 s
[10:44:42] Starting '<anonymous>'...
[10:44:51] Starting 'default'...
[10:44:51] Starting 'clean'...
[10:44:51] Finished 'clean' after 191 ms
[10:44:51] Starting 'output'...
[10:44:51] Finished 'output' after 16 ms
[10:44:51] Starting 'serviceWorker'...
[10:44:51] 'serviceWorker' errored after 36 ms
[10:44:51] Error: ENOENT: no such file or directory, open 'build/bundled/service-worker.js'
    at Error (native)
[10:44:51] 'default' errored after 248 ms
error:    Error: write after end
    at writeAfterEnd (_stream_writable.js:166:12)
    at StreamAnalyzer.Writable.write (_stream_writable.js:217:5)

Add a browsersync example

Add an example of how to properly hook up browser-sync to work with the custom build.

There's an S.O question about this already but the person that answered it loaded his gulpfile with no less than 20 dependencies which makes it bloated and unnecessarily complex to follow.

no bundled resources are created

Hello, I've installed the latest version of this generator (using polymer-build v0.8.1), but after building (npm run build) no bundled resources are created. The script completes successfully and I don't get any error messages.

I've attached a screenshot of the output in the build folder.

I expected to see a shared-bundle.html, or bundles for the defined fragments. I'm new to polymer, so maybe I'm missing something here.

In angular 8, when uplaod the build error occurs due to polyfills-es2015.

In angular 8, When I upload the build error occurs

Error :-

polyfills-es2015.db074f152f5fbfd29825.js:1 Uncaught TypeError: Cannot set property 'true' of undefined
at Object.6dTf (polyfills-es2015.db074f152f5fbfd29825.js:1)
at a (runtime-es2015.30fc626ba611e35f5ac3.js:1)
at Module.hN/g (polyfills-es2015.db074f152f5fbfd29825.js:1)
at a (runtime-es2015.30fc626ba611e35f5ac3.js:1)
at Object.1 (polyfills-es2015.db074f152f5fbfd29825.js:1)
at a (runtime-es2015.30fc626ba611e35f5ac3.js:1)
at t (runtime-es2015.30fc626ba611e35f5ac3.js:1)
at Array.r [as push] (runtime-es2015.30fc626ba611e35f5ac3.js:1)
at polyfills-es2015.db074f152f5fbfd29825.js:1
How to resolve this error.

Environment:-

Angular CLI: 8.0.1
Node: 10.15.3
OS: linux x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package Version

@angular-devkit/architect 0.800.1
@angular-devkit/build-angular 0.800.1
@angular-devkit/build-optimizer 0.800.1
@angular-devkit/build-webpack 0.800.1
@angular-devkit/core 8.0.1
@angular-devkit/schematics 8.0.1
@angular/cli 8.0.1
@angular/http 7.2.15
@ngtools/webpack 8.0.1
@schematics/angular 8.0.1
@schematics/update 0.800.1
rxjs 6.5.2
typescript 3.4.5
webpack 4.30.0
I am used ng build --prod --aot --build-optimizer command to build the app.

Polymer 2.0 Starter Kit error

Hi,

I'm getting the following error when doing gulp build on a Polymer-2-starter-kit project, In bower_components/polymer/lib/legacy/polymer-fn.html: [could-not-load] - Unable to load import: Cannot read property 'forEach' of undefined. Any idea what could be wrong? Thanks.

Generator description in `polymer init` reads "no description"

There probably should be a description.

I'm mainly filing this issue so I can find out how to do this for my own generator. 😃

pipe(project.analyzer) throws error TypeError: dest.on is not a function

I can't figure out why this section of my code is throwing a Type error. The project gulp file looks like

const path = require('path');
const gulp = require('gulp');
const polymer = require('polymer-build');
const mergeStream = require('merge-stream');
const PolymerProject = require('polymer-build').PolymerProject;
const srcHtmlSplitter = polymer.HtmlSplitter;
const polymerJSON = require(global.config.polymerJsonPath);
const project = new PolymerProject(polymerJSON);
const bundledPath = path.join(global.config.build.rootDirectory, global.config.build.bundledDirectory);
const unbundledPath = path.join(global.config.build.rootDirectory, global.config.build.unbundledDirectory);

const sourcesSplitter = new srcHtmlSplitter();
const depSplitter = new srcHtmlSplitter();
function splitSource() {
  return project.sources().pipe(sourcesSplitter.split());
}


function splitDependencies() {
  return project.dependencies().pipe(depSplitter.split());
}

function rejoin() {
  return sourcesSplitter.rejoin();
}


function merge(source, dependencies) {
    const mergedFiles = mergeStream(source(), dependencies())
      .pipe(project.analyzer.analyzer);
    const bundleType = global.config.build.bundleType;
    let outputs = [];

    if (bundleType === 'both' || bundleType === 'bundled') {
      console.log('both-bundled')
      outputs.push(writeBundledOutput(polymer.forkStream(mergedFiles)));
    }
    if (bundleType === 'both' || bundleType === 'unbundled') {
      console.log('unbundled')
      outputs.push(writeUnbundledOutput(polymer.forkStream(mergedFiles)));
    }

    return Promise.all(outputs);
}


function writeBundledOutput(stream) {
  return new Promise(resolve => {
    stream.pipe(project.bundler)
      .pipe(gulp.dest(bundledPath))
      .on('end', resolve);
  });
}


function writeUnbundledOutput(stream) {
  return new Promise(resolve => {
    stream.pipe(gulp.dest(unbundledPath))
      .on('end', resolve);
  });
}


function serviceWorker() {
  const bundleType = global.config.build.bundleType;
  let workers = [];

  if (bundleType === 'both' || bundleType === 'bundled') {
    workers.push(writeBundledServiceWorker());
  }
  if (bundleType === 'both' || bundleType === 'unbundled') {
    workers.push(writeUnbundledServiceWorker());
  }

  return Promise.all(workers);
}

function writeBundledServiceWorker() {
  return polymer.addServiceWorker({
    project: project,
    buildRoot: bundledPath,
    swConfig: global.config.swPrecacheConfig,
    serviceWorkerPath: global.config.serviceWorkerPath,
    bundled: true
  });
}

function writeUnbundledServiceWorker() {
  return polymer.addServiceWorker({
    project: project,
    buildRoot: unbundledPath,
    swConfig: global.config.swPrecacheConfig,
    serviceWorkerPath: global.config.serviceWorkerPath
  });
}

module.exports = {
  splitSource: splitSource,
  splitDependencies: splitDependencies,
  rejoin: rejoin,
  merge: merge,
  serviceWorker: serviceWorker
};

and when I try to run gulp file that uses this file, I get this

/node_modules/readable-stream/lib/_stream_readable.js:494
  dest.on('unpipe', onunpipe);
       ^
TypeError: dest.on is not a function
    at PassThrough.Readable.pipe (/Users/marko/Documents/projects/etools-infra/dashboard/node_modules/readable-stream/lib/_stream_readable.js:494:8)
    at Object.merge (/Users/marko/Documents/projects/etools-infra/dashboard/gulp-tasks/project.js:60:8)
    at Object.<anonymous> (/Users/marko/Documents/projects/etools-infra/dashboard/gulpfile.js:127:11)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)

Ive seen the merge used this way in various other gulp files in polymer libs without problem so I can't figure out why this is happening here.

Custom build for polymer 2.0 and es6

Any plans in making the custom build in polymer 2.0 and es6 compliant?

Missing watch and test from v2.0

One of the benefits of running the custom build script is also to run things like 'watch' and 'test' (and more) as independent parts. While developing, 'watch' is extremely useful as it can pick up JS bugs on the fly and spit them in the console (not the full browser test).

It would be nice if the new gulpfile could reintroduce test (or 'test-js') as : extract js from components and run the respective unit tests against it. And the 'watch' to be expanded to check for changes in different areas (css, html, js.. whatever makes sense) and in the 'javascript changed' (in elements or in js files) event, automatically run the test suite (.. the part that doesn't require firing up a browser ;))

Build with es6 support

Hi, I tried to integrate es6 support to your custom-build example, so I followed your README and tried to add es6 support.

What I did is:

adding the corresponding babel task in gulp-task and my gulpfile.js
adding the dev-dependencies in package.json
adding let es6test = 'mytest'; in my-app.html

The project now compiles and transpiles fine with gulp, however with polymer build it doesn't and gives me the following error :

warn: Unable to optimize .js file /Users/Username/workspace/polymer-custom-build-es6/src/my-app.html_script_0.js { err: { message: 'SyntaxError: Unexpected token: name (es6test)', filename: 0, line: 3, col: 8, pos: 10, stack: 'Error\n at new JS_Parse_Error (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1545:18)\n at js_error (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:1553:11)\n at croak (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2092:9)\n at token_error (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2100:9)\n at unexpected (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2106:9)\n at semicolon (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2126:56)\n at simple_statement (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2317:73)\n at eval (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2186:19)\n at eval (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2139:24)\n at eval (eval at <anonymous> (/usr/local/lib/node_modules/polymer-cli/node_modules/uglify-js/tools/node.js:28:1), <anonymous>:2907:23)' } }

If you want to reproduce the error, just check-out the test, it's the basic custom build, with the modification above + gulp-debug to show which files are transpiled

https://github.com/m4s0fd1s/polymer-custom-build-es6

and run bower install, npm install, polymer build or alternatively gulp

Better compilation debug output for mis-named source files

I'm building a very simple es6 test app using gulp-babel and I encountered a somewhat misleading or vague error during gulp-ification.
I have a javascript source file (lets call it util.js) next to the my-app.html and I include it like any other javascript file:

// in my-app.html
<link rel="import" href="../bower_components/polymer/polymer.html">
...
<script type="text/javascript" src="/src/utils.js"></script>

<dom-module id="my-app">
...

As you can see, I've mistakenly tried to bring in '/src/utils.js' instead of '/src/util.js'.
With verbose logging enabled in gulpfile.js, compilation outputs the following:

...
debug:   accept: src/my-app.html
debug:   accept: /src/utils.js
debug:   dependency is a source file, ignoring... 
{ dep: '/src/utils.js' }
debug:   accept: bower_components/polymer/polymer.html

... proceed to process the rest of the source/images ... then

[14:59:25] gulp-imagemin: Minified 6 images (saved 9.54 kB - 24.1%)
[14:59:25] The following tasks did not complete: default, output
[14:59:25] Did you forget to signal async completion?

If I name it correctly in the script tag, the compilation completes successfully.

Is there any way to obtain better compilation logging which would provide descriptive/meaningful output for a problem such as this?

Thanks so much! This project is most excellent!

PrecacheConfig includes build/bundled

There is a bug in the custom build script (gulp-tasks/project.js) if you are building on windows.
This is how the PrecacheConfig gets built.

var PrecacheConfig = [["build/bundled/index.html","e72684107df02cd146c2ece478b52e20"],
["build/bundled/src/my-app.html","708a8fdc577d21529d5b3edffa1f0e46"],
["build/bundled/src/my-view1.html","b5faca894bd7d36cd63a16d72736cf87"],
["build/bundled/src/my-view2.html","e592b7008d376dd87df1013fa9208aca"],
["build/bundled/src/my-view3.html","a149b68afc85efa2a8b17476c809f027"],
["build/bundled/src/my-view404.html","b9a28746f736435f74b42f65b65b4eac"]];

see https://github.com/Polymer/polymer-cli/issues/380

This is because the path includes backslashes

Here is the full code with the fix

// Returns a Promise to generate a service worker for bundled output
function writeBundledServiceWorker() {
  // On windows if we pass the path with back slashes the sw-precache node module is not going
  // to strip the build/bundled or build/unbundled because the path was passed in with backslash.
  return polymer.addServiceWorker({
    project: project,
    buildRoot: bundledPath.replace('\\', '/'),
    swConfig: global.config.swPrecacheConfig,
    serviceWorkerPath: global.config.serviceWorkerPath,
    bundled: true
  });
}

// Returns a Promise to generate a service worker for unbundled output
function writeUnbundledServiceWorker() {
  return polymer.addServiceWorker({
    project: project,
    buildRoot: unbundledPath.replace('\\', '/'),
    swConfig: global.config.swPrecacheConfig,
    serviceWorkerPath: global.config.serviceWorkerPath
  });
}

"npm run build" fails

While following the docs on a totally clean system (only npm installed, no global modules), I ran into some errors when running 'npm run build'.
First I got the error
: no such file or directory
which was caused by not having gulp-cli installed

Second, it reported a missing 'webcomponents-lite.min.js', because I hadn't run 'bower install'.

So npm install gulp-cli && bower install seem necessary with the current version. Can you update the readme to add the missing steps?

Thanks,

Bart

gulp build, stops without errors

Having copied the gulpfile.js from this project for my polymer app, and installed the necessary npm modules.

on running gulp build I get :
[22:32:00] Using gulpfile ~/development/wawm/gulpfile.js
[22:32:00] Starting 'build'...
Deleting build/gulp directory...
Analyzing build dependencies...

then it pauses for a while then the command prompt returns
The images and the bower components have been copied, but none of my scripts.

No errors are shown.Any hints on what I'm doing wrong.

[support] .gitignore in 1.0.0 (PSK2)?

New to Polymer here. I used polymer init custom-build and I did not get a resulting .gitignore file that excluded /bower and /node_modules. I do see that I am using 1.0.0 of custom-build which points to the 2.0 tag of the Polymer Starter Kit. That tag does have the correct .gitignore file.

Why do I not automatically get the .gitignore in PSK 2.0?

Polymer undefined

Using the latest instructions/readme, after successfully building using npm run build, and then attempting to serve using polymer serve build/ and browsing to http://localhost:8080, I am getting a 'Polymer is not a function' in Chrome dev console. Also noticed that polymer.html is not being loaded/imported in the Network Panel.

$ Gulp | TypeError: Cannot read property 'apply' of undefined ... (Windows 10)

TypeError: Cannot read property 'apply' of undefined ... (Windows 10)

Following the steps in @robdodson 's Polycast #52 video, I'm running into a TypeError issue when running the $ gulp command from inside a Windows 10 OS.

Any ideas?

Note: I upgraded Node to v7.0.0 after it failed running in v6.3.0 , but this didn't do the trick.

Details:

Oneeezy@Oneezy MINGW64 ~/Desktop/custom-build
$ git --version
git version 2.10.1.windows.1

$ node -v
v7.0.0

$ npm -v
3.10.8

$ bower -v
1.7.9

$ gulp -v
[04:50:58] CLI version 3.9.1
[04:50:58] Local version 4.0.0-alpha.2

$ polymer --version
0.16.0

Oneeezy@Oneezy MINGW64 ~/Desktop/custom-build
$ gulp
[04:32:00] Using gulpfile ~\Desktop\custom-build\gulpfile.js
C:\Users\Oneeezy\AppData\Roaming\nvm\v7.0.0\node_modules\gulp\bin\gulp.js:129
    gulpInst.start.apply(gulpInst, toRun);
                  ^

TypeError: Cannot read property 'apply' of undefined
    at C:\Users\Oneeezy\AppData\Roaming\nvm\v7.0.0\node_modules\gulp\bin\gulp.js:129:19
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:609:11)
    at run (bootstrap_node.js:382:7)
    at startup (bootstrap_node.js:137:9)
    at bootstrap_node.js:497:3

Better error message for wrong polymer.json definition

Took me a while to find the issue, when migrating an existing polymer app to the new build tool.

When there an non-existing polymer element is referenced in the polymer.json file, gulp will output following error message:

[23:28:02] The following tasks did not complete: default, output                                                                           
[23:28:02] Did you forget to signal async completion?

This is with logging turned on in the gulpfile.js.

[feature request] Add flag to enable/disable bundler

It would be nice to have a flag that disables the bundler because bundling might not be needed (e.g., using h2) or wanted (e.g., https://github.com/Polymer/polymer-build/issues/110).

CSS filtering in gulpfile doesn't work

The source splitting,

function splitSource() {
  return project.sources().pipe(project.splitHtml());
}

as I understand it, is supposed to create temporary .js and .css files from inline <script> and <style> tags in the source html.

Processing such as .pipe(gulpif('**/*.js', uglify())) works as expected,
but .pipe(gulpif('**/*.css', cleanCSS())) does not.

Trying to lint css this way also does not work. Any help would be appreciated!

gulp-html-minifier doesn't work with PSK v3 (i.e. Polymer v2)

gulp-html-minifier doesn't work with PSK v3 (i.e. Polymer v2), no error during build process, below are the error from the chrome console:-

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/bower_components/polymer/lib/elements/dom-module.html:129:18
    at http://127.0.0.1:8081/bower_components/polymer/lib/elements/dom-module.html:134:3
(anonymous) @ dom-module.html:129
(anonymous) @ dom-module.html:134
dom-bind.html:103 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/bower_components/polymer/lib/elements/dom-bind.html:103:20
    at http://127.0.0.1:8081/bower_components/polymer/lib/elements/dom-bind.html:105:5
(anonymous) @ dom-bind.html:103
(anonymous) @ dom-bind.html:105
dom-repeat.html:675 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/bower_components/polymer/lib/elements/dom-repeat.html:675:18
    at http://127.0.0.1:8081/bower_components/polymer/lib/elements/dom-repeat.html:679:3
(anonymous) @ dom-repeat.html:675
(anonymous) @ dom-repeat.html:679
dom-if.html:258 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/bower_components/polymer/lib/elements/dom-if.html:258:18
    at http://127.0.0.1:8081/bower_components/polymer/lib/elements/dom-if.html:262:3
(anonymous) @ dom-if.html:258
(anonymous) @ dom-if.html:262
array-selector.html:397 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/bower_components/polymer/lib/elements/array-selector.html:397:18
    at http://127.0.0.1:8081/bower_components/polymer/lib/elements/array-selector.html:400:3
(anonymous) @ array-selector.html:397
(anonymous) @ array-selector.html:400
custom-style.html:69 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at http://127.0.0.1:8081/bower_components/polymer/lib/elements/custom-style.html:69:25
    at http://127.0.0.1:8081/bower_components/polymer/lib/elements/custom-style.html:71:3
(anonymous) @ custom-style.html:69
(anonymous) @ custom-style.html:71
polymer-fn.html:39 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at Function.window.Polymer._polymerFn (http://127.0.0.1:8081/bower_components/polymer/lib/legacy/polymer-fn.html:39:22)
    at window.Polymer (http://127.0.0.1:8081/bower_components/polymer/lib/utils/boot.html:22:27)
    at http://127.0.0.1:8081/bower_components/iron-meta/iron-meta.html:110:5
    at http://127.0.0.1:8081/bower_components/iron-meta/iron-meta.html:197:5
window.Polymer._polymerFn @ polymer-fn.html:39
window.Polymer @ boot.html:22
(anonymous) @ iron-meta.html:110
(anonymous) @ iron-meta.html:197
polymer-fn.html:39 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at Function.window.Polymer._polymerFn (http://127.0.0.1:8081/bower_components/polymer/lib/legacy/polymer-fn.html:39:22)
    at window.Polymer (http://127.0.0.1:8081/bower_components/polymer/lib/utils/boot.html:22:27)
    at http://127.0.0.1:8081/bower_components/iron-icon/iron-icon.html:105:5
window.Polymer._polymerFn @ polymer-fn.html:39
window.Polymer @ boot.html:22
(anonymous) @ iron-icon.html:105

Get config by parameter in the gulp-tasks/project.js

Like #38, get config by parameter in the gulp-tasks/project.js.

Then we can really reuse the project.js in another project.

Generator breaks gulp ?

OSX 10.11.6,

Freshly installed polymer-cli and generator-polymer-init-custom-buid

But...

prometheus3:app3 rud$ nvm --version
0.32.1
prometheus3:app3 rud$ node --version
v6.9.1
prometheus3:app3 rud$ npm --version
3.10.8
prometheus3:app3 rud$ gulp --version
[12:33:33] CLI version 3.9.1
[12:33:33] Local version 4.0.0-alpha.2
prometheus3:app3 rud$
prometheus3:app3 rud$ ls
CONTRIBUTING.md     README.md       bower_components    gulpfile.js     index.html      node_modules        polymer.json        src         test
LICENSE.txt     bower.json      gulp-tasks      images          manifest.json       package.json        service-worker.js   sw-precache-config.js
prometheus3:app3 rud$
prometheus3:app3 rud$ gulp
[12:33:54] Using gulpfile ~/Desktop/Dev/lamp/app3/gulpfile.js
/Users/rud/.nvm/versions/node/v6.9.1/lib/node_modules/gulp/bin/gulp.js:129
    gulpInst.start.apply(gulpInst, toRun);
                  ^

TypeError: Cannot read property 'apply' of undefined
    at /Users/rud/.nvm/versions/node/v6.9.1/lib/node_modules/gulp/bin/gulp.js:129:19
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

Of course I use the same gulp and gulp-cli version on other projects fine, but it borks with this generator :/

Link to polymer-build readme examples when it lands

https://github.com/Polymer/polymer-build/pull/19/files#diff-04c6e90faac2675aa89e2176d2eec7d8R109

README for elements does not indicate that the polymer build command is not applicable

If you use the element template, the README implies that you should still use the polymer build command, but if you do, it fails with this error. According to the Polymer CLI docs (https://www.polymer-project.org/1.0/docs/tools/polymer-cli), the build command isn't applicable.

It also says 'Application' rather than 'Element'.

INSTALL ERROR ... npm ERR! enoent ENOENT: no such file or directory

Not sure if anyone else has this issue.. but I'm unable to
$ npm install -g generator-polymer-init-custom-build for some reason.

I'm using the Windows Subsystem for Linux (aka: Bash on Windows 10). This could be related to my problem..but I haven't had the issue with any other global installs thus far.

Here's the full output:

$ npm install -g generator-polymer-init-custom-build
npm ERR! path /home/Justin/.nvm/versions/node/v8.0.0/lib/node_modules/generator-polymer-init-custom-build/node_modules/inquirer
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/home/Justin/.nvm/versions/node/v8.0.0/lib/node_modules/generator-polymer-init-custom-build/node_modules/inquirer' -> '/home/Justin/.nvm/versions/node/v8.0.0/lib/node_modules/generator-polymer-init-custom-build/node_modules/.inquirer.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/Justin/.npm/_logs/2017-08-17T15_24_05_688Z-debug.log

please allow multiple versions

I have multiple projects, each at different polymer versions, so I want to have both polymer 2 and polymer 1 versions of this custom build in my polymer init menu.

Is it possible/plausible to name them differently so they can both be installed at the same time?

generator-polymer-init-custom-build' is not in the npm registry.

When i try to run the command npm install -g generator-polymer-init-custom-build it gives me the following error:

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/generator-polymer-init-custom-build
npm ERR! 404
npm ERR! 404 'generator-polymer-init-custom-build' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

importing paper-shadow will crash polymer build

From @timeu on August 29, 2016 22:43

By accident I imported the depcrecated paper-shadow in a fresh polymer custom-build app.
When I run gulp it will crash in the middle of the build with following error message (even when verbose logging in gulpfile.js is turned on):

[23:28:02] The following tasks did not complete: default, output                                                                           
[23:28:02] Did you forget to signal async completion?

To reproduce:

mkdir test
cd test
polymer init custom-build
bower install --save Polymer/paper-shadow
# add html import for paper-shadow into my-app.html
gulp

Copied from original issue: Polymer/polymer-build#30

The following tasks did not complete: default, output Did you forget to signal async completion?

When I run

gulp

I always get

...
debug:   dependency has already been pushed, ignoring...
{ dep: 'bower_components/paper-badge/paper-badge.html' }
[10:40:01] The following tasks did not complete: default, output
[10:40:01] Did you forget to signal async completion?

I tried to debug by adding in all the streams a ".on('error'..." but nothing is fired, the build simply stop without any reason

Node version: 5.8.0
Gulp version: cli 3.9.1, local 4.0.0-alpha2

I tried even with node 6.9.1, but it stop a lot earlier with

/usr/local/lib/node_modules/gulp/bin/gulp.js:129
    gulpInst.start.apply(gulpInst, toRun);
                  ^

TypeError: Cannot read property 'apply' of undefined
    at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:19
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

Adding sub directory to src/ makes gulp fail

I'm hoping this is an actual bug and not just a silly mistake.

It seems that when you move any component into a sub-directory in src. Eg:

src/my-app.html -> src/my-app/my-app.html (and update the imports accordingly)

Gulp fails with:
The following tasks did not complete: default, output

From my investigation it seems as though the stream 'end' event is never fired:
gulp-tasks/project.js - Line 79

Bundled Build Process Removes Dependencies

If I follow the instructions:

npm install -g polymer-cli
npm install -g generator-polymer-init-custom-build

polymer init custom-build
npm run build
polymer serve build/

The website won't build up:

because loading <link rel="import" href="../bower_components/polymer/polymer.html"> is never initiated, not by the service-worker nor by <my-app></my-app>. The build- and bundeling-process removes the dependencies from the code:

The other resources dependencies are also removed.
generator-polymer-init-custom-build is not working for polymer-serve and not with a usual express-server without server-push, because the bundeling is broken.

Add sample package imports for gulp-uglify, css-slam, and gulp-html-minifier

To eliminate confusion, please add the imports referenced by https://github.com/Polymer/polymer-build for gulp-uglify, css-slam, and gulp-html-minifier.
Also, please fix incorrect package reference in comments near the usage of htmlMinifier() to reference the correct package name.

[REQ] Add in cache busting files

Discussion was happening in polymer-build. This was the suggested solution. https://github.com/Polymer/polymer-build/issues/56#issuecomment-265967662

gulp-rev is very popular among angular apps

No updated tag since before `splitHtml` refactor

@abdonrd @FredKSchott The latest tag for this is 2.0.1, which as @johnlim noted in #74 doesn't contain any of the updated syntax as long ago as the splitHtml refactor from PolymerProject to polymer-build.

This should be tagged with the current commits, as well as probably updating the polymer-starter-kit submodule commit, as this is still pointing to a commit from January 9th.

Missing description in `polymer init`

Running polymer init shows custom build in the list as "custom-build: no description".

How to extend polymer serve?

Is there a possibility to extend polymer serve or is there a standard escape hatch (similar to the default gulp tasks that replaces polymer build) to spin up a development proxy to directly work with backend apis?

Vulcanize Crisper Babel not working

Hi, im trying to optimize my code using Vulcanize Crisper Babel (https://www.polymer-project.org/1.0/docs/tools/optimize-for-production). I add the following code to my gulpfile.js in order to make this and i have the following error:

The following tasks did not complete: default, output
Did you forget to signal async completion?

function source() { return project.splitSource() // Add your own build tasks here! .pipe(gulpif('src/*.*',crisper())) .pipe(gulpif('src/*.js',babel())) .pipe(gulpif('src/*.html', strip())) .pipe(gulpif('**/*.{png,gif,jpg,svg}', images.minify())) .pipe(gulpif('src/*.html', minifyInline())) .pipe(gulpif('src/*.html', htmlmin({collapseWhitespace: true}))) .pipe(project.rejoin()); // Call rejoin when you're finished }

Is there any way to implement this?

Polymer starter kit does not exist

Hi,

After installing both polymer-cli and generator as described I receive below error:

error: Uncaught exception: AssertionError: Trying to copy from a source that does not exist: C:\Users\user\AppData\Roaming\npm\node_modules\generator-polymer-init-custom-build\generators\app\polymer-starter-kit

The temporary fix is to git clone polymer-starter-kit to expected folder, but it shoudn't expect that.

README instructions don't work

08:36:33 ~$ mkdir my-app
08:36:38 ~$ cd my-app
08:36:38 ~/my-app$ polymer init polymer-starter-kit-custom-build
info:    Running template polymer-init-polymer-starter-kit-custom-build:app...
error:   Template polymer-init-polymer-starter-kit-custom-build:app not found
error:   cli runtime exception: Error: Template polymer-init-polymer-starter-kit-custom-build:app not found
error:   Error: Template polymer-init-polymer-starter-kit-custom-build:app not found
    at Object.<anonymous> (/home/davidmaxwaterman/.nvm/versions/node/v6.11.4/lib/node_modules/polymer-cli/lib/init/init.js:220:19)
    at next (native)
    at fulfilled (/home/davidmaxwaterman/.nvm/versions/node/v6.11.4/lib/node_modules/polymer-cli/lib/init/init.js:17:58)
    at process._tickCallback (internal/process/next_tick.js:109:7)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:383:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:496:3
08:36:42 ~/my-app$

According to the polymer-cli help, it should work if you use the --name parameter, but that also doesn't work:

08:37:54 ~/my-app$ polymer init --name polymer-starter-kit-custom-build
info:    Running template polymer-init-polymer-starter-kit-custom-build:app...
error:   Template polymer-init-polymer-starter-kit-custom-build:app not found
error:   cli runtime exception: Error: Template polymer-init-polymer-starter-kit-custom-build:app not found
error:   Error: Template polymer-init-polymer-starter-kit-custom-build:app not found
    at Object.<anonymous> (/home/davidmaxwaterman/.nvm/versions/node/v6.11.4/lib/node_modules/polymer-cli/lib/init/init.js:220:19)
    at next (native)
    at fulfilled (/home/davidmaxwaterman/.nvm/versions/node/v6.11.4/lib/node_modules/polymer-cli/lib/init/init.js:17:58)
    at process._tickCallback (internal/process/next_tick.js:109:7)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:383:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:496:3

It does seem to work if I just run polymer init and select it from the menu though.

08:38:05 ~/my-app$ polymer --version
1.5.7

Build is not working properly

Way to reproduce:

Create project as described in README.
Sample app works properly using polymer server in development mode.
Build using gulp build and run polymer server build and sample app is not working.

After some checking it looks it is something with imports in vulcanized html files (for example shell file has no dependencies inlined and also no imports).

Debugging with sourcemaps of inline scripts doesn't work

I modified the gulpfile.js to include babel transpilation and added sourcemaps support:

function source() {
  return project.splitSource()
    // Add your own build tasks here!
    .pipe($.if('**/*.js',$.sourcemaps.init({identityMap:true})))
    .pipe($.if('**/*.js',$.babel()))
    .pipe($.if('**/*.js',$.sourcemaps.write('.')))
    .pipe($.if('**/*.{png,gif,jpg,svg}', images.minify()))
    .pipe(project.rejoin()); // Call rejoin when you're finished
}

The sourcemaps are properly generated and it also works for normal javascript files but breakpoints in Chrome Dev Tools don't work for the inline scripts that are part of each custom element.

This is probably a chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=470899

I added the bug for the record and maybe somebody knows a workaround

gulp-build: HtmlMinifier+Uglify+Babel+browserSync

Hi!

I've downloaded and installed npm install -g polymer-cli / npm install -g generator-polymer-init-custom-build and created a new project: in my case, the build didn't work (Windows 7 + NodeJS v6.10.2)!

Moreover, I've noticed there were not gulp-babel and browser-sync integrations.

So I changed the package.json / gulpfile.js / polymer.json in order to fix the issues. Here are the new configurations that work for me.

// ------- package.json -------
{
  "name": "polymer-starter-kit-custom-build",
  "version": "0.0.0",
  "description": "A starting point for Polymer 1.0 custom build apps",
  "license": "BSD-3-Clause",
  "scripts": {
    "postinstall": "bower install && npm run build",

    "lint": "eslint . --ext js,html --ignore-path .gitignore",
    "test": "npm run lint && polymer test",

    "serve": "gulp dev",
    "build": "gulp build"
  },
  "devDependencies": {
    "babel-preset-es2015": "6.24.0",
    "bower": "1.8.0",
    "browser-sync": "2.18.8",
    "css-slam": "1.2.1",
    "del": "2.2.2",
    "eslint": "3.19.0",
    "eslint-config-google": "0.7.1",
    "eslint-plugin-html": "2.0.1",
    "gulp": "3.9.1",
    "gulp-babel": "6.1.2",
    "gulp-html-minifier": "0.1.8",
    "gulp-if": "2.0.2",
    "gulp-imagemin": "3.2.0",
    "gulp-uglify": "2.1.2",
    "merge-stream": "1.0.1",
    "polymer-build": "0.9.1",
    "run-sequence": "1.2.2"
  },
  "engines": {
    "node": ">=4.0"
  },
  "private": true
}

// ------- gulpfile.js -------

/**
 * @license
 * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */

'use strict';

const browserSync = require('browser-sync').create();
const cssSlam = require('css-slam').gulp;
const del = require('del');
const gulp = require('gulp');
const gulpBabel = require('gulp-babel');
const gulpHtmlMinifier = require('gulp-html-minifier');
const gulpIf = require('gulp-if');
const gulpImagemin = require('gulp-imagemin');
const gulpUglify = require('gulp-uglify');
const HtmlSplitter = require('polymer-build').HtmlSplitter;
const mergeStream = require('merge-stream');
const polymerBuild = require('polymer-build');
const PolymerProject = require('polymer-build').PolymerProject;
const runSequence = require('run-sequence');

const swPrecacheConfig = require('./sw-precache-config.js');
const polymerJson = require('./polymer.json');
const buildDirectory = 'build';

/**
 * Waits for the given ReadableStream
 */
function waitFor(stream) {
    return new Promise((resolve, reject) => {
        stream.on('end', resolve);
        stream.on('error', reject);
    });
}

function build() {
    return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
        // Create polymer project
        const polymerProject = new PolymerProject(polymerJson);
        // Okay, so first thing we do is clear the build directory
        console.log(`Deleting ${buildDirectory} directory...`);
        del([buildDirectory])
            .then(() => {
                // Create sources splitter
                const sourcesHtmlSplitter = new HtmlSplitter();
                // Okay, now let's get your source files
                let sourcesStream = polymerProject.sources()
                // Oh, well do you want to minify stuff? Go for it!
                // Here's how splitHtml & gulpif work
                    .pipe(sourcesHtmlSplitter.split())
                    .pipe(gulpIf(/\.js$/, gulpBabel({presets: ['es2015']})))
                    .pipe(gulpIf(/\.js$/, gulpUglify()))
                    .pipe(gulpIf(/\.css$/, cssSlam()))
                    .pipe(gulpIf(/\.html$/, gulpHtmlMinifier()))
                    .pipe(gulpIf(/\.(png|gif|jpg|svg)$/, gulpImagemin()))
                    .pipe(sourcesHtmlSplitter.rejoin());

                // Okay, now let's do the same to your dependencies
                // Create dependencies splitter
                const dependenciesHtmlSplitter = new HtmlSplitter();
                let dependenciesStream = polymerProject.dependencies()
                    .pipe(dependenciesHtmlSplitter.split())
                    .pipe(gulpIf(/\.js$/, gulpBabel({presets: ['es2015']})))
                    .pipe(gulpIf(/\.js$/, gulpUglify()))
                    .pipe(gulpIf(/\.css$/, cssSlam()))
                    .pipe(gulpIf(/\.html$/, gulpHtmlMinifier()))
                    .pipe(dependenciesHtmlSplitter.rejoin());

                // Okay, now let's merge them into a single build stream
                let buildStream = mergeStream(sourcesStream, dependenciesStream)
                    .once('data', () => {
                        console.log('Analyzing build dependencies...');
                    });

                // If you want bundling, pass the stream to polymerProject.bundler.
                // This will bundle dependencies into your fragments so you can lazy
                // load them.
                buildStream = buildStream.pipe(polymerProject.bundler());

                // Okay, time to pipe to the build directory
                buildStream = buildStream.pipe(gulp.dest(buildDirectory));

                // waitFor the buildStream to complete
                return waitFor(buildStream);
            })
            .then(() => {
                // Okay, now let's generate the Service Worker
                console.log('Generating the Service Worker...');
                return polymerBuild.addServiceWorker({
                    project: polymerProject,
                    buildRoot: buildDirectory,
                    bundled: true,
                    swPrecacheConfig: swPrecacheConfig
                });
            })
            .then(() => {
                // You did it!
                console.log('Build complete!');
                resolve();
            });
    });
}

gulp.task('build', function () {
    return build();
});

gulp.task('start-browsersynch', function () {
    return browserSync.init({
        server: {
            files: [`./${buildDirectory}/**`],
            baseDir: `./${buildDirectory}`
        }
    });
});

gulp.task('refresh', function () {
    return browserSync.reload();
});

gulp.task('watch', function () {
    gulp.watch(['./src/**/*.html']).on('change', function () {
        runSequence(
            'build',
            'refresh'
        );
    });
});

gulp.task('dev', function () {
    runSequence(
        'build',
        'start-browsersynch',
        'watch'
    );
});

// ------- polymer.js -------

{
  "entrypoint": "index.html",
  "shell": "src/my-app.html",
  "fragments": [
    "src/my-view1.html",
    "src/my-view2.html",
    "src/my-view3.html",
    "src/my-view404.html"
  ],
  "sources": [
    "src/**/*",
    "images/**/*",
    "bower.json"
  ],
  "extraDependencies": [
    "manifest.json",
    "bower_components/webcomponentsjs/webcomponents-lite.min.js"
  ]
}

files.zip

Gulp not passing tests and linting

When running gulp getting the follow results:

RocketMan:generator-polymer-init-custom-build chuckh$ gulp
[14:47:24] Using gulpfile ~/DevPolymerLocal/custom-build/generator-polymer-init-custom-build/gulpfile.js
[14:47:24] Starting 'static'...
[14:47:24] Starting 'pre-test'...
[14:47:25] Finished 'pre-test' after 1.3 s
[14:47:25] Starting 'test'...


  generator-polymer-init-custom-build:app
    1) creates files


  0 passing (214ms)
  1 failing

  1) generator-polymer-init-custom-build:app creates files:

      AssertionError: dummyfile.txt, no such file or directory
      + expected - actual

      -false
      +true

      at node_modules/yeoman-assert/index.js:46:12
      at Array.forEach (native)
      at Function.assert.file (node_modules/yeoman-assert/index.js:44:8)
      at Context.<anonymous> (test/app.js:24:12)



--------------------------|----------|----------|----------|----------|----------------|
File                      |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
--------------------------|----------|----------|----------|----------|----------------|
 app/                     |    27.78 |      100 |      100 |    27.78 |                |
  gulpfile.js             |        0 |      100 |      100 |        0 |... 72,77,85,93 |
  index.js                |      100 |      100 |      100 |      100 |                |
 app/polymer-starter-kit/ |        0 |      100 |      100 |        0 |                |
  service-worker.js       |        0 |      100 |      100 |        0 |             10 |
  sw-precache-config.js   |        0 |      100 |      100 |        0 |             10 |
--------------------------|----------|----------|----------|----------|----------------|
All files                 |    26.32 |      100 |      100 |    26.32 |                |
--------------------------|----------|----------|----------|----------|----------------|


=============================== Coverage summary ===============================
Statements   : 26.32% ( 10/38 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 2/2 )
Lines        : 26.32% ( 10/38 )
================================================================================
[14:47:26] 'test' errored after 816 ms
[14:47:26] Error in plugin 'gulp-mocha'
Message:
    1 test failed.
[14:47:27]
/Users/chuckh/DevPolymerLocal/custom-build/generator-polymer-init-custom-build/generators/app/gulpfile.js
  19:8   error  'logging' is defined but never used                     no-unused-vars
  38:32  error  Unexpected parentheses around single function argument  arrow-parens
  59:10  error  'bundledPhase' is defined but never used                no-unused-vars
  64:10  error  'unbundledPhase' is defined but never used              no-unused-vars
  73:37  error  Unexpected trailing comma                               comma-dangle
  77:10  error  'unbundledPostProcessing' is defined but never used     no-unused-vars
  81:44  error  Unexpected trailing comma                               comma-dangle
  85:10  error  'bundledPostProcessing' is defined but never used       no-unused-vars
  89:19  error  Unexpected trailing comma                               comma-dangle

/Users/chuckh/DevPolymerLocal/custom-build/generator-polymer-init-custom-build/generators/app/index.js
   3:7   error  'chalk' is defined but never used  no-unused-vars
   4:7   error  'yosay' is defined but never used  no-unused-vars
  17:54  error  Unexpected trailing comma          comma-dangle

✖ 12 problems (12 errors, 0 warnings)

[14:47:27] 'static' errored after 3.59 s
[14:47:27] ESLintError in plugin 'gulp-eslint'
Message:
    Failed with 12 errors

polymerelements / generator-polymer-init-custom-build Goto Github PK

generator-polymer-init-custom-build's People

Stargazers

Watchers

Forkers

generator-polymer-init-custom-build's Issues

Package Version

TypeError: Cannot read property 'apply' of undefined ... (Windows 10)

Recommend Projects

Recommend Topics

Recommend Org