あじちゃんの備忘録。

〜ここはメモ帳です

display:none の時のimgサイズ

CSS HTML

へーと思ったのでメモ。

display:none の時のimgサイズは 0*0pix になる

f:id:azix:20180619150505p:plain
表示中のサイズ

f:id:azix:20180619150953p:plain
非表示中のサイズは0になる


ソースはこんな感じ

<body>
    <div class="wrap">
        <button id="item">さーばる</button>
        <button id="reset" style="display: none;">もどす</button>
        <div style="margin-top: 1em;">
            <img alt="さーばる" src="animal_serval.png" style="display: none; height: 30%;">
        </div>
    </div>
    <script>
        $('#item').click(function () {
            $(this).hide();
            $('img').show();
            $('#reset').show();
        });
        $('#reset').click(function () {
            $(this).hide();
            $('img').hide();
            $('#item').show();
        });
    </script>
</body>

【未解決】laravelでnpm run devを実行すると「cross-env: not found」というエラーが出る.

laravel mix laravel

参考にしたサイト

実行したコマンド | 結果

$ npm cache clean
$ rm -Rf ~/.npm
$ rm -Rf ./node_modules
$ npm -g install cross-env cross-spawn

$ npm install --no-bin-links
    # npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

$ npm install cross-spawn
    # npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none was installed.

$ npm i ajv
$npm install --no-bin-links
$ npm run dev 

> @ dev /Users/username/htdocs/Re_DarekaDiary
> npm run development


> @ development /Users/username/htdocs/Re_DarekaDiary
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

internal/child_process.js:328
    throw errnoException(err, 'spawn');
    ^

Error: spawn EACCES
    at exports._errnoException (util.js:1020:11)
    at ChildProcess.spawn (internal/child_process.js:328:11)
    at Object.exports.spawn (child_process.js:369:9)
    at spawn (/usr/local/lib/node_modules/cross-spawn/index.js:12:24)
    at crossEnv (/usr/local/lib/node_modules/cross-env/dist/index.js:32:38)
    at Object.<anonymous> (/usr/local/lib/node_modules/cross-env/dist/bin/cross-env.js:6:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)

npm ERR! Darwin 17.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "development"
npm ERR! node v6.11.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ development script 'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/username/htdocs/Re_DarekaDiary/npm-debug.log

npm ERR! Darwin 17.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v6.11.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ dev script 'npm run development'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run development
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/username/htdocs/Re_DarekaDiary/npm-debug.log

MacでPATHを通す

laravel mac

😌💬　laravelのinstall時に、端末でlaravelコマンドが実行できるようにcomposer関連のパスを通す必要があった.

.bash_profileに通したいPATHを記入する

ホームディレクトリ直下にある設定ファイル .bash_profile がすべてのPATHを統括しているらしい.

  • ターミナルで実行
$ vi ~/.bash_profile
  • 目的のパスを記入
# ←これでコメントにできるのでパスの説明をつけるとわかりやすい
export PATH=$PATH:通したいPATH

今回の目的はlaravelを使えるようにすることなので、 .composer/vendor/bin を通す.
パスの出典：Laravel 4.2 Laravelクイックスタート
以下のように書いた

#laravel
export PATH=$PATH:~/.composer/vendor/bin

.bash_profileを更新

そのままでは反映されないため、ターミナルを開き直すか、sourceコマンドで更新する.

$ source ~/.bash_profile

PATHの確認

パスが通ったかどうかを確認する. ↑の更新をしていない場合反映されていない情報が出てくるので注意.

$ printenv PATH

実行すると[:]で区切られたパス達がゾゾゾっと出てくる

/usr/local/Cellar/git/2.17.0/bin:/Users/username/.pyenv/shims:/Users/username/.pyenv/bin:/usr/local/Cellar/git/2.17.0/bin:/Users/username/.pyenv/shims:/Users/username/.pyenv/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/username/.composer/vendor/bin

😌💬　後はただlaravel newコマンドで、指定したディレクトリーに真新しいLaravelプロジェクトを作ることができる!!