Gulp - jQueryが定義されていません

Question

私のgulpアプリケーションはうまくいくようですが、何らかの理由でjQueryが実行されません。私はGulpを初めて使っているので、この問題を理解することはできません。

これはこれは

{ 
    "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": { 

    } 
} 

package.jsonであり、ここでコンソールパネルは、エラーをスローmain.js

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

である私の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']); 

ある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を組み合わせて、1つのファイルでそれらを縮小化するために使用するセクション

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

を削除しました。修正は追加するには、次の

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

は第二に、gulpscriptsタスクでは、私はすべてのスクリプトをコピーすべきことのgulpを伝えなければなりませんでした。これは私が完全に問題を解決する助け@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