F
F
frontat2022-01-12 19:05:56
Layout
frontat, 2022-01-12 19:05:56

What is the problem with the assembler after migrating from gulp 3 to gulp 4?

After switching from version 3 to 4 of gulp, there was a problem with the collector, at first the local server did not deploy, I overcame this problem with gulp.paralel, now there is a new problem related to tracking changes and updating the date By tracking changes - the collector sees absolutely all changes by files, but not all of them are updated on the browser page, in order to update in the browser, you need to completely restart the collector (ctrl c - npm start) When updating the date - the collector does not update the date for some files, which causes errors with uploading to the site, something has to be moved manually. Please help me figure it out

// 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();

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question