'gulp serve' Works, 'gulp' Crashes!

[manavm1990]

Output from 'gulp' ('gulp serve' is usually ok): app/scripts/main.js 76:7 error Parsing error: Unexpected token )

✖ 1 problem (1 error, 0 warnings)

[06:53:12] 'lint' errored after 641 ms [06:53:12] ESLintError in plugin 'gulp-eslint' Message: Failed with 1 error [06:53:12] 'default' errored after 1.57 s [06:53:12] ESLintError in plugin 'run-sequence(lint)' Message: Failed with 1 error

The 'culprit' code (just using ES6 notation to invoke jQuery 'document ready): // Your custom JavaScript goes here $(() => {

Full code in main.js is: `/!

• Web Starter Kit
• Copyright 2015 Google Inc. All rights reserved.
• Licensed under the Apache License, Version 2.0 (the "License");
• you may not use this file except in compliance with the License.
• You may obtain a copy of the License at
• https://www.apache.org/licenses/LICENSE-2.0
• Unless required by applicable law or agreed to in writing, software
• distributed under the License is distributed on an "AS IS" BASIS,
• WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
• See the License for the specific language governing permissions and
• limitations under the License

• / / eslint-env browser, jquery */ (function() { 'use strict';

  // Check to make sure service workers are supported in the current browser, // and that the current page is accessed from a secure origin. Using a // service worker from an insecure origin will trigger JS console errors. See // http://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features var isLocalhost = Boolean(window.location.hostname === 'localhost' || // [::1] is the IPv6 localhost address. window.location.hostname === '[::1]' || // 127.0.0.1/8 is considered localhost for IPv4. window.location.hostname.match( /^127(?:.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/) );

  if ('serviceWorker' in navigator && (window.location.protocol === 'https:' || isLocalhost)) { navigator.serviceWorker.register('service-worker.js'). then(function(registration) { // updatefound is fired if service-worker.js changes. registration.onupdatefound = function() { // updatefound is also fired the very first time the SW is installed, // and there's no need to prompt for a reload at that point. // So check here to see if the page is already controlled, // i.e. whether there's an existing service worker. if (navigator.serviceWorker.controller) { // The updatefound event implies that registration.installing is set: // https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event var installingWorker = registration.installing;

      installingWorker.onstatechange = function() {
        switch (installingWorker.state) {
          case 'installed':
            // At this point, the old content will have been purged and the
            // fresh content will have been added to the cache.
            // It's the perfect time to display a "New content is
            // available; please refresh." message in the page's interface.
            break;
  
          case 'redundant':
            throw new Error('The installing ' +
              'service worker became redundant.');
  
          default:
          // Ignore
        }
      };
    }
  };

  }). catch(function(e) { console.error('Error during service worker registration:', e); }); }

  // Your custom JavaScript goes here $(() => { / $() returns a new jQuery object instance. This will ENCAPSULATE DOM objects. /

  $('#btn-menu, .fade-screen, #btn-menu-close').on('click touchstart', function(e) { $('.nav--traditional, .fade-screen').toggleClass('is_visible'); e.preventDefault(); });

  $('.slider-containerbutton--collapse').on('click touchstart', function(e) { 'use strict'; $('.slider-containertext').toggleClass('is_hidden'); e.preventDefault(); });

  $(window).scroll(() => { let $classNameArray; let $winHeight = $(window).height(); // Gives us top coordinate of window.

  for (let el of $('[data-animate]')) { let elY = el.getBoundingClientRect().top; // Get the vertical position of 'element.'

  $classNameArray = $(el).data('animate').split(' ');
  // Pull class names out of data attribute.
  
  for (let className of $classNameArray) {
    if (elY <= $winHeight && !$(el).hasClass(className)) {
      $(el).addClass(className);
    }
  }

  }; }); }); })(); `

[manavm1990]

BTW, here is .babelrc (feel like this is somehow related):

{ "presets": ["es2015"], "retainLines": true }

[manavm1990]

I'm pretty sure it's throwing that error on 'lint.' Is it not liking ES6 code for some reason???

[07:26:55] Requiring external module babel-register [07:26:56] Using gulpfile ~/Sites/moco-ema/gulpfile.babel.js [07:26:56] Starting 'lint'... [07:26:56] app/scripts/main.js 76:7 error Parsing error: Unexpected token )

✖ 1 problem (1 error, 0 warnings)

[07:26:56] 'lint' errored after 331 ms [07:26:56] ESLintError in plugin 'gulp-eslint' Message: Failed with 1 error

[Garbee]

Can you please clarify the problem? WSK does not ship with jQuery so The 'culprit' code (just using ES6 notation to invoke jQuery 'document ready): doesn't make any sense to me.

It looks as if you have modified the code provided by the repository which would be the cause of the problem. And custom code modifications aren't something we can support, you'd be better off asking for general support on StackOverflow.

[manavm1990]

I might try StackOverflow next - or maybe just need to stop using jQuery, I guess! It's a bit of crutch for me!

Now, the only changes I made from the repo are: / eslint-env browser, jquery */

Everything else, is added underneath comment that says 'your custom code goes here' (or whatever)...

See, the code works without 'linting,' but obviously, I want to make sure it's production ready, so I prefer to have it work with lint.

[manavm1990]

BTW, this jquery code works just fine:

`// Your custom JavaScript goes here $(document).ready(function() { $('#btn-menu, .fade-screen, #btn-menu-close').on('click touchstart', function(e) { $('.nav--traditional, .fade-screen').toggleClass('is_visible'); e.preventDefault(); });

$('.slider-container__button--collapse').on('click touchstart',
    function(e) {
      'use strict';
      $('.slider-container__text').toggleClass('is_hidden');
      e.preventDefault();
    });

$(window).scroll(function() {
  var $y1 = $(window).height();
  // Gives us top coordinate of window.

  $('[data-scroll]').each(function() {
    var $this = $(this);
    // Just a convenience var assignment.

    var thisY = this.getBoundingClientRect().top;
    // Get the vertical position of 'element.'

    var classNameArray = $this.data('scroll').split(' ');

    jQuery.each(classNameArray, function(i, val) {
      if (thisY <= $y1 && !$this.hasClass(val)) {
        $this.addClass(val);
      }
    });
  });
});

});`

It's only breaking on 'gulp' lint when I switch things over to es6 syntax: $(() => {})

[manavm1990]

Ok, on that note, for testing purposes, I removed all the code, just copied/pasted main.js from repo (so no jquery), and I just have this (after comment about 'custom code'):

let spit = document.querySelector('#btn-menu, .fade-screen, #btn-menu-close');
  console.log(spit);
})();

Now, I see this:

gulp lint [08:41:40] Requiring external module babel-register [08:41:41] Using gulpfile ~/Sites/moco-ema/gulpfile.babel.js [08:41:41] Starting 'lint'... [08:41:41] app/scripts/main.js 75:4 error Parsing error: The keyword 'let' is reserved

✖ 1 problem (1 error, 0 warnings)

[08:41:41] 'lint' errored after 330 ms [08:41:41] ESLintError in plugin 'gulp-eslint' Message: Failed with 1 error

[Garbee]

Search for the error from eslint on your favorite search engine. There are loads of existing articles and discussions around that and how to address it.