2016-11-23 208 views
0

我正在尝试一种方法来分别为每个页面运行gulp。 每个页面都有其一饮而尽文件,您可以吞掉只能用于$一饮而尽--file页=名称 这些gulpfiles那么我的主要gulpfile.js保存在/一饮而尽有以下:Elixir gulp版本控制 - 允许rev-manifest.js合并而不是ovewrites

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'); 
} 

所以在我的/ gulp目录我的网站上每个页面都有gulpfile扩展名。 home.js,about.js,contact.js,login.js等。

典型 - 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", 
    ]); 

}); 

和我一饮而尽/灵药-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)); 
    }); 

}); 

我的问题是,每次我吞下单页时,public/build/rev-manifest.js都会被写过。

$一饮而尽--file后REV-manifest.js =家庭

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

REV-manifest.js $一饮而尽--file =约

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

如何合并后的每修改如下?

{ 
    "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" 
} 
+0

我只是避免吞噬每一页每一次,因为它的冗余和耗时,如果你有很多页面吞噬每一次。我也认为它的整洁和可维护性来区分你的顾虑。 – TechyTimo

回答

0

想出了一个解决方案 - 做所有的版本在主gulpfile.js。 这样,每个页面每次只获取其版本(但未编译)的资产。

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'); 
} 
相关问题