Question

嗨，大家好，我正在研究基于GULP的简单WP入门主题。

Gulpfile.js可以正常工作，它可以正确编译scss和js，当我尝试导入用npm安装的节点模块时，问题就开始了。

我使用vinyl-source-stream-gulp-streamify和browserify生成bundle.js，并将其链接到页脚中，因此当我尝试初始化类似match-height.js的内容时，我将其放在控制台中< / p>

未捕获的TypeError：t（...）。matchHeight不是函数

jQuery.Deferred异常：t（...）。matchHeight不是函数TypeError：t（...）。matchHeight不是函数在HTMLDocument。

也许我的app.js中的require发生了问题

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "scripts": {
   },
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.24.6",
    "browserify": "^16.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-csso": "^3.0.1",
    "gulp-imagemin": "^4.1.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.1",
    "gulp-size": "^3.0.0",
    "gulp-streamify": "^1.0.2",
    "gulp-strip-debug": "^3.0.0",
    "gulp-uglify": "^3.0.1",
    "gulpify": "^0.1.1",
    "jquery": "^3.3.1",
    "jquery-match-height": "^0.7.2",
    "slick-carousel": "^1.8.1",
    "slick-carousel-browserify": "^1.6.12",
    "vinyl-source-stream": "^2.0.0"
  },
  "dependencies": {}
}

gulpfile.js

var gulp = require('gulp');  
var imagemin = require('gulp-imagemin');
var uglify = require('gulp-uglify');  
var concat = require('gulp-concat');  
var stripDebug = require('gulp-strip-debug');  
var size = require('gulp-size');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var csso = require('gulp-csso');  
var autoprefix = require('gulp-autoprefixer');
var source = require('vinyl-source-stream')
var streamify = require('gulp-streamify')
var browserify = require('browserify')
var gulpify = require('gulpify')
var rename = require('gulp-rename')


// using gulpify:
gulp.task('gulpify', function() {
    gulp.src('index.js')
      .pipe(gulpify())
      .pipe(uglify())
      .pipe(rename('bundle.js'))
      .pipe(gulp.dest('./ '))
  })

  // using vinyl-source-stream:
  gulp.task('browserify', function() {
    var bundleStream = browserify('./index.js').bundle()

    bundleStream
      .pipe(source('index.js'))
      .pipe(streamify(uglify()))
      .pipe(rename('bundle.js'))
      .pipe(gulp.dest('./ ')) 
  })



gulp.task('images', function() {  
    return gulp.src('app/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

gulp.task('scripts', function() {  
    gulp.src('app/scripts/**/*.js')
         .pipe(stripDebug())
        .pipe(concat('main.js')) 
        .pipe(uglify())
        .pipe(size())
        .pipe(gulp.dest('dist/scripts'));

});

gulp.task('serve', ['sass'], function() {

    browserSync.init({
        proxy: "gozer2.local"
    }); 
     gulp.watch("app/styles/*.scss").on('change', browserSync.reload);
 });


gulp.task('sass', function () {
    return gulp.src('app/styles/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(autoprefix())
      .pipe(concat('main.css'))
      .pipe(csso())
      .pipe(size())
      .pipe(gulp.dest('dist/styles'));

    });





gulp.task('default', ['images', 'scripts', 'sass','serve'], function() {  
    gulp.watch('app/scripts/**/*.js', ['scripts']);
    gulp.watch('app/styles/**/*.scss', ['sass']);

});

app.js

match_height = require('jquery-match-height');

main.js

 (function (Jquery) {

        "use strict";

        Jquery(document).ready(function () {

            Jquery(function() {
                Jquery('.item--straordinario').matchHeight();
            });



        });

    }(jQuery));

有什么想法吗？

WP + GULP +乙烯基源流-未捕获的TypeError：

0 个答案: