備忘録 Macにインストールしているもの
色々開発用にMacに入れたもので手順が煩雑になりがちなものがあったので備忘録として残します。
- 準備編
- 日常編
- 開発編1
- 開発編2-1 vue-cli
- 開発編2-2 Gulp ← 今ここ
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は普段全く使ってないので、後から記事を分離したので時系列がバラけてしまった感がある。
フロント系のツールは移り変わりが早くて参ってしまう・・・。