@frontat

В чем проблема со сборщиком после перехода с gulp 3 на gulp 4?

После перехода с 3 на 4 версии gulp возникла проблема со сборщиком, сначала не разворачивался локальный сервер, эту проблему поборол с помощью gulp.paralel, теперь возникла новая проблема, связанная с отслеживанием изменений и обновлением даты По отслеживанию изменений - сборщик видит абсолютно все изменений по файлам, но на странице браузера обновляются не все, чтобы обновилось и в браузере , необходимо полностью перезагружать сборщик (ctrl c - npm start) По обновлению даты - сборщик не обновляет у некоторых файлов дату, из-за чего возникают ошибки с выгрузкой на сайт, что-то приходится перетаскивать вручную. Помогите , пожалуйста, разобраться

// Define components for task runner
const gulp = require("gulp");
const gutil = require("gulp-util");
const rename = require("gulp-rename");
const plumber = require("gulp-plumber");
const notify = require("gulp-notify");
// Define components for hot reloading
const browserSync = require("browser-sync");
const livereload = require("gulp-livereload");
// Define components for template processing
const pug = require("gulp-pug");
const gap = require("gulp-append-prepend");
// Define components for css processing
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");
const stylus = require("gulp-stylus");
const rupture = require("rupture");
// Define components for JS processing
const source = require("vinyl-source-stream");
const sourcemaps = require("gulp-sourcemaps");
const buffer = require("vinyl-buffer");
const browserify = require("browserify");
const babelify = require("babelify");
const uglify = require("gulp-uglify");

// Sources
const styleSrc = "./src/modules/_Common/style.styl";
const allStylFiles = "./src/**/*.styl";
const allPugFiles = "./src/**/*.pug";
const index = "./src/index.php";
const htaccess = "./src/.htaccess";
// Modules sources
const modulesTemplatesSrc_pug = "./src/modules/**/*.pug";
const modulesTemplatesSrc_xsl = "./src/modules/**/*.xsl";
const modulesPhpSrc = "./src/modules/**/*.php";
// View sources
const viewsTemplatesSrc_pug = "./src/views/**/*.pug";
const viewsTemplatesSrc_xsl = "./src/views/**/*.xsl";
// inc sources
const incPhpSrc = "./src/inc/*.php";
// Output
const htdocs = "./www/" + domainName + "/htdocs/";
// TODO: review this section
const viewsOut = "./www/" + domainName + "/tpl/";
const modulesOut = "./www/" + domainName + "/modules/";
const incOut = "./www/" + domainName + "/inc/";

// Define tasks

// Prepare CSS
compileStyle = () => {
    gulp
        .src(styleSrc)
        .pipe(
            plumber({
                errorHandler: notify.onError("CSS module error: <%= error.message %>")
            })
        )
        .pipe(
            stylus({
                "include css": true,
                use: [rupture()]
            })
        )
        .pipe(postcss([autoprefixer(), cssnano()]))
        .pipe(
            rename(function(path) {
                path.basename += ".min";
                path.extname = ".css";
                return path;
            })
        )
        .pipe(gulp.dest(htdocs))
        .pipe(livereload());
};

// Copy inc php
copyIncPhp = () => {
    gulp
        .src(incPhpSrc)
        .pipe(gulp.dest(incOut))
        .pipe(livereload());
};

// Compile modules frontend pug to xsl
compileModulesPug = () => {
    gulp
        .src(modulesTemplatesSrc_pug)
        .pipe(
            plumber({
                errorHandler: notify.onError("PUG error: <%= error.message %>")
            })
        )
        .pipe(pug({ pretty: true }))
        // Append
        .pipe(gap.prependFile("./src/snippets/xsl-prepend.gulp-snippet"))
        .pipe(gap.appendFile("./src/snippets/xsl-append.gulp-snippet"))
        .pipe(
            rename(function(path) {
                path.dirname = path.dirname.replace(/backend/, "");
                path.dirname += "/tpl/";
                path.extname = ".xsl";
                return path;
            })
        )
        .pipe(gulp.dest(modulesOut))
        .pipe(livereload());
};

// Copy modules xsl
copyModulesXsl = () => {
    gulp
        .src(modulesTemplatesSrc_xsl)
        .pipe(
            rename(function(path) {
                path.dirname = path.dirname.replace(/backend/, "");
                path.dirname += "/tpl/";
                return path;
            })
        )
        .pipe(gulp.dest(modulesOut))
        .pipe(livereload());
};

