Gulp: проблемы при объединении и использовании jQuery - PullRequest
Новая
       11

Gulp: проблемы при объединении и использовании jQuery

0 голосов
/ 30 августа 2018

У меня есть набор файлов Javascript, которые включают некоторые файлы вендоров, такие как jQuery и bootstrap, и некоторые файлы ES6, которые необходимо «перенести» в ES5.

Я создал задачу gulp, чтобы обработать все эти файлы и объединить их в один файл: 

gulp.task("processJs4", () => {
    return gulp.src(tmpJsAssets)
        .pipe(order(tmpJsAssets))
        .pipe(sourcemaps.init())
        .pipe(babel({presets: ['es2015']}))
        .pipe(concat('bundle.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(resources.jsDest))
        .pipe(notify({ message: 'Javascript task complete...'}))
})

где tmpJsAssets - это массив скриптов в том порядке, в котором я хочу, чтобы они обрабатывались (первый jQuery, второй загрузчик и т. Д.). bundle.js успешно создан, но при его использовании я получаю следующую ошибку из одного из передаваемых файлов:

Uncaught ReferenceError: $ не определено

Если я проверял bundle.js, то заметил, что jQuery не добавляется в начало файла. Я использую gulp-order, потому что в других постах я читал, что он будет обрабатывать файлы в соответствии с порядком их передачи.

Я также пытался использовать streamqueue, но без удачи получаю те же результаты: 

gulp.task("processJs4", () => {
    return streamqueue({ objectMode: true }, gulp.src(tmpJsAssets))
        .pipe(sourcemaps.init())
        .pipe(babel({presets: ['es2015']}))
        .pipe(concat('bundle.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(resources.jsDest))
        .pipe(notify({ message: 'Javascript task complete...'}))
})

Единственное решение, которое я нашел, состояло в том, чтобы разделить задачи, которые генерируют два отдельных файла, один для поставщиков и один для моих файлов. Поэтому я подумал, что могу объединить файлы, сгенерированные для этих задач, в один, но это тоже не сработало.

Мне нужно использовать файлы jQuery и начальной загрузки, я не хочу устанавливать их через npm, а затем использовать их.

Используются следующие зависимости: 

"babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-register": "^6.26.0",
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-babel": "^7.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-notify": "^3.2.0",
    "gulp-order": "^1.1.1",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.1",
    "gulp-webpack-sourcemaps": "^0.3.0",
    "merge-stream": "^1.0.1",
    "streamqueue": "^1.1.2",

Спасибо.

* РЕДАКТИРОВАТЬ: Включая tmpJsAssets *

['src / js / vendor / jquery / jquery.min.js',
'SRC / JS / поставщик / начальная загрузка / bootstrap.bundle.min.js',
'SRC / JS / продавец / JQuery-Расшивка / jquery.easing.min.js',
'src / js / items / application.js', 'src / js / items / scroll.js',
'src / js / pages / about / about.js', 'src / js / pages / homepage / homepage.js', 'src / js / pages / search-app.js',]

1 Ответ

0 голосов
/ 30 августа 2018

Когда вы передаете поток непосредственно из gulp.src(tmpJsAssets) в order(orderedTmpJsAssets), указанные пути к файлам в orderedTmpJsAssets должны быть относительно до tmpJsAssets.

Предположим, у вас есть настройки проекта, такие как: 

- src/
  - vendor/
    jQuery.js
    bootstrap.js
    libs.js
  - app/
    ...your JS files

Вы можете связать их в правильном порядке, например: 

gulp.src('src/**/*.js') // glob all .js files in ./src directory
  .pipe(order([
    'vendor/jQuery.js', // jQuery First
    'vendor/**/*.js',  // other files in the ./src/vendor directory
    'app/**/*.js' // files in the ./src/app directory
  ])
  .pipe(...)
...