Group 2 Created with Sketch.

Alternative to 'gulp --production'

Submitted by meertensm - 4 years ago

This gulp extension creates a minified version from the js/css files in the rev-manifest.json and leaves the original as-is. When running the 'gulp' command, the following will happen: -The extension reads the rev-manifest.json file -For each js/css file listed in rev-manifest.json it creates a minified version and names it for example app.min.js -Extension adds the minified file to rev-manifest.json so it can be used by the php elixir function Before you can use this extension, you should install the npm minify module (npm i minify --save)

// Put this code somewhere in your gulpfile
var Task = elixir.Task;
elixir.extend('copyandminify', function() {
    new Task('copyandminify', function() {

        var json = require('./public/build/rev-manifest'),
            minify = require('minify'), 
            fs = require('fs'),
            new_json = {};

        for(var key in json){

            var file_name = json[key],
                extension = key.split('/')[0],
                minified_key = key.replace('.' + extension, '.min.' + extension),
                minified_file_name = file_name.replace('.' + extension, '.min.' + extension),
                directory = 'public/build/',
                encoding = 'utf8';

            new_json[key] = file_name;
            new_json[minified_key] = minified_file_name;

            try{
                console.log('Minifying ' + file_name);
                minify[extension](fs.readFileSync(directory + file_name, encoding), function(error, data) {
                    fs.writeFileSync(directory + minified_file_name, data);
                    console.log('Done!');
                });
            }
            catch(err){
                console.err(err.message);    
            }
        }
        try{
            fs.writeFileSync('public/build/rev-manifest.json', JSON.stringify(new_json, null, 3)); 
            console.log('Updated rev-manifest.json');
        }
        catch(err){
            console.err(err.message);    
        }

    });
});

// After calling the 'mix.version' function call 'mix.copyandminify' for example:
elixir(function(mix) {

    mix.version([
        'public/js/all.js',
        'public/js/dashboard.js',
        'public/css/all.css' 
    ]);

    mix.copyandminify();

});

// Put this function in your Helpers.php file
function enviroment_based_elixir($asset){
    if(env('APP_ENV') == 'production'){
        return elixir(strtr($asset, [
            '.css' => '.min.css',
            '.js' => '.min.js',
        ]));    
    }
    return elixir($asset);    
}

// And use it in your blade templates
<script src="{{ asset(enviroment_based_elixir('js/all.js')) }}"></script>
// Based on the enviroment you will be served with the all.js or all.min.js file!
Stats Categories Tags
« Previous Trick Next Trick »