0

我正在尝试一种方法来分别为每个页面运行 gulp。每个页面都有它的 gulp 文件，您只能使用 $ gulp --file=name 为一个页面 gulp 这些 gulpfile 存储在 /gulp 下所以我的主要 gulpfile.js 具有以下内容：

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

});

和我的 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));
    });

});

我的问题是，每次我吞下一个页面时，public/build/rev-manifest.js 都会被覆盖。

$ gulp --file=home 之后的 rev-manifest.js

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

$ gulp --file=about 之后的 rev-manifest.js

{
  "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"
}
4

1 回答 1

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');
}
于 2016-11-23T09:09:20.820 回答