Laravel minify css and js files

Question

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.

Answer 1

Requirments:

• gulp-newer
• minifyCss
• gulp-uglify

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.

Answer 2

Use the below gulp modules.

https://www.npmjs.com/package/gulp-minify-css - Minify all your css files. https://www.npmjs.com/package/gulp-concat-css - Merge all your css in to one file. https://www.npmjs.com/package/gulp-uglify - Minigy all your JS files. https://www.npmjs.com/package/gulp-sass - SASS

Refer this answer: Gulp minify multiple js files to one

Below is sample Gulp File Snippet.

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  autoprefixer = require('gulp-autoprefixer'),
  jshint = require('gulp-jshint'),
  uglify = require('gulp-uglify'),
  imagemin = require('gulp-imagemin'),
  rename = require('gulp-rename'),
  clean = require('gulp-clean'),
  concat = require('gulp-concat'),
  notify = require('gulp-notify'),
  cache = require('gulp-cache'),
  livereload = require('gulp-livereload'),
  lr = require('tiny-lr'),
  server = lr();

// Clean
gulp.task('clean', function() {
  return gulp.src(['css', 'js', 'img'], {
      read: false
    })
    .pipe(clean());
});


gulp.task('styles', function() {
  return gulp.src('sass/styles.scss')
    .pipe(sass({
      style: 'expanded'
    }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('css'))
    .pipe(notify({
      message: 'Styles task complete'
    }));
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
  return gulp.src('js/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('dist'))
    .pipe(rename('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});


// Watch
gulp.task('watch', function() {

  // Watch .scss files
  gulp.watch('sass/**/*.scss', ['styles']);

  // Watch .js files
  gulp.watch('js/**/*.js', ['scripts']);

  // Watch image files
  gulp.watch('img/**/*', ['images']);

  // Create LiveReload server
  var server = livereload();

  // Watch any files in dist/, reload on change
  gulp.watch(['sass/**', 'js/**', 'img/**', '*.html']).on('change', function(file) {
    server.changed(file.path);
  });

});


gulp.task('default', ['styles', 'scripts', 'watch']);

Answer 3

At first place, you need to store the content in a new file. A good place for this is resources/assets/js:

$jsContent = $request->get('js_custom_content');
file_put_contents(base_path('resources/assets/js/custom.js'), $jsContent);

Ok, once created the javascript file, you need to tell to elixir to minify the custom script:

// it will look for resources/assets/js/custom.js
// and it will compress the output to public/assets/js/custom.min.js
mix.scripts(['custom.js'], 'public/assets/js/custom.min.js');

Optionally, you can version it. That means that everytime the script's content change, gulp will generate a new version in order to avoid browser's cache issues:

mix.version(['public/assets/js/custom.min.js']);

Finally, load the script in your view:

 <script type="text/javascript" src="{{ url('assets/js/custom.min.js')) }}"></script>   

Or with version:

<script type="text/javascript" src="{{ url(elixir('assets/js/custom.min.js')) }}"></script>