Gulp не синхронизирует папку с картинками?

Question

[Denchik102030]

Gulp не синхронизирует папку с картинками автоматически. Для того, чтобы в папке dist/assets/images/ они появились, надо либо вручную добавлять, либо заново в консоле писать gulp

"use strict"

const {src, dest} = require("gulp")
const gulp = require("gulp")

const autoprefixier = require("gulp-autoprefixer");
const del = require("del");
const cssbeautify = require("gulp-cssbeautify");
const cssnano = require("gulp-cssnano");
const imagemin = require("gulp-imagemin");
const plumber = require("gulp-plumber");
const rename = require("gulp-rename");
const rigger = require("gulp-rigger");
const panini = require("panini");
const removeComments = require("gulp-strip-css-comments");
const sass = require("gulp-sass")(require("sass"));
const uglify = require("gulp-uglify")
const notify = require("gulp-notify")
const browserSync = require("browser-sync").create()

// Paths

const srcPath = "src/"
const distPath = "dist/"

const path = {
    build: {
        html: distPath,
        css: distPath + "assets/css/",
        js: distPath + "assets/js/",
        images: distPath + "assets/images/",
        fonts: distPath + "assets/fonts/"
    },
    src: {
        html: srcPath + "*.html",
        css: srcPath + "assets/scss/*.scss",
        js: srcPath + "assets/js/*.js",
        images: srcPath + `assets/images/**/*.{jpg,jpeg,png,svg,gif,webp,ico,xml,json,webmanifest}`,
        fonts: srcPath + "assets/fonts/**/*.{eot, woff, woff2, ttf, svg}"
    },
    watch: {
        html: srcPath + "**/*.html",
        css: srcPath + "assets/scss/**/*.scss",
        js: srcPath + "assets/js/**/*.js",
        images: srcPath + "assets/images/**/*.{jpeg, png, svg, jpg, gif, ico, webp, xml, json, webmanifest}",
        fonts: srcPath + "assets/fonts/**/*.{eot, woff, woff2, ttf, svg}"
    },
    clean: "./" + distPath
}

function serve() {
    browserSync.init({
        server: {
            baseDir: "./" + distPath
        }
    })
}

function html () {
    return src(path.src.html, { base: srcPath })
        .pipe(plumber())
        .pipe(dest(path.build.html))
        .pipe(browserSync.reload({stream: true}));
}

function css () {
    return src(path.src.css, { base: srcPath + "assets/scss/" })
    .pipe(plumber({
        errorHandler : function(err) {
            notify.onError({
                title: "SCSS Error",
                message: "Error: <%= error.message %>"
            })(err);
            this.emit('end');
        }
    }))
        .pipe(sass())
        .pipe(autoprefixier())
        .pipe(cssbeautify())
        .pipe(dest(path.build.css))
        .pipe(cssnano({
            zindex: false,
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(removeComments())
        .pipe(rename({
            suffix: ".min",
            extname: ".css"
        }))
        .pipe(dest(path.build.css))
        .pipe(browserSync.reload({stream: true}));
}

function js() {
    return src(path.src.js, { base: srcPath + "assets/js/" })
    .pipe(plumber({
        errorHandler : function(err) {
            notify.onError({
                title: "JS Error",
                message: "Error: <%= error.message %>"
            })(err);
            this.emit('end');
        }
    }))
        .pipe(rigger())
        .pipe(dest(path.build.js))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min",
            extname: ".js"
        }))
        .pipe(dest(path.build.js))
        .pipe(browserSync.reload({stream: true}));
}

