Gulpのインストール・セットアップ【超簡単な例付き】

Gulpのインストールから使うまでの流れを紹介します。

簡単にですが、プラグインの使い方の例も書いているので、初心者は使い方もふわっとわかるかと思います。

爆速コーディングするのにSCSS/Sassなど使うのでGulpを使えるようになってもりもりコーディングして行きましょう〜


Gulpの準備

nodejsをインストールしてください
公式サイト:nodejs

ターミナルでnode -vでバージョンが表示されたらインストールされています。

cdで作っているプロジェクト内に移動して以下を実行

npm init

特に設定するものがない場合はエンターで進んでオッケーです
これでpackage.jsonが作成されます

次にGulpをグローバル環境にインストール

sudo gulp install gulp -g

password入力
*最初だけグローバル環境にインストールします。

以下のコマンドでgulpfile.jsを作成

touch gulpfile.js

*普通にjsファイル作るノリでfinderやエディタから作成してもいいですが、コマンドでも作れるので一応紹介

Gulpをプロジェクトのフォルダ内にインストール

npm install gulp —save-dev

package.jsonファイルのdependencyにgulpが追加されてたらOK

あとは以下のコマンドでプラグインをインストールしてgulpfile.jsでタスクなどを書いていく。

npm install 使用したいプラグイン --save-dev

簡単な使用例:

autoprefixerの使用例です。

ターミナル(プロジェクトのフォルダ内)にて

npm install gulp-autoprefixer --save-dev

gulpfile.jsにて

var gulp = require('gulp'); //gulpをインポート
var autoprefixer = require('gulp-autoprefixer'); //autoprefixerをインポート

gulp.task(‘タスク名', function() {
    gulp.src('css/styles.css’) //ファイルの場所
        .pipe(autoprefixer()) //autoprefixerを使う
        .pipe(gulp.dest('build’)) //autoprefix後のcssファイルの行き先
});

これでターミナルからgulp タスク名をrunするとbuildファイルが作られて、その中にautoprefix後のstyles.cssが作成されます。

あとはhtmlからbuild/styles.cssを読み込めばオッケーです。

watchする

いちいちgulp タスク名をrunしたくない人はwatchしよう
gulpfile.jsに以下を追記

gulp.task('watch', function() {
    gulp.watch('css/styles.css', [‘タスク名']); //配列で複数のタスクを指定可能
});

これでターミナルからgulp watchをrunすると、gulp.watchで指定したファイルに変更があった際に、指定したタスクをrunしてくれます。

簡単な例でしたが、ざっくりな使い方はわかったかと思います。

SCSS/Sassやminify、uglifyなど色々タスクがあるので入れてrunしてみてください。

よくみるタスク一覧

  • gulp-sass:CSSコンパイル
  • gulp-rename:ファイル名の変更
  • gulp-concat:複数のファイルを一つに
  • gulp-plumber:エラーが起きてもwatchなどのタスクを継続。エラーのたびにいちいちgulp タスク名をrunしなおさなくでよくなる。
  • gulp-merge-media-queries:メディアクエリの順番を整頓
  • gulp-imageoptim:画像の圧縮
  • gulp-changed:変更があったファイルを監視する
  • gulp-notify:エラーの通知
  • gulp-uglify:JavaScriptの圧縮
  • gulp-minify-html:HTMLの圧縮
  • gulp-minify-css:CSSの圧縮
  • gulp-csslint:CSSの文法チェック
  • gulp-jslint:JSの文法チェック
  • browser-sync:ファイル等の保存時にブラウザをリロード

動かない時はちゃんとインストールされていないかもしれないので、package.json内のdependencyに追加したプラグインが追加されているか確認してみてください。

圧縮系のプラグインは最後に使えばオッケーかと思います。

必要に応じて使ってみてくださいませ。

では〜〜〜



Posted

in