Problems when building gulp project

Problems when building gulp project
0

#1

So i pray for help of gulp users.I hope you are familiar with gulp-useref and wiredep plugins.

So i have this scripts at the bottom of body tag

<!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="/bower_components/jquery/dist/jquery.js"></script>
    <script src="/bower_components/gsap/src/uncompressed/TweenMax.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
    
    <!-- build:js scripts/main.js -->
    <script src="scripts/main.js"></script>
    <!-- endbuild -->

if my main.js relies on this libraries and i put in it something like

const about = $('#about');
TweenMax.to(about, 1, {
	y: 100
});


and when i run gulp command to build project eslint give me this error

C:\Users\User\Desktop\portfolio\app\scripts\main.js
  1:14  error  "$" is not defined         no-undef
  2:0   error  "TweenMax" is not defined  no-undef

✖ 2 problems (2 errors, 0 warnings)

[17:56:07] 'lint' errored after 24 s
[17:56:07] ESLintError in plugin 'gulp-eslint'

Why?


#2

The generator you’ve invoked uses gulp-eslint to check your code for potential problems. Because ESLint only has access to the information in your individual files, it doesn’t know that ‘$’ and ‘TweenMax’ are defined elsewhere in your project. The way to tell it about your global variables is to either add some directives for ESLint in your file, or have a .eslintrc file that it can refer to when it goes through its check. You can either create this .eslintrc file for each project, in which case it would sit in your project’s root directory (C:\Users\User\Desktop\portfolio in this case), or you can have one file called .eslintrc in your user’s home folder, or both. In any case, this file holds all the configuration settings you want ESLint to use as its checking your file. If you have one in your project directory and another file in your home directory, the project directory will take precedence.

This is my .eslintrc file that I keep in my home directory

{ "ecmaFeatures": {
    "jsx": true,  //Recognize JSX
    "modules": true,  //ES6 imports
    "classes": true   //ES7 class properties
  },
  "parserOptions": {
    "sourceType":"module"
  },
  "env": {
    "browser": true,
    "node": true,
    "jquery": true,
    "es6": true
  },
  "rules": {
    "quotes": 0,
    "no-trailing-spaces": 0,
    "no-unused-vars": 0,
    "no-underscore-dangle": 0
  }
}

Because this specifies jQuery as a working environment, that would take care of the first error. The second would need a new field. You could add this entry to any of your .eslintrc files:

{
  "globals": {
    "TweenMax": true
  }
}

`
Alternatively, you should be able to put this in just the file with TweenMax (I’m not 100% sure about this syntax):

/* global TweenMax: true */

ESLint and linting in general are something you’ll want to be familiar with. Check out this guide for various configuration options: eslint.org