Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Laravel ElixirでCSSをビルドする際に出力ファイル名を変更する

More than 5 years have passed since last update.

変更方法

gulpfile.js
elixir.config.cssOutput = 'public/css/mycss.css';

これで出力ファイル名がmycss.cssになります。(デフォルトだと常にapp.cssになる)

Laravel Elixir、一体何者なんだ…

Laravel用のGulpタスクが使える奴みたいな認識.
(´・ω・)っLaravel Elixir - Laravel - The PHP Framework For Web Artisans

Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Laravel application

だいたいあってる.なお,Erlang VM上で動くElixirとはちっとも関係がない.

メモ:ソースコードを追う

  • 上の方法を見つけるためにコードを読んだので、理解したところまで流れのメモ。
  • 中途半端な理解で書いているので本当にメモです。

コンパイル実行

SCSSからCSSへのコンパイル処理の流れをみていこう。コンパイルはSass.jsにおいて、elixir.extend('sass', addSassTask)が呼び出されるあたりから始まるっぽい(これを呼び出しているのはどこ?)。

Sass.js
var compile = require('./commands/CompileCSS');

var addSassTask = function (src, output, options, useRuby) {
    return compile({
        compiler: 'Sass',
        plugin: useRuby ? 'gulp-ruby-sass' : 'sass',
        pluginOptions: buildOptions(options, useRuby),
        src: src,
        output: output || elixir.config.cssOutput,
        search: '**/*.+(sass|scss)'
    });
};

elixir.extend('sass', addSassTask);
elixir.extend('rubySass', function (src, output, options) {
    return addSassTask(src, output, options, true);
});

addSassTaskの実態はcompile()に引数の配列を渡した戻り値である。compile()自体はnode_modules/laravel-elixir/ingredients/commands/CompileCSS.jsからロードされているので実装を見に行く。

参考:Extend()の定義

node_modules/laravel-elixir/index.js
Elixir.extend = function(name, callback) {
    Elixir.config[name] = callback;
};

オプションの保存

これがcompile()の実装である。

CompileCSS.js
module.exports = function(options) {
    var name = options.compiler.toLowerCase();
    var dir = config.assetsDir + name;
    var watchPath = dir + '/' + options.search;

    config.saveTask('compile' + name, { // オプションなどを保存している
        src: utilities.buildGulpSrc(options.src, dir, options.search),
        options: options
    });

    return buildTask(name, watchPath);
};

まず、compilerの名前をキーにして、与えられた先ほど与えた引数(options)などを保存していることがわかる。この関数の実装は次の通り。

Config.js
config.saveTask = function (key, data) {
    this.collections[key] = this.collections[key] || [];

    this.collections[key].push(data);
}

次に、与えられた引数からディレクトリのpathやファイル名を取得し、buildTask()を呼び出して返している。結局、これが先のelixir.extend()のコールバック関数となっている。
ではbuildTask()はどこで定義されているのか。

ファイル名の決定

buildTask()はConfig.jsで次のように定義されている。

CompileCSS.js
var buildTask = function(name, watchPath) {
// 略
    var destination = utilities.parse(options.output); // 与えられたpathをパースする
    // 略
    return triggerCompiler(data.src, options)
    // 略
    .pipe(plugins.concat(destination.name || 'app.css')) //ファイル名を決める(64行目)
// 略
}

実装をみると、ここでdestination.nameがどうやら生成するcssのファイル名になるようだ。すなわち、cssのファイル名はoptions.outputに格納されるpathの名前と同一になる。
この変数はoutput: output || elixir.config.cssOutputを格納している。冒頭での呼び出し処理elixir.extend('sass', addSassTask)においてはaddSassTaskに引数は渡されていないため、options.outputにはelixir.config.cssOutputのデフォルト値が入るはずだ。デフォルト値はapp.cssのはず。

elixir.config.cssOutputのデフォルト値

elixir.configのデフォルト値はnode_modules/laravel-elixir/Config.jsに定義されている。

Config.js
var config = {
    production: !!util.env.production,
    srcDir: 'app',
    publicDir: 'public',
    assetsDir: 'resources/assets/',
    cssOutput: 'public/css', // ←ここ
    jsOutput: 'public/js',
    sourcemaps: !util.env.production,
    autoprefix: true,
    tasks: [],
    collections: [],
    watchers: {default: {}},
    babelOptions: {
        stage: 2,
        compact: false
    },
    autoprefixerOptions: {
        browsers: ['last 2 versions'],
        cascade: false
    }
};

elixir.config.cssOutputの値を見ると、生成先のディレクトリのpathが指定されている。
前節で見たようにファイル名はplugins.concat(destination.name || 'app.css')という処理で決定される。ファイル名が存在しなければdestination.nameはfalseとなるため、デフォルト値app.cssが生成されるcssのファイル名となる。

さて、ファイル名を変更したければ、ここのcssOutputpath/to/mycss.cssになるように変えれば良い。このためには自分の使うgulpfileに次の一文を加えればよい。

gulpfile.js
elixir.config.cssOutput = 'public/css/mycss.css';

これでpublic/css以下にmycss.cssが出力される。

コード解読方法

実際のコード解読はgrepでCompileCss.jsのapp.cssを発見してから、ファイル名はmyapp.scssなのにapp.cssになるということは、そもそもoptions.outputの終端は**.scssのような形になっていないはず。と予想を立てて呼び出し元を逆引きしていった。

kadoyau
最近はもっぱらScrapboxにプログラミングの記事を書いています
https://scrapbox.io/kadoyau
dwango
Born in the net, Connected by the net.
https://dwango.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away