Laravel minify css and js files

I receive custom js and css script as a string through html form. This strings are then saved in files on filesystem. The question is how to minify those files every time they are generated/updated. I am using gulp and laravel elixir. My first idea was to call exec("gulp something") but not sure how to configure gulp.

Solution

Requirments:

First step:(install plugins)

minifyCss and gulp-uglify are used by laravel-elixir. You have to install gulp-newer by npm install gulp-newer --save-dev.

Second step:(define task)

You need to define different tasks for css and js.

CSS task

gulp.task('cssTask', function() {
            return gulp.src(cssSrc)
                .pipe(newer(cssDest))//compares the css source and css destination(css files)
                .pipe(minifyCss())//minify css
                .pipe(gulp.dest(cssDest));//save minified css in destination directory 
        });

Js task

gulp.task('jsTask', function() {
            return gulp.src(jsSrc)
                .pipe(newer(jsDest))//compares the js source and js destination(js files)
                .pipe(uglify())//minify js
                .pipe(gulp.dest(jsDest));//save minified js in destination directory 
        });

Third step:(define custom watch)

You should have a watch task which watches your source directories(cssSrc and jsSrc) and calls its related task.

gulp.task('custom', function() {//Watch task
            gulp.watch(cssSrc, ['cssTask']);//watch your css source and call css task
            gulp.watch(jsSrc, ['jsTask']);//watch your js source and call js task
        });

Fourth step:(run custom watch)

Finally, you must run the custom task by gulp custom.

Conclusion:

Every time, when file is added to the source directory. Gulp will minify the file and store it in destination directory. This is tested locally and it works perfectly.

Completed Gulp file

var gulp = require('gulp');
var elixir = require('laravel-elixir');
var newer = require('gulp-newer');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');

cssSrc = 'cssSrc/*.css';//Your css source directory
cssDest = 'cssDest';//Your css destination directory

jsSrc = 'jsSrc/*.js';//Your js source directory
jsDest = 'jsDest';//Your js destination directory


gulp.task('cssTask', function() {
    return gulp.src(cssSrc)
        .pipe(newer(cssDest))//compares the css source and css destination(css files)
        .pipe(minifyCss())//minify css
        .pipe(gulp.dest(cssDest));//save minified css in destination directory 
});

gulp.task('jsTask', function() {
    return gulp.src(jsSrc)
        .pipe(newer(jsDest))//compares the js source and js destination(js files)
        .pipe(uglify())//minify js
        .pipe(gulp.dest(jsDest));//save minified js in destination directory 
});

gulp.task('custom', function() {//Watch task
    gulp.watch(cssSrc, ['cssTask']);//watch your css source and call css task
    gulp.watch(jsSrc, ['jsTask']);//watch your js source and call js task
});

Edited after comment:

I would like something like this: gulp custom srcFile destFile.

For that situation, you need to install new plugin which is called yargs.

Installation:

You can install yargs by npm install yargs --save-dev and then you have to pass source directory and destination directory when custom task is called.

gulp custom  --cssSrc=cssSource --cssDest=cssDestination --jsSrc=jsSource --jsDest=jsDestination

For example:

gulp custom  --cssSrc=cssSrc/*.css --cssDest=cssDest --jsSrc=jsSrc/*.js --jsDest=jsDest

The completed Gulp file:

var gulp = require('gulp');
var elixir = require('laravel-elixir');
var newer = require('gulp-newer');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var argv = require('yargs').argv;

cssSrc = argv.cssSrc;
cssDest = argv.cssDest;

jsSrc = argv.jsSrc;
jsDest = argv.jsDest;



gulp.task('cssTask', function() {
    return gulp.src(cssSrc)
        .pipe(newer(cssDest))
        .pipe(minifyCss())
        .pipe(gulp.dest(cssDest));
});

gulp.task('jsTask', function() {
    return gulp.src(jsSrc)
        .pipe(newer(jsDest))
        .pipe(uglify())
        .pipe(gulp.dest(jsDest));
});

gulp.task('custom', function() {
    gulp.watch(cssSrc, ['cssTask']);
    gulp.watch(jsSrc, ['jsTask']);
});

Note: Every time, the source directory or destination directory is changed, gulp task must be called again.