Gulp - jQuery is not defined

问题:

My gulp application seems to work fine but the jQuery doesn't get executed for some reason. I am new to Gulp and I can't figure out this issue.

This is my gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var jshint = require('gulp-jshint');
var stylish = require('jshint-stylish');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require("gulp-rename");
var imagemin = require('gulp-imagemin');
var plumber = require('gulp-plumber');
var fixmyjs = require("gulp-fixmyjs");
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

// sass
gulp.task('sass', function () {
    gulp.src('./sass/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./'));
});

// js
gulp.task('js', function () {
    gulp.src(['./js/src/*.js'])
        .pipe(jshint())
        .pipe(jshint.reporter(stylish))
        .pipe(jshint.reporter('fail'))
        .pipe(concat('scripts.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(fixmyjs({
            "asi": true
        }))
        .pipe(uglify().on('error', function(e){
            console.log(e);
         }))
        .pipe(gulp.dest('js'));
});

gulp.task('images', function() {
    gulp.src('./src/images/*')
        .pipe(imagemin({
            optimizationLevel: 7,
            progressive: true
        }))
    .pipe(gulp.dest('dist/images'))
});

// browser sync and watch
gulp.task('watch', function() {
    browserSync.init({
        files: ['./**/*.php'],
        proxy: 'http://neontetra.local/',
    });
    gulp.watch('./sass/**/*.scss', ['sass', reload]);
    gulp.watch('./js/src/*.js', ['js', reload]);
    gulp.watch('./src/images/*', ['images', reload]);
});

gulp.task('default', ['sass', 'images', 'js', 'watch']);

This is package.json

{
  "name": "neontetra",
  "version": "1.0.0",
  "description": "[![Build Status](https://travis-ci.org/Automattic/_s.svg?branch=master)](https://travis-ci.org/Automattic/_s)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "browser-sync": "^2.17.3",
    "gulp-concat": "^2.6.0",
    "gulp": "^3.9.1",
    "gulp-fixmyjs": "^1.0.2",
    "gulp-imagemin": "^3.0.3",
    "gulp-jshint": "^2.0.1",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^2.3.2",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^2.0.0",
    "jquery": "^3.1.1",
    "jshint": "^2.9.3",
    "jshint-stylish": "^2.2.1"
  },
  "devDependencies": {

  }
}

And here is the main.js

(function($){
    "use strict";
    console.log('here');
    $('header').hide();
})(jQuery);

The console panel throws the error Uncaught ReferenceError: jQuery is not defined

What do I have to do for jQuery to work with Gulp?

回答1:

Did you make sure that you download jQuery libraries before everything else?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

回答2:

There were multiple problems.

First, in the index.html, I removed the section

<!-- build:js scripts/main.min.js -->
<!-- endbuild -->

which gulp uses to combine JS and minify them in 1 file. The fix was to add the following

<!-- build:js scripts/main.min.js -->
  <script src="scripts/vendors/jquery-1.9.1.min.js"></script>
  <script src="scripts/vendors/waypoints.min.js"></script>
  <script src="scripts/main.js"></script>
  <!-- endbuild -->

Secondly, in gulp scripts task, I had to tell gulp as to what all scripts to copy. The fix looked like

gulp.task('scripts', () =>
  gulp.src([
    // Note: Since we are not using useref in the scripts build pipeline,
    //       you need to explicitly list your scripts here in the right order
    //       to be correctly concatenated
    './app/scripts/vendors/jquery-1.9.1.min.js',
    './app/scripts/vendors/waypoints.min.js',
    './app/scripts/main.js'
    // Other scripts
  ])

Lastly, as mentioned by @Wolfgang Leon, the jQuery v3.2.0 was somehow incompatible, so I replaced it with jQuery v1.9.1

This helped me fix the issue completely. #learnednewthings