What do you use to minify and concatenate CSS and JS files?

Question

PHP

There are projects that include a lot of CSS and JS files, which is not good. Than you can collect, minify them into a couple of files on the fly through PHP.
I know that there is Grunt.js, but as I understand it, it does all this once and the finished files are uploaded to the server. Maybe I'm wrong?

Answer 1

gulp + gulp-concat + gulp-sourcemap (for development) + gulp-strip-debug + gulp-uglify (the last two are for release only).
For development, I set up watchers that rebuild everything according to changes. You can add livereload to taste.
ps everything is the same under grunt, I just like gulp more (grant configs grow like a plague, they are pretty stupid, you have to create intermediate files, everyone does everything as they want ... in short, I don’t see any reason to use it anymore).
pps I use this stack to build and develop the frontend both in separate js projects and in the context of development under symfony (I threw out the asset because it infuriates me).

Answer 2

Collect and compress easily using PHP.
CSS:
1. Upload files and glue the content like a regular string.
2. Run the resulting data through the script:

// $data - css
function style($data){    
        $data = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!u', '', $data); // удаление комментариев
        $data = preg_replace('/\s{0,}(\s|\:|\;|\,|\}|\{|\(|\)|\>|\~|\+)\s{0,}/u', '$1', str_replace(array('\r','\n','\t'), '', $data)); // удаление лишних символов
        return str_replace(';}', '}', $data); // замена ;} на }
    }

3. Save the result in a separate file.
JS did not compress, but I think the principle is the same.

Answer 3

I'll just leave it here https://github.com/kriswallsmith/assetic

Answer 4

gulp: gulp-concat + gulp-minify-css + gulp-imagemin + gulp-uglify