HookyQR / VSCodeMinify

Add minify function to VSCode 0.10+
53 stars 20 forks source link

Set CSS/JS files relative output #71

Closed TheEugeneIsHere closed 1 year ago

TheEugeneIsHere commented 1 year ago

I want to set relative path for minified files. e.g. /catalog/view/stylesheet/test.css as well as /admin/view/stylesheet/test.css

..should be saved if there's a /catalog/view/stylesheet/min/test.min.css or /admin/view/stylesheet/min/test.min.css. (if there's min folder in the same directory as file)

I tried playing around with settings.json:

"minify.css": { "root": "${fileDirname}/min/${fileBasenameNoExtension}.min.[css|js]", } "minify.css": { "root": "${fileDirname}/min", }

..and similar ways. But I still get the same result: any file with this kinda setting keeps saving in the same folder it exists. My head is literally blowing, help me pls.

In other words: i don't want to check the path. If in the folder where unminified css file exists there's (same level) also folder called 'min', search if there's a minified file that i'm saving. If it is exists, then minify it and save as /min/fileName.min.css

TheEugeneIsHere commented 1 year ago

Since there's no answer and i've already tried to resolve my issue without any success, if you have same needs, consider using gulp. Here's my example for gulp:

export function minifyCSS() {
    return gulp.src(['./**/*.css', '!./**/*.min.css'])
        .pipe(cleanCSS({debug: true}, (details) => {
            console.table({File: details.name, Compression: details.stats.efficiency.toFixed(2) + '%'});
        }))
        .pipe(rename(function(path) {
            return {
                dirname: '',
                basename: path.basename,
                suffix: ".min",
                extname: ".min.css"
            }
        }))
        .pipe(gulp.dest(function(file) {
            return path.join(file.base, 'min');
        }));
}

Include code above to gulpfile.js watch like so:

gulp.task('watch', function (done) {
    gulp.watch(['./**/*.css', '!./**/*.min.css'], gulp.series('minifyCSS'));
    done();
});

This code will watch for any changes made to css files in any directory of your project and it will create min folder at the same level as file and then put minified file in it.