4
\$\begingroup\$

If the default task is executed here, the file name to be compiled is passed to the argument of the CompileSass function. When the sass task is executed, the callback function to be executed at the end is passed by gulp.

The CompileSass function logs the file name when it is passed. Also, when anything other than the file name is passed, the log output will not be performed with the CompileSass function.

This is easily done by determining the argument with the typeof operator.

function CompileSass(filePath) {
    const time = process.hrtime();
    const isFilePath = typeof filePath === "string";
    if (isFilePath) { // same if condition
        console.log("compiling now");
    }
    return src(path["sass"])
        .pipe(sass({outputStyle: "expanded"}))
        .on("end", () => {
            if (isFilePath) { // same if condition
                console.log(`Compiled '${filePath}' now`);
            }
        })
        .pipe(dest("css"))
        .on("end", () => {
            if (isFilePath) { // same if condition
                const TaskTime = prettyTime(process.hrtime(time));
                console.log(`Finished compiled ${TaskTime}`);
            }
        });
}

exports.default = () => {
    watch(dir).on("all", (directory) => {
        CompileSass(directory);
    });
};

exports.sass = series(CompileSass); // in fact, there is other tasks in series function's argument

However, this if statement is repeated even though the log output conditions are the same. I wanted to consolidate this if statement in one place. But I couldn't come up with a good idea for that. I believe that increasing package dependencies leads to management complexity, so I am reluctant to introduce new packages whenever possible.

Is there a good way to make the conditional branch for log output common in the gulp method chain?

\$\endgroup\$

1 Answer 1

2
\$\begingroup\$

Interesting question;

some review remarks before addressing your actual question:

  • You never seem to pass filePath to src but use path["sass"] instead
  • I always suggest to pipe your console.log calls through a log function that accepts a severity parameter so that you can customize the level of logging, but that's probably overkill for Gulp

I would add a new function that does nothing, called doNothing() and then up front point an output function to either doNothing() or console.log().

function doNothing(){
  //Do nothing
}

function CompileSass(filePath) {
    const time = process.hrtime();
    const out = (filePath === "string") ? console.log : doNothing;
    out("compiling now");

    return src(path["sass"])
        .pipe(sass({outputStyle: "expanded"}))
        .on("end", () => {
            out(`Compiled '${filePath}' now`);
        })
        .pipe(dest("css"))
        .on("end", () => {
            out(`Finished compiling ${prettyTime(process.hrtime(time))}`);
        });
}

exports.default = () => {
    watch(dir).on("all", (directory) => {
        CompileSass(directory);
    });
};

exports.sass = series(CompileSass); // in fact, there is other tasks in series function's argument
\$\endgroup\$
2
  • \$\begingroup\$ Thank you for your excellent feedback Konijn. This time, instead of creating a new function doNothing, i decided to create an empty function using new Function. \$\endgroup\$
    – alihasan
    Oct 21, 2019 at 21:40
  • \$\begingroup\$ You never seem to pass filePath to src but use path [" sass "] instead> Does this mean using path [" sass "] instead of filePath? If so, it is difficult. / This is because path ["sass"] is a glob path (e.g ./sass/*/*.scss), whereas filePath is the actual compiled file name(e.g. ./sass/utility/button.sass), so it's difficult to replace each other. \$\endgroup\$
    – alihasan
    Oct 21, 2019 at 21:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.