Elixir:CSS編

Elixirを使って、LessやSassをCSSへ変換してみます。また、複数のCSSファイルの結合も試します。


Less

resources/assets/less ディレクトリ以下に、lessファイルを作成します。

// resources/assets/less/app.less

@title-color: red;

h1 {
  color: @title-color;
}

gulpfile.jsに、タスクを定義します。

// gulpfile.js

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

elixir(function(mix) {
    mix.less('app.less');  // ①
});

① の部分にタスクを定義します。
mix.less()は、引数で指定されたlessファイルをCSSに変換し、public/css/app.cssに出力します。引数で指定されたlessファイルは、resources/assets/lessにある物とみなします。

gulpコマンドを実行すると、public/css/app.css ファイルが生成されます。

gulp

app.cssと一緒に、app.css.mapというファイルも生成されます。このファイルは、ブラウザが app.cssと変換前の lessや scssファイルのマッピングを可能にするファイルです。ブラウザの開発ツールを使って、CSSのデバッグを行う時に非常に役に立ちます。

変換する lessファイルが複数ある場合は、mix.less()に配列を渡します。
また、mix.less()の第2引数を指定することで、app.cssの出力先ディレクトリを変更できます。

// gulpfile.js

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

elixir(function(mix) {
    mix.less([
        'app.less',
        'hoge.less'
    ], 'public/assets/css');
});

Sass

resources/assets/sass ディレクトリ以下に、scssファイルを作成します。

// resources/assets/sass/app.scss

$title-color: red;

h1 {
  color: $title-color;
}

gulpfile.jsに、タスクを定義します。

// gulpfile.js

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

elixir(function(mix) {
    mix.sass('app.scss');  // ①
});

① の部分にタスクを定義します。
mix.sass()は、引数で指定されたscssファイルをCSSに変換し、public/css/app.cssに出力します。引数で指定されたscssファイルは、resources/assets/sassにある物とみなします。

gulpコマンドを実行すると、public/css/app.css ファイルが生成されます。

gulp

変換する scssファイルが複数ある場合は、mix.sass()に配列を渡します。
また、mix.sass()の第2引数を指定することで、app.cssの出力先ディレクトリを変更できます。

// gulpfile.js

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

elixir(function(mix) {
    mix.sass([
        'app.scss',
        'hoge.scss'
    ], 'public/assets/css');
});

CSS

複数のCSSファイルを1つに結合することができます。

// gulpfile.js

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

elixir(function(mix) {
    mix.styles([  // ①
        'app.css',
        'hoge.css'
    ]);
});

① の部分にタスクを定義します。
mix.styles()は、引数で指定されたcssファイルを結合して、public/css/all.cssに出力します。引数で指定されたcssファイルは、resources/assets/cssにある物とみなします。

gulpコマンドを実行すると、public/css/all.css ファイルが生成されます。

gulp

また、mix.styles()の第2引数を指定することで、all.cssの出力先ディレクトリを変更できます。

// gulpfile.js

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

elixir(function(mix) {
    mix.styles([
        'app.css',
        'hoge.css'
    ], 'public/assets/css');
});

LessやSassをCSSに変換した時は、app.css というファイル名で出力されましたが、CSSファイルの結合の時は、all.css で出力されます。微妙に違うので注意してください。


その他のElixir関連記事はこちら

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中