gulpで時短 CSSを効率的に書く

Web制作において、「効率化」は重要なポイントです。
デザイナーの作業においても「CSSファイルの管理」や「ベンダープレフィックス(各ブラウザに応じたコーディング)」など、本質のデザイン以外にもやるこはたくさんあります。それらをすべて手動で行っていたのでは時間がいくらあっても足りませんし、ミスの元です。
タスクマネージャーはこれら作業を管理してくれるツールです。ここでは最もメジャーな「gulp」の導入について紹介します。
必要なもの
- Homebrew(macのパッケージ管理ソフト)
- nodebrew(nodeバージョン管理ソフト)
- node(簡単に言うとサーバサイドで動くJavaScript)
- gulp
gulpの導入方法は他にもありますが、上記が一番わかり易いかつ管理しやすい方法だと思います。
gulpをインストールするためにnodeをインストール。nodeをインストールするためにnodebrewをインストール。nodebrewをインストールするためにHomebrewをインストールする。
ちょっと面倒くさいですが、最初だけです。
目次
Homebrewをインストール
nodebrewをインストールするため、macパッケージ管理ソフトの「Homebrew」をインストールします。
Terminalで以下を入力。
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
インストールされたかどうか確認
$ brew doctor
Your system is ready to brew.と表示されればOKです。
Homebrewの各コマンドを知りたい方は下記ヘルプで参照ください。
$ brew commands
nodebrewをインストール
続いてnodebrewをインストールします。
Homebrewを使い、nodebrewをインストールする
$ brew install nodebrew
インストールされたか確認
$ nodebrew -v
バージョンが表示されればOK
nodebrew 1.0.1 Usage: nodebrew help Show this message nodebrew install <version> Download and install <version> (from binary) nodebrew compile <version> Download and install <version> (from source) nodebrew install-binary <version> Alias of `install` (For backward compatibility) nodebrew uninstall <version> Uninstall <version> nodebrew use <version> Use <version> nodebrew list List installed versions nodebrew ls Alias for `list` nodebrew ls-remote List remote versions nodebrew ls-all List remote and installed versions nodebrew alias <key> <value> Set alias nodebrew unalias <key> Remove alias nodebrew clean <version> | all Remove source file nodebrew selfupdate Update nodebrew nodebrew migrate-package <version> Install global NPM packages contained in <version> to current version nodebrew exec <version> -- <command> Execute <command> using specified <version> Example: # install nodebrew install v8.9.4 # use a specific version number nodebrew use v8.9.4
nodebrewのセットアップ
Homebrewでインストールした場合はnodebrew setupコマンド実行(セットアップしないとNode.jsインストール時にエラーが出る)
$ nodebrew setup Fetching nodebrew... Installed nodebrew in $HOME/.nodebrew ======================================== Export a path to nodebrew: export PATH=$HOME/.nodebrew/current/bin:$PATH ========================================
node.jsをインストール
続いてnode.jsをインストールします。
インストールインストールできるバージョンを調べる
$ nodebrew ls-remote
インストール可能なnode.jsのバージョンが表示されます。
v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6 v0.1.0 v0.1.1 v0.1.2 v0.1.3 v0.1.4 v0.1.5 v0.1.6 v0.1.7 v0.1.8 v0.1.9 v0.1.10 v0.1.11 v0.1.12 v0.1.13 v0.1.14 v0.1.15 v0.1.16 v0.1.17 v0.1.18 v0.1.19 v0.1.20 v0.1.21 v0.1.22 v0.1.23 v0.1.24 v0.1.25 v0.1.26 v0.1.27 v0.1.28 v0.1.29 v0.1.30 v0.1.31 v0.1.32 v0.1.33 v0.1.90 v0.1.91 v0.1.92 v0.1.93 v0.1.94 v0.1.95 v0.1.96 v0.1.97 v0.1.98 v0.1.99 v0.1.100 v0.1.101 v0.1.102 v0.1.103 v0.1.104 ...... ......
この中から最新版をインストール。
$ nodebrew install-binary latest
latestで最新版がインストールされる。
インストール済みの node.js バージョンを表示。
$ nodebrew ls v13.1.0 current: none
※「v13.1.0」がインストールされた。ただし「current: none」となっており、使用Verが選択されていない。
node.js 使用バージョンを切り替える
使用するnode.js のバージョンを指定します。
$ nodebrew use v13.1.0
確認します。
$ nodebrew ls v13.1.0 current: v13.1.0
「current: v13.1.0」となり、切り替わりました。
gulpをインストール
さあ、あともう少しです。gulpのインストールを進めます。
package.jsonを作成
package.jsonを生成する。(npmプロジェクトの管理ファイル)
まず、ターミナルでプロジェクトフォルダ(gulpを使用したいディレクトリ)へ移動し、下記を。(生成時にProject nameなど聞かれるが、とりあえずenter連打でOK)
$ npm init
プロジェクトフォルダ内に「package.json」が生成されます。
パッケージのインストール
$ npm i -D (パッケージ名)
gulpをインストールする場合は
$ npm i -D gulp
「-D」は「–save-dev」の略。この記述をいれるとpackage.jsonの”devDependencies”欄に、インストールしたパッケージが記載されます。(自分が何をインストールしたのか。また、他Projectで同じパッケージをインストールする際に便利)
以下でインストール済みパッケージを確認
$ npm list --depth=0 test@1.0.0 /Volumes/Storage/local_app/app/public/wp-content/themes/original-theme-m01 ├── gulp@4.0.2 ├── gulp-autoprefixer@7.0.1 ├── gulp-csscomb@3.1.0 ├── gulp-group-css-media-queries@1.2.2 ├── gulp-sass@4.0.2 └── gulp-sass-glob@1.1.0
※ここではgulp以外にもパッケージ(gulp-autoprefixer/gulp-csscombなど)もインストールしています
以上でプロジェクトフォルダに「gulp」がインストールされました。
その他のnpmコマンド
パッケージの最新バージョンがあるかどうか確認したい場合
$ npm outdated
使用しているパッケージ群を最新版にアップデート
$ npm update -D
パッケージのアンインストール方法
$ npm un -D (プラグイン名)
他プロジェクトで同パッケージ群を使用する
package.jsonをプロジェクトフォルダに置いて下記を
$ npm i