Почему не подключается библиотека JQuery?

Question

[Нина]

Почему не могу подключить библиотеку JQuery через gulpfile.js таким образом:

function scripts() {
  return gulp.src([
    "./source/js/libs/jquery-3.5.1.min.js",
    "./source/js/libs/slick.min.js",
    "./source/js/slider-slick.js",
    "./source/js/main.js",
  ])
  // .pipe(sourcemaps.init()) // инициализируем создание Source Maps
  .pipe(concat("script.js"))  // Объединение файлов в один
  .pipe(gulp.dest("./source/js")) 
  .pipe(uglify({
    toplevel: true
  }))
  // .pipe(sourcemaps.write(".")) // пути для записи SourceMaps - в данном случае карта SourceMaps будет добавлена прям в данный файл scripts.min.js в самом конце в формате комментария
  .pipe(gulp.dest("./build/js"))
  .pipe(browserSync.stream());
}

Весь gulpfile :

//  Подключенные модули  gulp 
const gulp = require("gulp");
const less = require("gulp-less");
const plumber = require("gulp-plumber");
const concat = require("gulp-concat");
const autoprefixer = require("gulp-autoprefixer");
const cleanCSS = require("gulp-clean-css");
const rename = require("gulp-rename");
const uglify = require("gulp-uglify");
const imagemin = require("gulp-imagemin");
const webp = require("gulp-webp");
const svgstore = require("gulp-svgstore");
// const svgSprite = require("gulp-svg-sprite");
const	svgmin = require("gulp-svgmin");
const	cheerio = require("gulp-cheerio");
const	replace = require("gulp-replace");
const cache = require("gulp-cache");
const sourcemaps = require("gulp-sourcemaps");
const del = require("del");
const browserSync = require("browser-sync").create();




// Файлы для подключения в строгом порядке:

// TASKS
// Task на стили CSS 

function css () {
  return gulp.src([
    // Пишем все файлы, которые хотим объединить, в том порядке, в каком они будут располагаться в объединенном файле
    // "./node_modules/normalize.css/normalize.css",
    "./source/less/variables.less", 
    "./source/less/mixins.less", 
    "./source/less/scaffolding.less",
    "./source/less/header.less",
    "./source/less/btn.less",
    "./source/less/nav.less",
    "./source/less/logo.less",
    "./source/less/card.less",
    "./source/less/search.less",
    "./source/less/text.less",
    "./source/less/week-product.less",
    "./source/less/about.less",
    "./source/less/reviews.less",
    "./source/less/slider.less",
    "./source/less/contacts.less",
    "./source/less/buy.less",
    "./source/less/footer.less",
  
  ])
  .pipe(plumber())
  .pipe(concat("main.less"))
  .pipe(gulp.dest("./source/less")) 
  .pipe(less())
  .pipe(autoprefixer({
    overrideBrowserslist:  ["last 2 versions"],
    cascade: false
  }))
  .pipe(gulp.dest("./source/css"))
  .pipe(browserSync.stream());
}


function styles() {
  return gulp.src([
    // "./source/css/slick.css",
    // "./source/css/slick-theme.css",
    "./source/css/main.css",
  
  ])
  // .pipe(sourcemaps.init())    // инициализируем создание Source Maps
  .pipe(concat("style.css"))
  .pipe(gulp.dest("./build/css"))
  .pipe(cleanCSS({           // Минификация css 
    level: 2
  }))  
  .pipe(rename("style.min.css"))
  // .pipe(sourcemaps.write(".")) // пути для записи SourceMaps - в данном случае карта SourceMaps будет добавлена прям в данный файл main.min.css в самом конце
  .pipe(gulp.dest("build/css"))
  .pipe(browserSync.stream());
  
}


// Task на скрипты JS 
function scripts() {
  return gulp.src([
    "./source/js/libs/jquery-3.5.1.min.js",
    "./source/js/libs/slick.min.js",
    "./source/js/slider-slick.js",
    "./source/js/main.js",
  ])
  // .pipe(sourcemaps.init()) // инициализируем создание Source Maps
  .pipe(concat("script.js"))  // Объединение файлов в один
  .pipe(gulp.dest("./source/js")) 
  .pipe(uglify({
    toplevel: true
  }))
  // .pipe(sourcemaps.write(".")) // пути для записи SourceMaps - в данном случае карта SourceMaps будет добавлена прям в данный файл scripts.min.js в самом конце в формате комментария
  .pipe(gulp.dest("./build/js"))
  .pipe(browserSync.stream());
} 


