みかづきブログ その3

3ヶ月つづけてみました。

node-sassをつかってscssをcssにコンパイルする

自分の関わった過去のプロジェクトを見返すと、grantを使っていたり、gulpをつかっていたり、webpackを使っていたりして、ウェブフロントエンドの開発環境の移り変わりの早さを感じます。

正直最近は環境構築が面倒なので、JavaScriptもHTMLも生で書いてしまうことが多いのですが、唯一SCSSのみは使い続けてまして、そして最近、過去のプロジェクトを再編集しようと思ったところ、「そういえば新しいPCにSassを入れてなかったな」と気づきました。

kimizuka.hatenablog.com


昔(2014年)の僕は、gemでsassを導入していましたが、これから入れるのはものすごく今更感がありますし、プロジェクトを引き継ぐ時に後任にも「Rubyとsassを入れてから開発してね」と言っておかないといけなくなるので、node-sassを導入することにしました。package.jsonに記載しておけば引き継ぎも用意ですし。

kimizuka.hatenablog.com

導入方法

npm install save-dev node-sass

watch方法

package.jsonと同じ階層に_scssフォルダとpublicフォルダを置き、index.cssをwatchで書き出したい場合は、

node-sass --include-path _scss _scss/index.scss public/css/index.css -w

こんな感じ、

更に圧縮までしたいなら、

node-sass --include-path _scss _scss/index.scss public/css/index.css -w --output-style compressed

これをpackage.jsonのscriptsに、

"scripts": {
    "start": "node-sass --include-path _scss _scss/index.scss public/data/css/index.css -w --output-style compressed"
  }

という感じで書いておけば、

npm start

でscssファイルを監視し、変更があった際にCSSファイルを書き出してくれます。

Macの開発環境を整える 2018 決定版

今年の3月に更新したばかりですが、開発環境に若干の変化があったためまとめ直します。
決定版と書いてありますが、あくまで自分用メモです。年に2回目なので昔のパワプロ的な命名にしてみました。

用途はフロントエンドの開発がメインで、NodeJS、Unity、iOSアプリ、Androidアプリの開発環境を整えています。
最近はAlexaスキルの開発も行なっているので、のちにAWS関連の設定を加筆するかもしれません。
前回からの決定的な違いは、Unity Hub、AndroidStudioの追加と、nodebrewからndenvへの乗り換えです。

kimizuka.hatenablog.com


変更した設定

キー入力周り
  1. 入力ソースに日本語(ひらがな)を追加
  2. ライブ変換をOFF
  3. 推測候補表示をOFF
  4. Shiftキーの動作を英字モードに変更
  5. SpotlightのショートカットをOFF
  6. 入力ソース切り替えを command + space に変更
Dock
  1. Dockを自動的に隠すように設定
Finder
  1. 新規Finderで開く場所をホームディレクトリに変更
トラックパッド
  1. その他ジェスチャの「ページ間をスワイプ」を「3本指でスワイプ」に変更
  2. その他ジェスチャの「フルスクリーンアプリケーション間をスワイプ」を「4本指でスワイプ」に変更

インストールしたアプリケーション

Google Chrome

www.google.co.jp
デフォルトブラウザに設定する。


Sublime Text3

www.sublimetext.com

{
    "margin": 2,
    "tab_size": 2,
    "translate_tabs_to_spaces": true,
    "draw_white_space": "all"
}

タブとインデントを変更。


Dropbox

www.dropbox.com


Xcode

Xcode

Xcode

  • Apple
  • 開発ツール
  • 無料


Arduino

www.arduino.cc


Go2Shell

Go2Shell

Go2Shell

  • Alice Dev Team
  • 開発ツール
  • 無料


Unity Hub

unity3d.com


Android Studio

developer.android.com


Up Studio

UP Studio

UP Studio

  • Beijing Tiertime Technology Co., Ltd.
  • ユーティリティ
  • 無料


ターミナルから導入したもの

gem (アップデート)
sudo gem update --system
Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
ndenv
brew install ndenv
echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(ndenv init -)"' >> ~/.bash_profile
exec $SHELL -l
git clone https://github.com/riywo/node-build.git $(ndenv root)/plugins/node-build
node
ndenv install v11.1.0
ndenv rehash
ndenv global v11.1.0
npm(アップデート)
npm update -g
ffmpeg
brew install ffmpeg