function images() {
    return src(path.src.images, { base: srcPath + "assets/images/" })
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.mozjpeg({quality: 80, progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
        .pipe(dest(path.build.images))
        .pipe(browserSync.reload({stream: true}));
}

function clean() {
    return del(path.clean)
}

function fonts() {
    return src(path.src.fonts, { base: srcPath + "assets/fonts/" })
    .pipe(browserSync.reload({stream: true}));
}

function watchFiles() {
    gulp.watch([path.watch.html], html)
    gulp.watch([path.watch.css], css)
    gulp.watch([path.watch.js], js)
    gulp.watch([path.watch.images], images)
    gulp.watch([path.watch.fonts], fonts)
}

const build = gulp.series(clean, gulp.parallel(html, css, js, images, fonts))

const watch = gulp.parallel(build, watchFiles, serve)

exports.fonts = fonts
exports.images = images
exports.css = css
exports.html = html
exports.js = js
exports.clean = clean
exports.build = build
exports.watch = watch
exports.default = watch

Answer 1

[Froggyweb]

потому что задача указана только в сценарии build
каким образом ты привязал тег сss grid?

Comments

[Denchik102030]

если вы про

const build = gulp.series(clean, gulp.parallel(html, css, js, images, fonts))

то я все равно потом в watch использую build

const watch = gulp.parallel(build, watchFiles, serve)

[Froggyweb]

Denchik102030,

const watch = gulp.parallel(build, watchFiles, serve)

поставь здесь series смысла в параллельном запуске здесь нет, а глюк быть может.
а вообще при разработке минифицировать все картинки - дорого можно просто копировать
+ если будет файл XML или ico imagemin скорее всего упадет

[Denchik102030]

Froggyweb, спасибо огромное, но после того, как я поставил series, gulp просто останавливается на

[21:38:34] Starting 'watchFiles'...

[Froggyweb]

Denchik102030, я когда-то делал так. Все работало отлично, толь js собирался webpack

"use strict";

const autoprefixer = require("autoprefixer");
const browsersync = require("browser-sync").create();
const cssnano = require("cssnano");
const gulp = require("gulp");
const replace = require("gulp-replace");
const postcss = require("gulp-postcss");
const svgstore = require("gulp-svgstore");
const sass = require('gulp-sass')(require('sass'));
const globImporter = require("node-sass-glob-importer");
const sourcemaps = require("gulp-sourcemaps");
const webpack = require("webpack");
const webpackconfig = require("./webpack.config.js");
const webpackstream = require("webpack-stream");

const source = {
  src: "./theme/_src/",
};

// BrowserSync
function browserSync(done) {
  browsersync.init({
    server: {
      baseDir: "./",
      directory: true,
    },
    files: ["./html/*.html", "./css/*.css", "./js/*.js", "./img/**/*"],
    files       : [ './views/**' ],
    watchEvents : [ 'change', 'add', 'unlink', 'addDir', 'unlinkDir' ],
    
    rewriteRules: [
      {
        match: new RegExp("theme/css/common.css"),
        fn: function () {
          return "./theme/css/common.css";
        },
      },
      {
        match: new RegExp("theme/js/"),
        fn: function () {
          return "./theme/js/";
        },
      },
    ],
    serveStatic: ["./"],
    notify: false,
    open: false,
  });
  done();
}

// BrowserSync Reload
function browserSyncReload(done) {
  browsersync.reload();
  done();
}

// CSS
function css() {
  return gulp
    .src(source.src + "scss/*.{sass,scss}")
    .pipe(sourcemaps.init())
    .pipe(
      sass({
        importer: globImporter(),
        outputStyle: "expanded", // nested, expanded, compact, compressed
        precision: 5,
        includePaths: ["node_modules", "./theme/_src/sass"],
      }).on("error", sass.logError)
    )
    // .pipe(replace(new RegExp("(../){2,}", "g"), "../"))
    .pipe(postcss([autoprefixer, cssnano]))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("./theme/css/"))
    .pipe(browsersync.stream());
}



function sprite() {
  return gulp
    .src("theme/_src/svg-ico/*.svg")
    .pipe(svgstore())
    .pipe(gulp.dest("theme/img"));
}

// JS
function scripts() {
  return (
    gulp
      .src([source.src + "js/*.js"])
      .pipe(webpackstream(webpackconfig, webpack))
      // folder only, filename is specified in webpack config
      .pipe(gulp.dest("./theme/js/"))
      .pipe(browsersync.stream())
  );
}

// Watch files
function watchFiles() {
  gulp.watch(source.src + "scss/**/*", css);
  gulp.watch(source.src + "js/**/*", gulp.series(scripts));
  gulp.watch(source.src + "svg-ico/*.svg", gulp.series(sprite));
}

// define complex tasks
const js = gulp.series(scripts);
const build = gulp.parallel(css, js, sprite);
const watch = gulp.parallel(build, watchFiles, browserSync);

// export tasks
exports.css = css;
exports.js = js;
exports.build = build;
exports.watch = watch;
exports.default = watch;