// Copy modules php
copyModulesPhp = () => {
    gulp
        .src(modulesPhpSrc)
        .pipe(
            rename(function(path) {
                path.dirname = path.dirname.replace(/backend/, "");
                return path;
            })
        )
        .pipe(gulp.dest(modulesOut))
        .pipe(livereload());
};

// Compile views templates pug files
compileViewsTpl = () => {
    gulp
        .src(viewsTemplatesSrc_pug)
        .pipe(
            plumber({
                errorHandler: notify.onError("PUG error: <%= error.message %>")
            })
        )
        .pipe(pug())
        // // Append
        // .pipe(gap.prependFile("./src/snippets/xsl-prepend.gulp-snippet"))
        // .pipe(gap.appendFile("./src/snippets/xsl-append.gulp-snippet"))
        .pipe(
            rename(function(path) {
                path.dirname = "";
                path.extname = ".xsl";
                return path;
            })
        )
        .pipe(gulp.dest(viewsOut))
        .pipe(livereload());
};
// Copy views templates xsl files
copyViewsTpl = () => {
    gulp
        .src(viewsTemplatesSrc_xsl)
        .pipe(gulp.dest(viewsOut))
        .pipe(livereload());
};

// Prepare JS
compileJs = inputFileName => {
    // set up the browserify instance on a task basis
    gulp;
    var b = browserify({
        entries: "./src/modules/_Common/" + inputFileName,
        debug: true,
        transform: [
            babelify.configure({
                presets: ["@babel/preset-env"]
            })
        ]
    });
    // return browserify
    return (
        b
        .bundle()
        .pipe(source(inputFileName))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        // Add transformation tasks to the pipeline here.
        .pipe(uglify())
        .pipe(
            plumber({
                errorHandler: notify.onError("JS app error: <%= error.message %>")
            })
        )
        .pipe(
            rename(function(path) {
                path.extname = ".min.js";
                return path;
            })
        )
        .pipe(sourcemaps.write("./"))
        .pipe(gulp.dest(htdocs))
        .pipe(livereload())
    );
};
prepareIndex = () => {
    gulp
        .src(index)
        .pipe(
            plumber({
                errorHandler: notify.onError("PUG error: <%= error.message %>")
            })
        )
        .pipe(gulp.dest(htdocs))
        .pipe(livereload());
};
prepareHtaccess = () => {
    gulp
        .src(htaccess)
        .pipe(
            plumber({
                errorHandler: notify.onError("PUG error: <%= error.message %>")
            })
        )
        .pipe(gulp.dest(htdocs))
        .pipe(livereload());
};

// Watch
(() => {
    livereload.listen();
    gulp.watch(allStylFiles, function() {
        compileStyle(), gulp.parallel();
    });
    gulp.watch(viewsTemplatesSrc_pug, function() {
        compileViewsTpl(), gulp.parallel();
    });
    gulp.watch(viewsTemplatesSrc_xsl, function() {
        copyViewsTpl(), gulp.parallel();
    });
    gulp.watch(modulesTemplatesSrc_pug, function() {
        compileModulesPug(), gulp.parallel();
        compileViewsTpl(), gulp.parallel();
    });
    gulp.watch(modulesTemplatesSrc_xsl, function() {
        copyModulesXsl(), gulp.parallel();
        compileViewsTpl(), gulp.parallel();
    });
    gulp.watch(modulesPhpSrc, function() {
        copyModulesPhp(), gulp.parallel();
    });
    gulp.watch(incPhpSrc, function() {
        copyIncPhp(), gulp.parallel();
    });
    gulp.watch(
        [
            "./src/modules/_Common/app.js",
            "./src/modules/**/*.js",
            "!./src/modules/_Common/bundle.js"
        ],
        function() {
            compileJs("app.js"), gulp.parallel();
        }
    );
    gulp.watch("./src/modules/_Common/bundle.js", function() {
        compileJs("bundle.js"), gulp.parallel();
    });
    gulp.watch(index, function() {
        prepareIndex(), gulp.parallel();
    });
    gulp.watch(htaccess, function() {
        prepareHtaccess(), gulp.parallel();
    });
})();

// Run tasks
compileStyle();
copyIncPhp();
compileModulesPug();
copyModulesXsl();
copyModulesPhp();
compileViewsTpl();
copyViewsTpl();
compileJs("app.js");
compileJs("bundle.js");
prepareIndex();
prepareHtaccess();
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы