タスクランナー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を以下のように記述する。
|
1 2 3 4 5 6 7 8 9 10 |
var gulp = require("gulp");//gulp初期設定よみ込み var sass = require("gulp-sass");//gulpsass初期設定よみ込み gulp.task("default",function(){//sass_goはタスクの名前 gulp.watch("style.scss",function(){//scssを監視する。*.scssとすると.scss全てが対象になる。["aaa.scss","bbb.scss"]とすると gulp.src("style.scss")//sassをソースメソッドで示す。 .pipe(sass())//2行めのsassプラグインを実行 .pipe(gulp.dest(""))//保存先。 }) }); |
プロジェクトで使用する場合
package.jsonを共有してnpm.initをターミナルで行うとプラグインが降ってくる。