Answer the question
In order to leave comments, you need to log in
Why is the jQuery library not included?
Why can't I connect the JQuery library via gulpfile.js like this:
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());
}
// Подключенные модули 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"));
............
<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>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question