変更方法
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)が呼び出されるあたりから始まるっぽい（これを呼び出しているのはどこ？）。
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()の定義
Elixir.extend = function(name, callback) {
Elixir.config[name] = callback;
};
オプションの保存
これがcompile()の実装である。
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.saveTask = function (key, data) {
this.collections[key] = this.collections[key] || [];
this.collections[key].push(data);
}
次に、与えられた引数からディレクトリのpathやファイル名を取得し、buildTask()を呼び出して返している。結局、これが先のelixir.extend()のコールバック関数となっている。
ではbuildTask()はどこで定義されているのか。
ファイル名の決定
buildTask()はConfig.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に定義されている。
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のファイル名となる。
さて、ファイル名を変更したければ、ここのcssOutputをpath/to/mycss.cssになるように変えれば良い。このためには自分の使うgulpfileに次の一文を加えればよい。
elixir.config.cssOutput = 'public/css/mycss.css';
これでpublic/css以下にmycss.cssが出力される。
コード解読方法
実際のコード解読はgrepでCompileCss.jsのapp.cssを発見してから、ファイル名はmyapp.scssなのにapp.cssになるということは、そもそもoptions.outputの終端は**.scssのような形になっていないはず。と予想を立てて呼び出し元を逆引きしていった。
