Elixir gulp versioning - allow rev-manifest.js merges instead of ovewrites

Question

I am attempting a way to run gulp for every page separately. Every page has its gulp file and you can gulp for a page only with $ gulp --file=name These gulpfiles are stored under /gulp So my main gulpfile.js has the following:

require('./gulp/elixir-extensions');
var args = require("yargs");
var file = args.argv.file;

if(file){
    var path = './gulp/'+file;
    require('./gulp/'+file);
}
else{
    console.log('Pass the file: gulp --file:name');
}

So in my /gulp directory I have gulpfile extensions for every page on my site. home.js, about.js, contact.js, login.js etc..

Typically - home.js

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix

    /**
    * Combine home scripts
    */
    .scripts(...)

    /**
    * Combine home CSS files
    */
    .styles(...)

    /**
    * Remove unused css selectors
    */
    .uncss(...)

    /**
    * Remove redundant/repeated css declarations
    */
    .purge(...)

    /**
    * Apply version control
    */
    .version([
        "public/css/home.css",
        "public/js/home.js",
    ]);

});

and my gulp/elixir-extensions.js :

const gulp = require('gulp');
const Elixir = require('laravel-elixir');
const Task = Elixir.Task;
const uncss = require('gulp-uncss');
const purge = require('gulp-css-purge');
const rename = require('gulp-rename');

Elixir.extend('uncss', function(file, link, out, renamed) {

    new Task('uncss', function() {
        return gulp.src(file)
        .pipe(uncss({
            html: [link]
        }))
        .pipe(rename(renamed))
        .pipe(gulp.dest(out));
    });

});

Elixir.extend('purge', function(css, out, renamed) {

    new Task('purge', function() {
        return gulp.src(css)
        .pipe(purge())
        .pipe(rename(renamed))
        .pipe(gulp.dest(out));
    });

});

My problem is that the public/build/rev-manifest.js gets ovewritten every time I gulp for a single page.

rev-manifest.js after $ gulp --file=home

{
  "css/home.css": "css/home-0a3d3926fc.css",
  "js/home.js": "js/home-6df29810e8.js"
}

rev-manifest.js after $ gulp --file=about

{
  "css/about.css": "css/about-fc0a5d3926.css",
  "js/about.js": "js/about-f0921ds0e8.js"
}

How can I merge every revision like the following?

{
  "css/home.css": "css/home-0a3d3926fc.css",
  "js/home.js": "js/home-6df29810e8.js",
  "css/about.css": "css/about-fc0a5d3926.css",
  "js/about.js": "js/about-f0921ds0e8.js"
}

I am just avoiding gulping every page every time since its redundant and time-consuming if you have very many pages to gulp through every time. I also think its neat and more maintainable to separate your concerns. — Timothy, Nov 23 '16 at 07:07

score 0 · Answer 1 · answered Nov 23 '16 at 09:09

Figured out a solution - do all the versioning in the main gulpfile.js. This way, every page gets its assets only versioned (but not compiled) every time.

require('./gulp/elixir-extensions');

var elixir = require('laravel-elixir');
var args = require("yargs");
var file = args.argv.file;

if(file){

    var filepath = './gulp/'+file;

    require('./gulp/'+file);

    elixir(function(mix) {
        mix
        /**
        * Apply version control to all assets
        */
        .version([
            "public/css/auth.css",
            "public/css/backend.css",
            "public/js/backend.js",
            "public/css/home.css",
            "public/js/home.js",
            "public/css/about.css",
            "public/js/about.js",
        ])
        // .phpUnit()
        // .compressHtml()
    });
}
else{
    console.log('Pass the file: gulp --file:name');
}

Elixir gulp versioning - allow rev-manifest.js merges instead of ovewrites

1 Answers1