Gulpのことはじめ。 GulpSASS

タスクランナーGulpのインストール
 
node.jsのインストール。
node.jsとはサーバー上で動作するjs。jsは普通ブラウザ上で動作するものだが、サーバー上で動くためデータベースやファイルの操作ができるようになる。
 
LTS(安定版)をダウンロードしてインストーラーに沿ってインストール。
ターミナルで$node -v でバージョンが表示されれば問題ない。
 
 

スポンサードリンク

Gulpをグローバルにインストールする
 
ターミナルで以下のように入力する。
 
$ npm  install -g gulp-cli
エラーが出た場合
$ sudu nam install -g gulp-cli
と入力する。
$ gulp -v
と入力し、バージョンが表示されればOK。
 
グローバルにインストールする場合は一度インストールすれば良い。
 
 
Gulpプロジェクトフォルダ上で仕込む
wordpress上なのでテーマフォルダにcdコマンドで移動する。wordpressでなくてもcssとかindexがあればそこにインストール。
 
$npm init
 
を入力して初期設定をする。
色々聞かれるがすべてenterしてインストールする。
その後gulpをインストールする(ローカルインストール)。
 
$ npm install –save-dev gulp
 
セフィロトの樹が出てきたら成功。
 
gulp.jsの作成
さっきのWPのテーマフォルダ内にいることを確認して
 
$ npm install -save-dev gulp-sass
 
としてgulp sassをインストール。
 
そしてstyle.scssとgulpfile.jsファイルを新たに作成する。
 
gulpfile.jsを以下のように記述する。
 

 

 

プロジェクトで使用する場合

package.jsonを共有してnpm.initをターミナルで行うとプラグインが降ってくる。