G&W Design Life

Atomでgulpを始めてみる for Mac

(1)node-jsのインストール

バージョンが手軽に変えられようにしておくと後々楽かと思います!
そのインストール手順はこちら(formac)

(2)設置したいフォルダーに移動します

$ cd フォルダー指定

(3)package.jsonの作成

プロジェクトに必要なプラグインが一式保管でき、
同じ環境を簡単に構築を可能としてくれる

$ npm init

色々と質問が来ますがenterをひたすら押してくと『package.json』ファイルが生成されます。

{
  "name": "gulp-study", //任意の名前(必須)
  "version": "1.0.0", //任意のバージョン(必須)
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
}
//初期情報をスキップ
$ npm init -y

それと同時にnode_modulesフォルダも作られ、これからダウンロードするプラグインが保存されます。

(4)gulpのインストール

gulpはローカルとグローバルどちらにもインストールが必要です。

//グローバルにインストール(次回からスキップしてOK)
$ sudo npm install -g gulp
パスワードを入力してenter

//インストールされたか確認
$ gulp -v
//下記が表示されたらOK
CLI version 3.9.1
//ローカルにインストール
npm install gulp --save

//実行するとpackage.jsonに下記が記述される
"dependencies": {
   "gulp": "^3.9.1"
 },

(5)gulpで動くプラグインをローカルにインストールする

[ インストールプラグインは以下 ]
・gulp-pug
・gulp-stylus
・gulp-sass
npm/3.0.1からインストールができる
・autoprefixer
ベンダープレフィックス自動で付与
・doiuse
指定ブラウザーのベンダープレフィックスを調べてくれる
・gulp-postcss
CSSの仕様をより互換性のあるCSSに変換してくれる
・gulp-plumber
エラーが出たときにgulpを終了させない
・gulp-notify
タスク実行中のエラーを通知してくれる
・browser-sync
自動でブラウザーリロード
・gulp-data
pugでjsonファイルを読み込み管理できる
・gulp-imagemin
画像圧縮

//package.jsonに記述しつつインストール
$ sudo npm install プラグイン名 --save-dev

//上記をさらに省略して記述できる
$ sudo npm i プラグイン名 -D

(6)gulpfile.js

gulpのタスクをここに記述していく

$ touch gulpfile.js

次回はgulpfile.jsにタスクを記述をまとめていこうと思います!

Profile

エディトリアルデザイン・グラフィックデザインを経て数年前Webデザイナーに転身した30代デザイナーです。現代アートや地域とデザイン、ヒト・モノ・コト全般に興味があり。
イラストを描くのが好き。プログラミングはまだまだわからない事も多く初心者なんでメモ&学習としてこのブログを開設しました。どうぞよろしくお願い致します!

Recent Entries

Category