Is there a way to build only modified sass files, not all sass file builds I have? (gulp, babel)

24 Views Asked by At
const sassBuild = (options) => {
    const stream = options.watch ? watchSass(paths.sass.src.sass) : gulp.src(paths.sass.src.sass);
    return stream
        .pipe(sourcemaps.init())
        .pipe(buffer())
        .pipe(
            sass({
                outputStyle: "expanded",
                includePaths: paths.sass.src.foundation,
                functions: sassFunctions(),
            }).on("error", sass.logError)
        )
        .pipe(
            postcss([
                autoprefixer({
                    overrideBrowserslist: ["last 2 versions", "iOS >= 6", "Android >= 4"],
                    cascade: true,
                    remove: true,
                }),
            ])
        )
        .pipe(gulp.dest(paths.sass.dist.css))
        .pipe(debug("sass build completed"))
        .pipe(
            csso({
                restructure: false,
                sourceMap: true,
            })
        )
        .pipe(
            rename({
                suffix: ".min",
            })
        )
        .pipe(sourcemaps.write(paths.sass.dist.map))
        .pipe(gulpif("*.map", frep(pattern)))
        .pipe(gulp.dest(paths.sass.dist.css))
        .pipe(debug("sass build completed"));
};
const sassFunctions = () => {
    const types = nodeSass.types;

    let options = options || {};
    options.base = options.base || process.cwd();

    return {
        "data-uri($file)": (filePath, done) => {
            let file = path.resolve(options.base, filePath.getValue()),
                ext = file.split(".").pop();

            fs.readFile(file, (err, data) => {
                if (err) {
                    return done(err);
                }

                data = new Buffer(data);
                data = data.toString("base64");
                data = "data:image/" + ext + ";base64," + data;
                data = types.String(data);
                done(data);
            });
        },
    };
};

This is the code for the 'npm run build' command I'm using, and I'm trying to reduce the build time. So as one of the methods, when I run the build command, I want you to run the compilation only for the sass file that I modified, not all sass. (like the npm watch feature) But even after a long conversation with GPT4, it's not working out at all, what can I do?

(I'm always using Stack Overflow. Thank you all)

After modifying the scss file, when I ran the npm run build, I wanted the build to proceed only with the modified file, and I came here after endless attempts to modify the code

0

There are 0 best solutions below