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ファイル設定
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がめちゃくちゃダサいんだけどいい書き方ないだろうか・・・イケてる書き方あったら教えてください・・・