// Task на функцию del
// function clean() {
//   return del.sync("build") (function(cb) {
//     return cache.clearAll(cb);
//   });
// }

function clean() {
  return del(["build/*"]);
}

gulp.task('clear', function(){
  // будем вручную запускать при необходимости очистки кэша
  return cache.clearAll();
});

// Task на функцию images

gulp.task("images", function () { 
  return gulp.src("source/img/**/*.{png,jpg,svg}") 
  .pipe(cache(imagemin([ 
    imagemin.optipng({optimizationLevel: 3}), 
    imagemin.mozjpeg({progressive: true}), 
    imagemin.svgo() 
  ])))
  .pipe(gulp.dest("build/img"))
  .pipe(browserSync.stream());
});


// Task на функцию webp
function webpic() {
  return gulp.src("build/img/**/*.{png, jpg, jpeg}")
  .pipe(webp({quality: 90}))
  .pipe(gulp.dest("build/img"));
}


// Task на функцию watch
function watch() {
  browserSync.init({
    server: {
      baseDir: "./"
    }
  });
  gulp.watch("./source/**/*.html", gulp.series("html")); 
  gulp.watch("./source/less/**/*.less", gulp.series("css"));   // Отслеживаем файлы css 
  gulp.watch("./source/css/**/*.css", gulp.series("styles")); 
  gulp.watch("./source/js/**/*.js", gulp.series("scripts")); 
  gulp.watch("./source/img/**/*.{png, jpg, jpeg, svg}", gulp.series("images"));
  gulp.watch("./source/video/**/*.{mp4, webm}", gulp.series("video"));  
  gulp.watch("./source/img/**/*.{png, jpg, jpeg}", gulp.series("webp"));   // Отслеживаем файлы js 
  gulp.watch("./*.html").on("change", browserSync.reload);  //  // Отслеживаем файлы html
}



// TASKS ДЛЯ ВЫЗОВА ФУНКЦИЙ
// Task вызывающий функцию styles

gulp.task("css", css);

gulp.task("styles", styles);

// Task вызывающий функцию scripts
gulp.task("scripts", scripts);

// Task вызывающий функцию очистки папки build 
gulp.task("del", clean);

// Task вызывающий функцию минимизации картинок
// gulp.task("images", imgmin); 


// Task вызывающий функцию webp
gulp.task("webp", webpic);


// Task для создания svg-спрайта Academy-модернизированный

gulp.task("sprite", function () { 
  return gulp.src("source/img/*.svg") 
  // minify svg
  .pipe(svgmin({
    js2svg: {
      pretty: true
    }
  }))
  // remove all fill and style declarations in out shapes
  .pipe(cheerio({
    run: function ($) {
      $('[fill]').removeAttr('fill');
      $('[stroke]').removeAttr('stroke');
      $('[style]').removeAttr('style');
    },
    parserOptions: { xmlMode: true }
  }))
  // cheerio plugin create unnecessary string ">', so replace it.
  .pipe(replace(">", ">"))

  .pipe(svgstore({ 
    inlineSvg: true 
  }))
  .pipe(rename("sprite.svg"))
  .pipe(gulp.dest("build/img"));
});


// Copying files

gulp.task("fonts", function() {
  return gulp.src("source/fonts/**/*")
    .pipe(gulp.dest("build/css/fonts"));
});

gulp.task("html", function() {
  return gulp.src("source/**/*.html")
    .pipe(gulp.dest("build/"))
    .pipe(browserSync.stream());
});

gulp.task("video", function() {
  return gulp.src("source/video/**/*")
    .pipe(gulp.dest("build/video/"));
});

// Task вызывающий функцию watch
gulp.task("watch", watch);



gulp.task("build", gulp.series( "del", "css", "images", "webp", "sprite", "html", "video", gulp.parallel("styles")), function(done){
  done();
});

gulp.task("default", gulp.series("build", "fonts", "scripts", "watch"));

а если подключаю в файле index.html, то библиотека прекрасно подключается и работает :

............
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
  <script src="build/js/script.js"></script>
</body>

Библиотеку JQuery нельзя подключить через gulpfile или я неправильно что-то делаю?

Comments

[Михаил]

И что не работает?

Answer 1

[galaxy]

"./source/js/libs/jquery-3.5.1.min.js",

Думается, ее стоит сначала скачать в папку source.

Comments

[Нина]

Уже есть :
\source\js\libs\jquery-3.5.1.min.js

[Нина]

и второй файл:
\source\js\libs\slick.min.js