備忘録

忘れそうなこと色々

react-jade-loaderめも

使ってみてるんだけど細かいくせがあるみたいで微妙にハマる
というかjadeじゃなくてpugでやってるから違うのかも

これは普通に出る

img(src=hensu)

divに入っちゃう

p!= hensu
<p><div>ぴよぴよ</div></p>

普通に出来る

p= hensu
<p>ぴよぴよ</p>

divに入っちゃう

p(class=class_name)= hensu
<p class="piyo"><div>ぴよぴよ</div></p>

↑の対処

p(class=class_name)
  span= hensu
<p class="piyo"><span>ぴよぴよ</span></p>

やりづらあ

あと、includeで読み込むファイルは.jadeにしないと文字列として扱われる上に<>使えないので注意。 (.pugをincludeしててドハマりした)

【Laravel elixir + Webpack + React + Pug】環境構築メモ

あんまり使う機会がなかったReactさんですがガツガツ書き換えあるページを作ることになったのでやっとこさ触ってみる。
Laravel先輩使うのでどうせならelixirで動かしたいなぁ…あとJSX覚えるの絶対嫌だなぁ…pug(jade)のままでいきたいなぁ…
ということで環境作ってみる。


前回の記事(laravel 5.3 gulp環境構築メモ - 備忘録)で作ったelixir環境に追加していきます。


1)WebpackでReactを使えるようにする

npm install --save-dev react
npm install --save-dev react-dom
npm install --save-dev laravel-elixir-webpack-react


gulupfile.js

require('laravel-elixir-webpack-react');




2)Webpack&ReactにPug(Jade)を読み込めるようにする

npm install --save-dev jade-react-loader

簡単すぎる、、、

実際に書いてみる

index.js

window.onload = function() {
var React = require('react');
var ReactDOM = require('react-dom');
var template = require('jade-react!../../pug/_template_react/template.pug');
	var JadeComponent = React.createClass({
		render: function() {
			return template({foo: 'bar'})
		}
	});
	ReactDOM.render(React.createElement(JadeComponent), document.getElementById('container'));
}



template.pug

h1!= foo


これでこんな感じで表示される

<div id="container">
  <h1>bar</h1>
</div>


とっても簡単…



ただ、ここの書き方が気持ち悪いのどうにかならんかな…

var template = require('jade-react!../../pug/_template_react/template.pug');

node_modules/laravel-elixir-webpack-react/main.js編集でどうにかなりそうだけど眠いのでまた今度

【Laravel elixir + Webpack + React + Pug】環境構築メモ

あんまり使う機会がなかったReactさんですがガツガツ書き換えあるページを作ることになったのでやっとこさ触ってみる。
Laravel先輩使うのでどうせならelixirで動かしたいなぁ…あとJSX覚えるの絶対嫌だなぁ…pug(jade)のままでいきたいなぁ…
ということで環境作ってみる。


前回の記事(laravel 5.3 gulp環境構築メモ - 備忘録)で作ったelixir環境に追加していきます。


1)WebpackでReactを使えるようにする

npm install --save-dev react
npm install --save-dev react-dom
npm install --save-dev laravel-elixir-webpack-react


gulupfile.js

require('laravel-elixir-webpack-react');




2)Webpack&ReactにPug(Jade)を読み込めるようにする

npm install --save-dev jade-react-loader

簡単すぎる、、、

実際に書いてみる

index.js

window.onload = function() {
var React = require('react');
var ReactDOM = require('react-dom');
var template = require('jade-react!../../pug/_template_react/template.pug');
	var JadeComponent = React.createClass({
		render: function() {
			return template({foo: 'bar'})
		}
	});
	ReactDOM.render(React.createElement(JadeComponent), document.getElementById('container'));
}



template.pug

h1!= foo


これでこんな感じで表示される

<div id="container">
  <h1>bar</h1>
</div>


とっても簡単…



