{"action":"created","issue":{"url":"https://api.github.com/repos/PolymerElements/polymer-starter-kit/issues/636","labels_url":"https://api.github.com/repos/PolymerElements/polymer-starter-kit/issues/636/labels{/name}","comments_url":"https://api.github.com/repos/PolymerElements/polymer-starter-kit/issues/636/comments","events_url":"https://api.github.com/repos/PolymerElements/polymer-starter-kit/issues/636/events","html_url":"https://github.com/PolymerElements/polymer-starter-kit/issues/636","id":124864403,"number":636,"title":"Script in dist/elements/elements.html is not transpiled to ES5 when using gulp serve:dist","user":{"login":"JustinXinLiu","id":1710184,"avatar_url":"https://avatars.githubusercontent.com/u/1710184?v=3","gravatar_id":"","url":"https://api.github.com/users/JustinXinLiu","html_url":"https://github.com/JustinXinLiu","followers_url":"https://api.github.com/users/JustinXinLiu/followers","following_url":"https://api.github.com/users/JustinXinLiu/following{/other_user}","gists_url":"https://api.github.com/users/JustinXinLiu/gists{/gist_id}","starred_url":"https://api.github.com/users/JustinXinLiu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/JustinXinLiu/subscriptions","organizations_url":"https://api.github.com/users/JustinXinLiu/orgs","repos_url":"https://api.github.com/users/JustinXinLiu/repos","events_url":"https://api.github.com/users/JustinXinLiu/events{/privacy}","received_events_url":"https://api.github.com/users/JustinXinLiu/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2016-01-04T23:42:54Z","updated_at":"2016-01-06T17:35:46Z","closed_at":null,"body":"When I do `gulp serve`, my test PSK project starts up correctly; however, doing a `gulp serve:dist` gives me the following error in the console.\r\n> Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode -- elements.html:16969\r\n\r\nWhen I inspected this *elements.html* file, I noticed that the my ES2015 script wasn't transpiled to ES5.\r\n\r\n```\r\n    ...\r\n    <input class=\"paper-font-body2\" value=\"{{greeting::input}}\">\r\n  </template>\r\n\r\n  <script>\r\n    class MyGreeting {\r\n      beforeRegister() {\r\n        this.is = 'my-greeting';\r\n        \r\n        this.properties = {\r\n          greeting: {\r\n            type: String,\r\n            value: 'Welcome!',\r\n            notify: true\r\n          }       \r\n        };\r\n      }\r\n    }\r\n    \r\n    Polymer(MyGreeting);\r\n  </script>\r\n```\r\n\r\nI tried going through the *gulpfile.js* but couldn't work out where exactly the issue was. Here is my updated *gulpfile.js* based on the guide [Add ES2015 support through Babel](https://github.com/PolymerElements/polymer-starter-kit/blob/master/docs/add-es2015-support-babel.md).\r\n\r\nAm I missing something obvious? :(\r\n\r\n```\r\n/*\r\nCopyright (c) 2015 The Polymer Project Authors. All rights reserved.\r\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\r\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\r\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\r\nCode distributed by Google as part of the polymer project is also\r\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\r\n*/\r\n\r\n'use strict';\r\n\r\n// Include Gulp & tools we'll use\r\nvar gulp = require('gulp');\r\nvar $ = require('gulp-load-plugins')();\r\nvar del = require('del');\r\nvar runSequence = require('run-sequence');\r\nvar browserSync = require('browser-sync');\r\nvar reload = browserSync.reload;\r\nvar merge = require('merge-stream');\r\nvar path = require('path');\r\nvar fs = require('fs');\r\nvar glob = require('glob-all');\r\nvar historyApiFallback = require('connect-history-api-fallback');\r\nvar packageJson = require('./package.json');\r\nvar crypto = require('crypto');\r\nvar ensureFiles = require('./tasks/ensure-files.js');\r\n\r\n// var ghPages = require('gulp-gh-pages');\r\n\r\nvar AUTOPREFIXER_BROWSERS = [\r\n  'ie >= 10',\r\n  'ie_mob >= 10',\r\n  'ff >= 30',\r\n  'chrome >= 34',\r\n  'safari >= 7',\r\n  'opera >= 23',\r\n  'ios >= 7',\r\n  'android >= 4.4',\r\n  'bb >= 10'\r\n];\r\n\r\nvar DIST = 'dist';\r\n\r\nvar dist = function(subpath) {\r\n  return !subpath ? DIST : path.join(DIST, subpath);\r\n};\r\n\r\nvar styleTask = function(stylesPath, srcs) {\r\n  return gulp.src(srcs.map(function(src) {\r\n      return path.join('app', stylesPath, src);\r\n    }))\r\n    .pipe($.changed(stylesPath, {extension: '.css'}))\r\n    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))\r\n    .pipe(gulp.dest('.tmp/' + stylesPath))\r\n    .pipe($.minifyCss())\r\n    .pipe(gulp.dest(dist(stylesPath)))\r\n    .pipe($.size({title: stylesPath}));\r\n};\r\n\r\nvar imageOptimizeTask = function(src, dest) {\r\n  return gulp.src(src)\r\n    .pipe($.imagemin({\r\n      progressive: true,\r\n      interlaced: true\r\n    }))\r\n    .pipe(gulp.dest(dest))\r\n    .pipe($.size({title: 'images'}));\r\n};\r\n\r\nvar optimizeHtmlTask = function(src, dest) {\r\n  var assets = $.useref.assets();\r\n\r\n  return gulp.src(src)\r\n    .pipe(assets)\r\n    // Concatenate and minify JavaScript\r\n    .pipe($.if('*.js', $.uglify({\r\n      preserveComments: 'some'\r\n    })))\r\n    // Concatenate and minify styles\r\n    // In case you are still using useref build blocks\r\n    .pipe($.if('*.css', $.minifyCss()))\r\n    .pipe(assets.restore())\r\n    .pipe($.useref())\r\n    // Minify any HTML\r\n    .pipe($.if('*.html', $.minifyHtml({\r\n      quotes: true,\r\n      empty: true,\r\n      spare: true\r\n    })))\r\n    // Output files\r\n    .pipe(gulp.dest(dest))\r\n    .pipe($.size({\r\n      title: 'html'\r\n    }));\r\n};\r\n\r\n// Compile and automatically prefix stylesheets\r\ngulp.task('styles', function() {\r\n  return styleTask('styles', ['**/*.css']);\r\n});\r\n\r\ngulp.task('elements', function() {\r\n  return styleTask('elements', ['**/*.css']);\r\n});\r\n\r\n// Ensure that we are not missing required files for the project\r\n// \"dot\" files are specifically tricky due to them being hidden on\r\n// some systems.\r\ngulp.task('ensureFiles', function(cb) {\r\n  var requiredFiles = ['.jscsrc', '.jshintrc', '.bowerrc'];\r\n\r\n  ensureFiles(requiredFiles.map(function(p) {\r\n    return path.join(__dirname, p);\r\n  }), cb);\r\n});\r\n\r\n// Lint JavaScript\r\ngulp.task('lint', ['ensureFiles'], function() {\r\n  return gulp.src([\r\n      'app/scripts/**/*.js',\r\n      'app/elements/**/*.js',\r\n      'app/elements/**/*.html',\r\n      'gulpfile.js'\r\n    ])\r\n    .pipe(reload({\r\n      stream: true,\r\n      once: true\r\n    }))\r\n\r\n  // JSCS has not yet a extract option\r\n  .pipe($.if('*.html', $.htmlExtract({strip: true})))\r\n  .pipe($.jshint())\r\n  .pipe($.jscs())\r\n  .pipe($.jscsStylish.combineWithHintResults())\r\n  .pipe($.jshint.reporter('jshint-stylish'))\r\n  .pipe($.if(!browserSync.active, $.jshint.reporter('fail')));\r\n});\r\n\r\n// Transpile all JS to ES5.\r\ngulp.task('js', function() {\r\n  return gulp.src(['app/**/*.{js,html}', '!app/bower_components/**/*'])\r\n   .pipe($.sourcemaps.init())\r\n   .pipe($.if('*.html', $.crisper({scriptInHead: false}))) // Extract JS from .html files\r\n   .pipe($.if('*.js', $.babel({\r\n     presets: ['es2015']\r\n   })))\r\n   .pipe($.sourcemaps.write('.'))\r\n   .pipe(gulp.dest('.tmp/'))\r\n   .pipe(gulp.dest(dist()));\r\n});\r\n\r\n// Optimize images\r\ngulp.task('images', function() {\r\n  return imageOptimizeTask('app/images/**/*', dist('images'));\r\n});\r\n\r\n// Copy all files at the root level (app)\r\ngulp.task('copy', function() {\r\n  var app = gulp.src([\r\n    'app/*',\r\n    '!app/test',\r\n    '!app/elements',\r\n    '!app/bower_components',\r\n    '!app/cache-config.json',\r\n    '!**/.DS_Store'\r\n  ], {\r\n    dot: true\r\n  }).pipe(gulp.dest(dist()));\r\n\r\n  // Copy over only the bower_components we need\r\n  // These are things which cannot be vulcanized\r\n  var bower = gulp.src([\r\n    'app/bower_components/{webcomponentsjs,platinum-sw,sw-toolbox,promise-polyfill}/**/*'\r\n  ]).pipe(gulp.dest(dist('bower_components')));\r\n\r\n  return merge(app, bower)\r\n    .pipe($.size({\r\n      title: 'copy'\r\n    }));\r\n});\r\n\r\n// Copy web fonts to dist\r\ngulp.task('fonts', function() {\r\n  return gulp.src(['app/fonts/**'])\r\n    .pipe(gulp.dest(dist('fonts')))\r\n    .pipe($.size({\r\n      title: 'fonts'\r\n    }));\r\n});\r\n\r\n// Scan your HTML for assets & optimize them\r\ngulp.task('html', function() {\r\n  return optimizeHtmlTask(\r\n    [dist('/**/*.html'), '!' + dist('/{elements,test,bower_components}/**/*.html')],\r\n    dist());\r\n});\r\n\r\n// Vulcanize granular configuration\r\ngulp.task('vulcanize', function() {\r\n  return gulp.src('app/elements/elements.html')\r\n    .pipe($.vulcanize({\r\n      stripComments: true,\r\n      inlineCss: true,\r\n      inlineScripts: true\r\n    }))\r\n    .pipe(gulp.dest(dist('elements')))\r\n    .pipe($.size({title: 'vulcanize'}));\r\n});\r\n\r\n// Generate config data for the <sw-precache-cache> element.\r\n// This include a list of files that should be precached, as well as a (hopefully unique) cache\r\n// id that ensure that multiple PSK projects don't share the same Cache Storage.\r\n// This task does not run by default, but if you are interested in using service worker caching\r\n// in your project, please enable it within the 'default' task.\r\n// See https://github.com/PolymerElements/polymer-starter-kit#enable-service-worker-support\r\n// for more context.\r\ngulp.task('cache-config', function(callback) {\r\n  var dir = dist();\r\n  var config = {\r\n    cacheId: packageJson.name || path.basename(__dirname),\r\n    disabled: false\r\n  };\r\n\r\n  glob([\r\n    'index.html',\r\n    './',\r\n    'bower_components/webcomponentsjs/webcomponents-lite.min.js',\r\n    '{elements,scripts,styles}/**/*.*'],\r\n    {cwd: dir}, function(error, files) {\r\n    if (error) {\r\n      callback(error);\r\n    } else {\r\n      config.precache = files;\r\n\r\n      var md5 = crypto.createHash('md5');\r\n      md5.update(JSON.stringify(config.precache));\r\n      config.precacheFingerprint = md5.digest('hex');\r\n\r\n      var configPath = path.join(dir, 'cache-config.json');\r\n      fs.writeFile(configPath, JSON.stringify(config), callback);\r\n    }\r\n  });\r\n});\r\n\r\n// Clean output directory\r\ngulp.task('clean', function() {\r\n  return del(['.tmp', dist()]);\r\n});\r\n\r\n// Watch files for changes & reload\r\ngulp.task('serve', ['lint', 'styles', 'elements', 'images', 'js'], function() {\r\n  browserSync({\r\n    port: 5000,\r\n    notify: false,\r\n    logPrefix: 'PSK',\r\n    snippetOptions: {\r\n      rule: {\r\n        match: '<span id=\"browser-sync-binding\"></span>',\r\n        fn: function(snippet) {\r\n          return snippet;\r\n        }\r\n      }\r\n    },\r\n    // Run as an https by uncommenting 'https: true'\r\n    // Note: this uses an unsigned certificate which on first access\r\n    //       will present a certificate warning in the browser.\r\n    // https: true,\r\n    server: {\r\n      baseDir: ['.tmp', 'app'],\r\n      middleware: [historyApiFallback()]\r\n    }\r\n  });\r\n\r\n  gulp.watch(['app/**/*.html'], ['js', reload]);\r\n  gulp.watch(['app/styles/**/*.css'], ['styles', reload]);\r\n  gulp.watch(['app/elements/**/*.css'], ['elements', reload]);\r\n  gulp.watch(['app/{scripts,elements}/**/{*.js,*.html}'], ['lint', 'js']);\r\n  gulp.watch(['app/images/**/*'], reload);\r\n});\r\n\r\n// Build and serve the output from the dist build\r\ngulp.task('serve:dist', ['default'], function() {\r\n  browserSync({\r\n    port: 5001,\r\n    notify: false,\r\n    logPrefix: 'PSK',\r\n    snippetOptions: {\r\n      rule: {\r\n        match: '<span id=\"browser-sync-binding\"></span>',\r\n        fn: function(snippet) {\r\n          return snippet;\r\n        }\r\n      }\r\n    },\r\n    // Run as an https by uncommenting 'https: true'\r\n    // Note: this uses an unsigned certificate which on first access\r\n    //       will present a certificate warning in the browser.\r\n    // https: true,\r\n    server: dist(),\r\n    middleware: [historyApiFallback()]\r\n  });\r\n});\r\n\r\n// Build production files, the default task\r\ngulp.task('default', ['clean'], function(cb) {\r\n  // Uncomment 'cache-config' if you are going to use service workers.\r\n  runSequence(\r\n    ['copy', 'styles'],\r\n    ['elements', 'js'],\r\n    ['lint', 'images', 'fonts', 'html'],\r\n    'vulcanize', // 'cache-config',\r\n    cb);\r\n});\r\n\r\n// Build then deploy to GitHub pages gh-pages branch\r\ngulp.task('build-deploy-gh-pages', function(cb) {\r\n  runSequence(\r\n    'default',\r\n    'deploy-gh-pages',\r\n    cb);\r\n});\r\n\r\n// Deploy to GitHub pages gh-pages branch\r\ngulp.task('deploy-gh-pages', function() {\r\n  return gulp.src(dist('**/*'))\r\n    // Check if running task from Travis CI, if so run using GH_TOKEN\r\n    // otherwise run using ghPages defaults.\r\n    .pipe($.if(process.env.TRAVIS === 'true', $.ghPages({\r\n      remoteUrl: 'https://$GH_TOKEN@github.com/polymerelements/polymer-starter-kit.git',\r\n      silent: true,\r\n      branch: 'gh-pages'\r\n    }), $.ghPages()));\r\n});\r\n\r\n// Load tasks for web-component-tester\r\n// Adds tasks for `gulp test:local` and `gulp test:remote`\r\nrequire('web-component-tester').gulp.init(gulp);\r\n\r\n// Load custom tasks from the `tasks` directory\r\ntry {\r\n  require('require-dir')('tasks');\r\n} catch (err) {}\r\n```"},"comment":{"url":"https://api.github.com/repos/PolymerElements/polymer-starter-kit/issues/comments/169398704","html_url":"https://github.com/PolymerElements/polymer-starter-kit/issues/636#issuecomment-169398704","issue_url":"https://api.github.com/repos/PolymerElements/polymer-starter-kit/issues/636","id":169398704,"user":{"login":"robdodson","id":1066253,"avatar_url":"https://avatars.githubusercontent.com/u/1066253?v=3","gravatar_id":"","url":"https://api.github.com/users/robdodson","html_url":"https://github.com/robdodson","followers_url":"https://api.github.com/users/robdodson/followers","following_url":"https://api.github.com/users/robdodson/following{/other_user}","gists_url":"https://api.github.com/users/robdodson/gists{/gist_id}","starred_url":"https://api.github.com/users/robdodson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robdodson/subscriptions","organizations_url":"https://api.github.com/users/robdodson/orgs","repos_url":"https://api.github.com/users/robdodson/repos","events_url":"https://api.github.com/users/robdodson/events{/privacy}","received_events_url":"https://api.github.com/users/robdodson/received_events","type":"User","site_admin":false},"created_at":"2016-01-06T17:35:46Z","updated_at":"2016-01-06T17:35:46Z","body":"Yeah I'll close it when we update the recipe"}}