ど素人のgulpの使い方まとめ

  • このエントリーをはてなブックマークに追加

とりあえず参考サイト

とりあえずSassのコンパイルだけなら下記のそのままでいける

ttps://ics.media/entry/3290

あれやこれややりたいなら下記がとても参考になる

今からでも遅くないGulpを使った開発環境の作り方

が、しかしgulp3系統での話なので最後の最後で監視するところでうまくいかない+「gulp-progeny」のせいで動かないのでこれだけ削除した。

 

導入しませう

  1. とりあえずNode.jsを入れる必要がある
  2. 作業するようのフォルダを作成する
  3. ターミナルでcd(チェンジディレクトリ)を打って、上記フォルダを掘り込む
  4. npm init -yを入力でpackage.jsonを作成
  5. 作ったフォルダ(ローカル)にnpm install -D gulpでgulpをインスコ
  6. とりあえずgulpの下準備おわた

 

Sassコンパイルして画像の圧縮してブラウザの自動リロードしたい

gulpfile.js(gulpの設定ファイル)を適当に作る。

そこにvar gulp = require( ‘gulp’ );を記載

で、やりたいタスクをインスコしてここに記載していく。

 

Sass関連

内容はググろう

 

画像ファイルの圧縮関連

内容はググろう。とりあえずだいたいの拡張子の画像を圧縮

js関連のはいらんので無視

 

ブラウザのオートリロード

–save-devにしてるので勝手にpackage.jsonに記載されやす

 

「gulpfile.js」の設定

いちばん四苦八苦したところですが。一旦これで動くってのを貼る。

適宜は適宜やってください。
ちなみに

 

「/**」はそのディレクトリ全部

「/*.scss」はそのディレクトリのscss全部とかいう動き

メモ書きでした。

 

追記

PHP扱いたいときは下記をインスコして

適宜gulpfile.jsを更新

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*