ただ、ここの書き方が気持ち悪いのどうにかならんかな…

var template = require('jade-react!../../pug/_template_react/template.pug');

node_modules/laravel-elixir-webpack-react/main.js編集でどうにかなりそうだけど眠いのでまた今度

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

laravel 5.3メモ

作成ディレクトリの親ディレクトリに移動して以下コマンドぽーいで最新Verが落ちてくる

composer create-project --prefer-dist laravel/laravel {ディレクトリ名}

 

 

■mysql設定

 

mysqlに入る

mysql -u root

 

データベース作成

create database {データベース名};

 

権限設定

http://www.dbonline.jp/mysql/user/index6.html

とりあえず

grant all on {データベース名}.* to {ユーザ名}@localhost identified by '{パスワード}';

 

 

.envファイル設定

 

このあたりを設定

DB_DATABASE
DB_USERNAME
DB_PASSWORD

 

 

ブラウザで確認

php artisan serve --host {ローカルのIP} --port {ポート}

(gulpのtaskに入れたほうがいいかも)

 

ーー追記

 gitとかからcloneしてきた時はvendorが入ってないので

composer updateしてから.envファイル設定

参考:Laravelのプロジェクトをgit cloneしたときの手順 | vdeep

Windows gulp環境構築メモ

ざっくり初期設定

・rubyインストール

・node.jsインストール

・npm install -g gulp -> グローバルにgulpインストール

・workディレクトリ移動

・npm init -> package.json作成

あとはpackage.jsonとgulpfile.js置いたり編集したりして

npm install

gulp

でオッケー

rubyもnodeもインストーラでインストールして、最初はパスも通ってたのに再起動したら環境変数が消えてハマった。

手作業で設定しなおすはめに・・・

ユーザ環境変数

NODE_PATH : node.exeがあるディレクトリを指定

システム環境変数のPath

・node.exeがあるディレクトリ

・rubyインストールしたディレクトリ¥bin

・ユーザ¥ユーザ名¥AppData¥Roaming¥npm

設定ファイルは最終的にこんな感じ

package.json

{
	"name": "chorolling",
	"version": "1.0.0",
	"description": "chorolling",
	"dependencies": {},
	"devDependencies": {
		"babel-loader": "^6.2.5",
		"babel-preset-es2015": "^6.13.2",
		"babel-preset-es2015-loose": "^7.0.0",
		"babel-preset-react": "^6.11.1",
		"gulp": "^3.9.1",
		"gulp-autoprefixer": "^3.1.1",
		"gulp-notify": "^2.2.0",
		"gulp-plumber": "^1.1.0",
		"gulp-pug": "^3.0.4",
		"gulp-stylus": "^2.5.0",
		"gulp-watch": "^4.3.9",
		"gulp-webpack": "^1.5.0"
	}
}

gulpfile.js

var conf = require('./config.js');
var gulp = require('gulp');
var watch = require('gulp-watch');
var pug = require('gulp-pug');
var stylus = require('gulp-stylus');
var nib = require('nib');
var autoprefixer = require('gulp-autoprefixer');
var webpack = require('gulp-webpack');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var fs = require('fs');
var path = require('path');


// ----------------------------------------- PUG
gulp.task('pug', () => {
	gulp.src([
		conf.path.src+'[^_]*.pug',
		conf.path.src+'[^_]**/[^_]*.pug',
		conf.path.src+'[^_]**/[^_]**/[^_]*.pug',
		conf.path.src+'[^_]**/[^_]**/[^_]**/[^_]*.pug'
	])
	.pipe(plumber({
	errorrrorHandler: notify.onError("Error: <%= error.message %>")
	}))
	.pipe(pug({
		pretty: true
	}))
	.pipe(gulp.dest(conf.path.dest))
	.pipe(notify('Complete: <%= file.relative %>'))
});

