laravel 5.3 gulp環境構築メモ

elixirとかいうのが最初から入ってるので使ってみる。

使いたいのはpug, stylus(autoprefixer), webpack(babel)。

autoprefixer & webpack & babelは標準で入ってるのでそのまま使いつつ、stylus, pugもelixirで用意されてるが最初はpackage.jsonに入ってないので別途インストール。

■npm install


とりあえず全部入れてみる。

npm install


stylus追加

npm install --save-dev laravel-elixir-stylus


pug追加

npm install --save-dev laravel-elixir-pug



■設定



elixirの初期設定は↓にある。gulpfile.jsで設定を上書く。

node_modules/laravel-elixir/dist/Config.js



gulpfile.jsはこんな感じになった。

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

require('laravel-elixir-vue');
require('laravel-elixir-pug');


elixir.config.sourcemaps = true;
elixir.config.css.autoprefix.options = {
	browsers: [
		'last 2 versions',
		'ie >= 9',
		'iOS >= 7',
		'Android >= 2'
	],
	cascade: false
};

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(mix => {
	mix.stylus('index.styl', 'public/css/index.css')
	.stylus('edit.styl', 'public/css/edit.css')

	.webpack('pages/[^_]*.js', 'public/js/index.js')
	.webpack('edit/[^_]*.js', 'public/js/edit.js')
	.webpack('lib.js', 'public/js/lib.js')
	.webpack('common.js', 'public/js/common.js')

	.pug({
			blade: true,
			src: 'resources/pug/',
			dest: 'resources/views/'
	});
});

ブログのイメージで公開ページと管理画面で分けました。
jsはjqueryとかloadashをlib.jsに、共通で使うのはcommon.jsで更にわけた。


pugはviews下に出力。デフォルトだとsrcがassets下になってて気持ち悪かったので変えてみる。
bladeをtrueにすると*.blade.phpで吐き出してくれる。


参考
https://laravel.com/docs/5.3/elixir