macにgulpを導入した際のメモ #Node.js

2017~2018年ごろのメモです。ご注意ください。

色々開発用にMacに入れたもので手順が煩雑になりがちなものがあったので備忘録として残します。

Gulp

Node.jsで動いているタスクランナーと言われるツール。
最近だとwebpackにとって変わられている感がありますが厳密には違うカテゴリのツール。
( 個人の主観ですが、元来webpackはjsをバンドルするのが仕事で、
scssをcssに変換するのは範疇外のはずでした )

plugins

Gulp(タスクランナー) : Sassのコンパイルなどを自動化するツール
gulp-sass : node-sassを実行するためのモジュール
gulp-autoprefixer : cssにプレフィックスをつけるためのモジュール
gulp-sourcemaps : .mapファイルを生成するモジュール
gulp-plumber : gulpがエラーで終了するのを防止するモジュール
gulp-notify : gulpのエラー内容を通知するモジュール

導入手順

terminal

# プロジェクトのディレクトリを掘る
$ mkdir hoge

# プロジェクトのディレクトリへ移動
$ cd hoge/

# moduleをインストールして、 package.jsonを生成する
$ npm init

# gulpをローカルにインストール
$ npm install --save-dev gulp

# ローカルのgulpをaliasで使えるようにする
## 追記：package.jsonにscript書いた方が安全かも・・・
$ echo "alias gulp='./node_modules/.bin/gulp'" >> ~/.bash_profile

# エイリアスを使ってインストールされているか確認
# ※プロジェクトにインストールしたのでディレクトリに注意
$ gulp -v

# gulpfile.jsを作る←これにタスクを記述していく
$ touch gulpfile.js

# gulpのプラグインを入れていく
# 引き続きプロジェクトのディレクトリ
 $ npm install gulp-sass --save-dev
 $ npm install gulp-autoprefixer --save-dev
 $ npm install gulp-sourcemaps --save-dev
 $ npm install gulp-plumber --save-dev
 $ npm install gulp-notify --save-dev

設定ファイル

gulpfile.js

'use strict';
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const SCSS_SRC = './src/sass/**/*.scss';
const CSS_DEST = './public/assets/css/';
const scss_options = {
  outputStyle: 'compressed',
};
const prefix_options = {
  browsers: ['last 6 version', 'ie >= 9'],
  cascade: false,
};

var notifyMsg = {
  errorHandler: notify.onError("ERROR: <% error.message %>")
};

gulp.task('build:scss', function() {
  gulp.src(SCSS_SRC)
    .pipe(plumber(notifyMsg))
    .pipe(sourcemaps.init())
    .pipe(sass(scss_options))
    .pipe(autoprefixer(prefix_options))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest(CSS_DEST));
});

gulp.task('scss:watch', function() {
  gulp.watch(SCSS_SRC, ['build:scss']);
});

gulp.task('default', ['scss:watch']);

package.json

{
  "name": "hoge", // 任意で設定
  "version": "0.1.0", // 任意で設定
  "private": true, // 任意で設定
  "scripts": {
    "gulp": "gulp"
  },
  "dependencies": {
    // 必要なモジュールが色々
  },
  "devDependencies": {
    // 必要なモジュールが色々
  }
}

使い方

terminal

# プロジェクトのディレクトリに移動
$ cd hoge/

# Gulp 開始
$ gulp

# 追記：package.jsonを使う場合の使い方
$ npm gulp 

# Gulp 停止
ctrl + C # コマンドではなくキー入力

あとがき

Gulp は npm でインストールしてるのに何故 vue-cliは yarn なのか?
Gulpは普段全く使っておらず、後から記事を分離したので時系列がバラけてしまった感がある。
フロント系のツールは移り変わりが早くて参ってしまう・・・。