インストール手順
1 node.jsをインストール
まずはnode.jsが必要なのでインストールする。下記サイトを参考にしてインストールした。
npm(node package managerの略。nodeのパッケージ管理ツールという認識)も導入される。
http://www.hirooooo-lab.com/entry/development/install-node
2 Gulpの導入
参考サイト
2-1 pacakge.json生成
pacakge.jsonとはnpmのパッケージファイルを管理するjsonフォーマット。まずはこちらを生成する。
1.gulpを導入したいプロジェクトのディレクトリに移動
2.移動したらpackage.jsonを作成するコマンドnpm initを入力。コマンド入力すると、以下のような質問が聞かれるので任意の値を入力。全部の質問に回答するとpackage.jsonが生成される。
{
"name": "package", // プロジェクト名(必須項目)
"version": "1.0.0", // プロジェクトバージョン(必須項目)
"description": "paractice", // プロジェクト概要(npmとかで公開するなら書いた方がいいかも)
"homepage": "https://", //プロジェクトのURL
"main": "index.js", //最初に読み込まれるファイル
"repository": {
// バージョン管理システムの情報. gitとか.
"type": "git",
// リポジトリのURL.
"url": "git://github.com/xxx/xxx.git"
},
// npmで公開する時とかで使われるキーワードというかタグというか.
"keywords": {
"word1", "word2"
},
"scripts": {
// npm xxx で実行されるスクリプト一覧
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": {
//作者情報
"name": "xxxx",
"email": "xxxx@xxx.xxx"
},
"private": true, //オンラインで公開しないプロジェクト(プライベートもの)の際は、必ずこちらの記述を入力
"license": "ISC" //ライセンス情報
}
2-2 Gulpのインストール
- グローバルインストール
グローバルインストールを行うことで、PC全体で共通で使える機能としてパッケージをインストールできる。
一回入れてしまえば、他のプロジェクトでインストールする必要がなくなるというメリットがあるが、PC全体のgulpファイルに問題をおよぼしてしまうという大きなデメリットを孕んでいる。
npm install -g gulp //-gをつけるとグローバルインストール
- package.jsonにgulpのバージョンを記録してgulpをインストール(ローカルインストール)
package.jsonにインストールしたgulpのバージョンの情報が残る
npm install --save-dev gulp
こんなかんじにgulpのバージョンが明記される。
"private": true,
"license": "xxx",
"devDependencies": {
"gulp": "^3.9.1"
}
gulpをインストールをしたディレクトリには、 node_modulesというフォルダが出来上がり、その中にnpmでインストールされる様々な機能のファイルが格納される。
2-3 gulpfile.jsを作成
gulpで自動化するタスクを記述するファイルgulpfile.jsを用意することでgulpを利用できる。
gulpfile.jsにタスクを追加していく。
//簡単なコード
var gulp = require('gulp');
gulp.task('default', function() {
console.log('テスト表示です');
});
ターミナルでgulpと入力することでgulpを実行。上記のコードだと、入力後にターミナルに以下のような表示がされる。
[10:50:35] Starting 'default'...
テスト表示です
[10:50:35] Finished 'default' after 113 μs
3 gulpにタスクを導入
3-1.追加手順(Sassのコンパイルを例に)
まずは、npmにコンパイル用のプラグインを導入
npm install gulp-sass --save-dev
プラグインを導入したらgulpfile.jsにSassをコンパイルするタスクを記述する。
var gulp = require('gulp');
var sass = require("gulp-sass");
//sassコンパイル
gulp.task("default", function() {
gulp.src("sass/**/*.scss")
.pipe(sass())
.pipe(gulp.dest("./css"));
});
//gulp.task("タスクの名前","実行する関数")：タスクの登録
//gulp.src("MiniMatchパターン")：読み出したいファイル(gulpを適応させるファイル)を指定
//pipe(おこないたい処理)：srcで取得したファイルに処理を施す
//gulp.dest(“出力先”)：出力先に処理を施したファイルを出力
//.pipe：処理をつなぐ。連続的な処理を記述する際に利用。
また、gulpfile.jsを記述する際はdefaultの指定が必ず必要。gulpfile.jsの一番下に以下のように記述してデフォルト処理を指定。
デフォルト内に記したタスク名に該当するタスクはターミナルでgulpと入力するだけで実行してくれる。
gulp.task("default",["sass","sass"]); //gulp.task("default",["タスク名"]);
3-2 MiniMatchパターンの指定の仕方
- “sass/style.scss”：sass/style.scssだけヒット
- “sass/*.scss”：sassディレクトリ直下にあるすべての.scssがヒット(直下のディレクトリ内のみ)
- “sass/**/*.scss”：sassディレクトリ以下にあるすべての.scssがヒット(直下だけではなく、sassディレクトリ以下全ディレクトリとファイルを扱うとき)
- [“sass//.scss”,”!sass/sample//*.scss]：sass/sample以下にあるscssを除くsassディレクトリ以下のscssがヒット(!は除外を意味する)
4 gulpに様々なタスクを追加しよう。
参考
4-1 ベンダープレフィックス付与の自動化
gulp-autoprefixerを使用
npm install gulp-autoprefixer --save-dev
var autoprefixer = require("gulp-autoprefixer");
(autoprefixer({
// ☆IEは9以上、Androidは4以上、iOS Safariは8以上
// その他は最新2バージョンで必要なベンダープレフィックスを付与する設定
browsers: ["last 2 versions", "ie >= 9", "Android >= 4","ios_saf >= 8"],
cascade: false
}))
var gulp = require('gulp');
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer"); //追加分
gulp.task("sass", function() {
gulp.src("sass/**/*.scss")
.pipe(sass())
.pipe(autoprefixer({
browsers: ["last 2 versions", "ie >= 9", "Android >= 4","ios_saf >= 8"],
cascade: false
}))
.pipe(gulp.dest("./css"));
});
4-2 CSSの圧縮とリネーム
npm install gulp-cssmin --save-dev //css圧縮
npm install gulp-rename --save-dev //ファイルリネーム(.min.cssみたいなやつ)
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
gulp.task("sass", function() {
gulp.src(["sass/**/*.scss"])
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(sass())
.pipe(autoprefixer())
.pipe(cssmin()) //追加(CSS圧縮)
.pipe(rename({ extname: '.min.css' })) //追加
.pipe(gulp.dest("./css"))
.pipe(gulp.dest("./css/min")) //圧縮したファイルの出力先を指定
.pipe(browser.reload({stream:true}));
});
4-3 JavaScriptの圧縮を自動化
jsファイルが正常に動作する環境が整ったら導入しよう。
npm install gulp-uglify --save-dev
var uglify = require("gulp-uglify");
gulp.task("js", function() {
gulp.src(["js/**/*.js","!js/min/**/*.js"])
.pipe(uglify())
.pipe(rename({ extname: '.min.js' }))
.pipe(gulp.dest("./js/min"));
});
4-4 ファイルの変更の監視
いちいちgulpコマンドを入力するのがめんどくさい。そこでファイルが変更されたら逐一gulpのタスクが実行されるようにしよう。
// watch
gulp.task('watch', function(){
gulp.watch("sass/**/*.scss",["sass"]); //gulp.watch("監視するファイル",["実行したいタスクの名前"]);
});
//defaultにタスクを追加
gulp.task("default",['sass','watch']);
gulpコマンドを入力したら監視を開始する。監視中はファイルを変更するたびに逐一defaultに指定したタスクを実行してくれる。
監視を解除したいときはCtrl + C。
4-5 ファイルを更新したらブラウザも自動更新するやつ
browser-syncを使用。
npm install browser-sync --save-dev
var browser = require("browser-sync"); //require追加
gulp.task("sass", function() {
gulp.src("sass/**/*.scss")
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest("./css"))
.pipe(browser.reload({stream:true})); //各タスクの末に更新時にブラウザをリロードする処理を記述。
});
// watch
gulp.task('watch', function(){
gulp.watch(['./**/*.html', './**/*.htm'], ['browser-reload']); //タスクを追加
gulp.watch("sass/**/*.scss",["sass"]);
});
//追加
gulp.task('browser-reload', function(){
browser.reload();
});
//gulpコマンド入力時にローカルサーバーを立ち上げる処理
gulp.task("server", function(){
browser({
server: {
baseDir: './',
directory: true //ディレクトリを表示
},
open: "external" //IPアドレスで発行
});
});
gulp.task("default",['sass','watch','server']); //defaultにタスク追加
4-6 エラー時に監視を止めない
npm install gulp-plumber --save-dev
各タスクの先頭に.pipe(plumber())を追加
gulp.task("sass", function() {
gulp.src(["sass/**/*.scss"])
//plumberを追加
.pipe(plumber({
errorHandler: notify.onError("Error: <%= error.message %>")
}))
});