3ステップ gulpの設定と使い方

node.js、gulpのインストール方法はこちら

1.gulpパッケージのインストール

gulp設定や便利な各パッケージを紹介します。

gulp@4.0.2
gulp-autoprefixer@7.0.1
gulp-csscomb@3.1.0
gulp-group-css-media-queries@1.2.2
gulp-sass@4.0.2
gulp-sass-glob@1.1.0

基本的にSCSSのコンパイル、ベンダープレフィックス付与くらいの最小構成でも十分便利です。

上記ではそれ以外にcssの整形や、scssファイルのインポートを便利にするパッケージなどを入れています。

各パッケージのインストールは以下。

$ npm i -D (パッケージ名)

まとめてインストールする場合はパッケージ名を続けて記載します。

$ npm i gulp gulp-sass gulp-autoprefixer gulp-csscomb gulp-group-css-media-queries gulp-sass gulp-sass-glob --save-dev

インストールされたか以下で確認

$ npm list --depth=0

2.gulpfile.jsの作成

次に「gulpfile.js」を作成します。
このファイル内に先程インストールしたパッケージのタスク(処理)を書いていきます。

ディレクトリ構造

Project Folder
├ index.php
├ css
├ scss
├ ...
├ package.json
└ gulpfile.js // ←プロジェクトフォルダ直下に作成

gulpfile.js

// パッケージを読み込む
const gulp         = require('gulp');
const sass         = require('gulp-sass');
const gcmq         = require('gulp-group-css-media-queries');
const autoprefixer = require('gulp-autoprefixer');
const csscomb      = require('gulp-csscomb');

// task
function build_scss() {
  return gulp
    .src('scss/**/*.scss')
    // scssをcssにコンパイル
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
    // media queryをまとめる
    .pipe(gcmq())
    // ベンダープレフィックス付与
    .pipe(autoprefixer({
      browsers: ['> 1% in JP', 'ie >= 11', 'Android >= 5'],
      cascade: false,
      grid: true
    }))
    // css整形
    .pipe(csscomb())
    // 「css」フォルダへ保存
    .pipe(gulp.dest('css'));
}

// 監視 ファイルに変更があればbuild_scss開始
function watch_scss() {
  gulp.watch('scss/**/*.scss', build_scss);
}

// default
gulp.task('default', watch_scss);

例として、上記コードでは、

  • 「scss」フォルダをチェックし、変更があればコンパイル
  • media query記述をページ下部にまとめる
  • autoprefixerでベンダープレフィックスを付与
    →browsers:で対象ブラウザを設定可能
  • csscombでcssを整形
    →別途、フォーマット形式を記述した「.csscomb.json」を作成しておく。

という処理を記載しました。

3.gulpを実行する

package.jsonのscriptをこのように。

"scripts": {
    "gulp": "gulp" // ←追加
  },

すべて完了したら、ターミナルで プロジェクトフォルダへ移動し

$ npm run gulp

「css」フォルダにコンパイルされたcssデータが保存されます。

以上がgulp導入方法となります。

最新記事