// ----------------------------------------- STYLUS
gulp.task('stylus', () => {
	gulp.src([
		conf.path.src+'[^_]*.styl',
		conf.path.src+'[^_]**/[^_]*.styl',
		conf.path.src+'[^_]**/[^_]**/[^_]*.styl',
		conf.path.src+'[^_]**/[^_]**/[^_]**/[^_]*.styl'
	])
	.pipe(plumber({
		errorHandler: notify.onError("Error: <%= error.message %>")
	}))
	.pipe(stylus({
		use: [nib()],
		compress: true,
		linenos: false
	}))
	.pipe(autoprefixer({
		browsers: [
			'last 2 versions',
			'ie >= 9',
			'iOS >= 7',
			'Android >= 2'
		],
		cascade: false
	}))
	.pipe(gulp.dest(conf.path.dest))
	.pipe(notify('Complete: <%= file.relative %>'))
});

// ----------------------------------------- WEBPACK

(() => {
	var webpack_conf = {
		cache: true,
		entry: {},
		output: {
			'filename': '[name]'
		},
		resolve: {
			extensions: ['', '.js'],
		root: [
			path.resolve(conf.path.src + '**/js/class/'),
		],
		modulesDirectories: ['node_modules'],
			alias: {
				'node': path.resolve('node_modules/')
			}
		},
		module: {
			loaders: [{
				test: /.js$/,
				exclude: /(node_modules|bower_components)/,
				loader: path.resolve('node_modules/babel-loader'),
				query:{
					presets: [path.resolve('node_modules/babel-preset-react'), 
					path.resolve('node_modules/babel-preset-es2015'), 
					path.resolve('node_modules/babel-preset-es2015-loose')]
				}
			}]
		}
	};

	setEntryPoint(conf.path.src, webpack_conf['entry'], conf.path.src);

	gulp.task('webpack', function() {
		gulp.src([
			conf.path.src+'[^_]*.js',
			conf.path.src+'[^_]**/[^_]*.js',
			conf.path.src+'[^_]**/[^_]**/[^_]*.js',
			conf.path.src+'[^_]**/[^_]**/[^_]**/[^_]*.js'
		])
		.pipe(plumber({
			errorHandler: notify.onError("Error: <%= error.message %>")
		}))
		.pipe(webpack(webpack_conf))
		.pipe(gulp.dest(conf.path.dest))
		.pipe(notify('Complete: <%= file.relative %>'))
	});
})();

function setEntryPoint(_path, _arr, _work) {
	fs.readdir(_path, function(e, f) {
		if (e) {
			throw e;
		}
		for (var key in f) {
			if (fs.statSync(_path + f[key]).isDirectory() && 
				!f[key].match(/class/) && !f[key].match(/_data/)) {
				setEntryPoint(_path + f[key] + '/', _arr, _work);
			} else if(f[key].match(/.js$/)) {
				_arr[(_path + f[key]).replace(_work, '')] = _path + f[key];
			}
		}
	});
}


gulp.task('watch', () => {
	watch(conf.path.src+'[^_]**/[^_]*.styl', () => {
		gulp.start(['stylus']);
	});

	watch(conf.path.src+'[^_]**/[^_]*.pug', () => {
		gulp.start(['pug']);
	});

	watch(conf.path.src+'[^_]**/[^_]*.js', () => {
		gulp.start(['webpack']);
	});
})

gulp.task('default', ['watch']);


config.js

module.exports = {
	'path': {
		'src': './_src/',
		'dest': '../'
	}
}

本当はtaskごとにjsファイル分けて読み込んだほうが管理しやすいんだろうけど、一刻もはやく始めたかったのでベタ書き。

webpackの設定ももうちょっと良い書き方があると思うけど一旦待機。一応動くし。

せめてconfigくらいは分けようと思って別ファイル用意したけど結局パスしか書いてない。えへへ。

あとワイルドカードが苦手すぎてsrcがめちゃくちゃダサいんだけどいい書き方ないだろうか・・・イケてる書き方あったら教えてください・・・