Skip to content

Instantly share code, notes, and snippets.

@deroter
Last active December 13, 2015 18:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save deroter/4957919 to your computer and use it in GitHub Desktop.
Save deroter/4957919 to your computer and use it in GitHub Desktop.
まとめ:# 黒い画面自分用まとめ

黒い画面自分用まとめ

まとめの改変。主に自分用。

最初の準備

コマンドとか使う前にまずは環境を作ろう。

Xcode

Macで環境構築をしよう。 とりあえずXcode入れないとね。 重たいからインストールには時間がかかる。 おいしいコーヒーでも飲んでまったり待つといい。

Xcode

次にXcodeのコマンドラインツールを入れましょう。

Xcodeのコマンドラインツール

Homebrew

Homebrewは色々なものを入れるときに結構使うのでこれも入れよう。

$ brew install hogehoge

こんな感じでインストールできるよ。 Homebrewのインストールは公式にかいてる。

$ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

RubyはMacだったらデフォではいってるけどWinだったらこれも用意する必要があるんだって。 あと、定期的にアプデはしておいた方がいい。その時は以下

$ brew update

Homebrew

Homebrewのインストール参考記事 初めてのHomebrewインストール.

Node.js

Node.jsはGoogleV8で動くjavaserverの事。 ローカルで動くjsのサーバー。 npmっていうパッケージモジュールを使って色々簡単インストールできる。 パッケージ入れるときにはよく使うのでとりあえず入れとけっていう感じ。 Node.js自体はnodebrewでインストールするのが楽。

Node.js nodebrew

インストールコマンドはこれ

$ curl https://raw.github.com/hokaccha/nodebrew/master/nodebrew | perl - setup

Node.jsのオンラインマニュアルがあるのでこれを読んでおこう。

Nodeビギナーズブック

コマンド

Macの場合はターミナルを使おう。 アプリケーションのユーティリティの中にある。 いちいちそっちから探すの面倒だわって場合はDocに入れよう。

ターミナルは色変えて自分好みに変えるとかすると愛着がわいていい感じ。 まずは見た目からはいろう。

変更方法はブログに書いた

ターミナルの見た目を変えてモチベーションアップをしてみてはいかがですか?

初心者の場合分からないシリーズその1

コマンドの記述があるときによく先頭に$がついてるけど、コピペするときこれはいらないので注意。

コマンド一覧

$ cd

ディレクトリ間を移動する時に使う。 使用例

$ cd Desktop

$ mkdir

ディレクトリを作る 使用例

$ mkdir testdir

補足 

$ mkdir -m 755 testdir 

でtestdirのパーミッションを755にできるよ! umaskでも同様の事は可能。

$ umask

umask を設定するには、

$ umask 022

などとする。作成したファイルを誰にも見せたくなかったら、

$ umask 066

とすればいいし、誰にでも読み書きしてほしかったら

$ umask 000

とすればいい(もちろんお勧めはしない)。

$ mv

ディレクトリ名を変更する時に使う。 使用例

$ mv test tttest

$ cp

コピー 使用例

$ cp -r test testtt

$ cat

ファイルの中身を見る。 使用例

$ cat index.html

$ less

ファイルの中身を見る。 使用例

$ less index.html

$ q

動作を止めさせる場合。 使用例

$ q

$ rm

$ rm 

削除しちゃうよ

$ pushd $popd

$ pushd $popd

pushdで移動してpopdで元の場所に戻る。2つセットで使う。よくディレクトリを移動する場合に便利

$ alias

$ alias

短縮コマンドの登録。めんどくさい長いやつとかを短くしとくと便利かも。

$ top

$ top

マシンの稼働状況チェック。メモリの使用率とか。 なんかやってる感すごくでるのでオススメ。

$ df

$ df

ディスクの使用率チェック

$ netstat

$ netstat

ネットワーク統計とかのチェック

$ |more $ |ress

$ |more $ |ress

長いやつを小分けして見る

$ date

$ date

今の日付

&&

&&

繋げて指示する場合

使用例

$ cd Desktop && mkdir testdir

$ sudo

$ sudo

admin権限の付与

$ sudo -s

$ sudo -s

admin権限をずっと付与

$ kill

$ kill

プロセス、ジョブの強制終了

ツール系

GUI

Livereload

ブラウザの自動リロードツール。GUIで有料。まずはこれを使い始めておくというのでもいいかも

Livereload

codekit

codekit

Hammer

Hammer パッケージ。Auto Reloadとsassとか

Anvil

ローカルファイルをサーバーのように動作させるGUI。 80番ポート使うので注意。

Anvil

Jetpack

Jetpack

Wordpress用パッケージ。実際どうつかうんやろうか。まだ勉強中

CUI

Compass

Compass

参考URL CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。

$ gem install compass

Bower

Twitterの作ってるパッケージ管理。bootstrapとかJqueryの最新版が落とせて便利。 Bower Bower components

$ npm install bower -g

$ bower install bootstrap

GRUNT

Grunt is a task-based command line build tool for JavaScript projects

GRUNT

$ npm install -g grunt

roots

roots

パッケージ。roots is a toolbox for building simple, beautiful, and efficient products for the web.

$ npm install roots -g

install

$ roots new name

creates a new project in the current directory called name

$ roots compile

compiles, minifies, and compresses the project to the public folder

$ roots watch

compiles the project, opens it on a local server, watches files for change, and live reloads

$ roots update

installs a new version of roots if there is one

$ roots js

wrapper for bower

Brunch

A lightweight approach to building HTML5 applications with an emphasis on elegance and simplicity.

Brunch

$ npm install -g brunch

YEOMAN

Yeoman is a robust and opinionated set of tools, libraries, and a workflow that can help developers quickly build beautiful, compelling web apps.

YEOMAN

$ $ curl -L get.yeoman.io | bash

CSS Preprosesser

Sass

Sass

$ gem install sass

$ sass style.scss styale.css

LESS

LESS

$  npm install -g less

$ lessc styles.less styles.css

stylus

stylus

$ npm install stylus

Styleguide

styledocco

styledocco

$ npm install -fg styledocco

参考URL コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する「styleDocco」の導入とgrunt.jsでの自動化のメモ

text

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment