polymerelements / generator-polymer-init-custom-build Goto Github PK
View Code? Open in Web Editor NEWA Polymer CLI generator for creating custom build processes with polymer-build
A Polymer CLI generator for creating custom build processes with polymer-build
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'.
Running polymer init
shows custom build in the list as "custom-build: no description".
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:
let es6test = 'mytest';
in my-app.htmlThe 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
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.
Any plans in making the custom build in polymer 2.0 and es6 compliant?
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?
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
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. ๐
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.
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.
I think we should update to support multiple builds, as polymer.json
has.
@FredKSchott can you help here? ๐
Like #38, get config by parameter in the gulp-tasks/project.js.
Then we can really reuse the project.js
in another project.
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?
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
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
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.
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 inv6.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
Way to reproduce:
polymer server
in development mode.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).
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?
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.
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 ;))
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.
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
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
@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.
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 :/
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?
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.
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"
]
}
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
});
}
Somehow I run into an error when I try to add a gulp.swatch to the gulpfile.js.
Steps to reproduce:
gulp.task('watch',gulp.series('default',function() {
const watcher = gulp.watch('src/**/*.html');
watcher.on('all',gulp.series(['default']));
}));
gulp watch
src/my-app.html
file[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)
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
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.
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.
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
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!
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.
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
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
@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.
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).
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
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.
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!
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.