我的gulp应用似乎工作正常,但jQuery因某些原因没有被执行。我是Gulp的新手,我无法弄清楚这个问题。
这是我的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']);
这是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": {
}
}
这是main.js
(function($){
"use strict";
console.log('here');
$('header').hide();
})(jQuery);
控制台面板抛出错误Uncaught ReferenceError: jQuery is not defined
如何让jQuery与Gulp合作?
答案 0 :(得分:2)
您确定先在其他所有内容之前下载jQuery库吗?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
答案 1 :(得分:0)
存在多个问题。
首先,在index.html
中,我删除了
<!-- build:js scripts/main.min.js -->
<!-- endbuild -->
gulp
用于合并JS
并将其缩小为1个文件。修复是添加以下
<!-- 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 -->
其次,在gulp
scripts
任务中,我必须告诉gulp
要复制的所有脚本。该修复看起来像
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
])
最后,如@Wolfgang Leon
所述,jQuery v3.2.0
在某种程度上不兼容,因此我将其替换为jQuery v1.9.1
这有助于我完全解决问题。 #learnednewthings