꿀꺽 - jQuery가 정의되지 않았습니다.

Question

내 꿀꺽 응용 프로그램이 잘 작동하는 것처럼 보이지만 jQuery가 어떤 이유로 실행되지 않습니다. 나는 꿀꺽 초보 다. 나는이 문제를 이해할 수 없다.

이것은

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']); 

이 여기에 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": { 

    } 
} 

이다 그리고이

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

콘솔 패널은 오류를 던지는 main.js 내 gulpfile.js입니다 Uncaught ReferenceError: jQuery is not defined

jQuery가 Gulp와 함께 작동하려면 어떻게해야합니까?

Answer 1

다른 모든 것보다 먼저 jQuery 라이브러리를 다운로드했는지 확인 했습니까?

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

Answer 2

여러 가지 문제가있었습니다.

첫째, index.html에, 나는 gulp이 JS를 결합 한 파일을 작게를 위해 사용하는 섹션

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

를 제거했습니다. 수정 내가 모든 스크립트를 복사하는 것과 같은 gulp 얘기했다, gulpscripts 작업에서, 두 번째로 다음

<!-- 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 --> 

을 추가했다. 이 날 완전히 문제를 해결하는 데 도움 @Wolfgang Leon에서 언급 한 바와 같이 수정은 jQuery v3.2.0 어떻게 든 양립,

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 
    ]) 

마지막처럼 보였다, 그래서 나는 jQuery v1.9.1

로 교체. #learnednewthings