この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
前回のこれからはじめるGulp #3:gulp.watchでファイルの変更を監視しタスクを実行するで変更を監視してタスクを実行できるようになりました。今回は監視と平行して走らせるgulp-connectを使ったローカルサーバの起動を試します。
準備
ローカルサーバにアクセスした時に表示させるindex.htmlを作っておきましょう。ローカルサーバのrootディレクトリはprodです。
index.htmlを作る
srcディレクトリにindex.htmlを作ります。このHTMLはローカルサーバー起動時にprodディレクトリにコピーします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Gulp Hello World</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
gulp-connectのインストールと読み込み
gulp-connectを--save-devを付けて開発用としてインストールします。
$ sudo npm install --save-dev gulp-connect
Password:
gulp-connect@2.2.0 node_modules/gulp-connect
├── connect-livereload@0.3.2
├── event-stream@3.1.7 (duplexer@0.1.1, stream-combiner@0.0.4, from@0.1.3, pause-stream@0.0.11, map-stream@0.1.0, split@0.2.10, through@2.3.6)
├── tiny-lr@0.0.7 (debug@0.8.1, faye-websocket@0.4.4, qs@0.5.6, noptify@0.0.3)
├── gulp-util@2.2.20 (lodash._reinterpolate@2.4.1, minimist@0.2.0, through2@0.5.1, vinyl@0.2.3, chalk@0.5.1, dateformat@1.0.11, multipipe@0.1.2, lodash.template@2.4.1)
└── connect@2.17.3 (parseurl@1.0.1, response-time@1.0.0, connect-timeout@1.1.0, cookie@0.1.2, debug@0.8.1, cookie-signature@1.0.3, pause@0.0.1, fresh@0.2.2, vhost@1.0.0, qs@0.6.6, basic-auth-connect@1.0.0, on-headers@0.0.0, bytes@1.0.0, serve-favicon@2.0.0, morgan@1.1.1, errorhandler@1.0.1, cookie-parser@1.1.0, csurf@1.2.0, method-override@1.0.2, body-parser@1.2.2, compression@1.0.2, type-is@1.2.0, express-session@1.2.1, serve-index@1.0.3, multiparty@2.2.0, serve-static@1.1.0)
インストールが終わったらgulpfile.jsファイルに読み込みます。
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
...
copyタスクを作る
今回ローカルサーバのrootディレクトリにprodディレクトリを指定します。srcディレクトリに保存されているindex.htmlをprodディレクトリにコピーしなければHTMLを表示できません。そこで前回作成したgulpfile.jsをベースにcopyタスクを追加します。
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function(){
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./prod/css'));
});
//copyタスクをここに追加
gulp.task('watch', ['sass'], function(){
var watcher = gulp.watch('./src/scss/*.scss', ['sass']);
watcher.on('change', function(event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
gulp.task('default', ['sass']);
copyタスク
copyタスクはstream内でSassなどのモジュール(.pipe(sass()))を指定せず、gulp.dest()で保存先だけ指定します。Grantの場合はgrunt-contrib-copyモジュールを使って実現しますが、Gulpはメソッドだけで実現できるんですね。
gulp.task('copy', function(){
gulp.src('./src/*.html')
.pipe(gulp.dest('./prod'));
});
copyタスクを試す
copyタスクを単体で実行してprodにHTMLがコピーされることを確認します。
$ gulp copy
[21:33:27] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[21:33:27] Starting 'copy'...
[21:33:27] Finished 'copy' after 4.85 ms
$ tree prod
prod
├── css
│ └── style.css
└── index.html
prodにindex.htmlがコピーされました。
監視対象にHTMLを追加する
前回作成したwatchタスクにcopyタスクを追加します。イベントリスナーを使ったログ表示はわかりにくくなってしまうため削除しておきます。
gulp.task('watch', ['sass', 'copy'], function(){
gulp.watch('./src/scss/*.scss', ['sass']);
gulp.watch('./src/*.html', ['copy']);
});
この時点でgulpfile.jsはこのようになります。
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
//sass
gulp.task('sass', function(){
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./prod/css'));
});
//copy
gulp.task('copy', function(){
gulp.src('./src/*.html')
.pipe(gulp.dest('./prod'));
});
//watch
gulp.task('watch', ['sass', 'copy'], function(){
gulp.watch('./src/scss/*.scss', ['sass']);
gulp.watch('./src/*.html', ['copy']);
});
gulp.task('default', ['sass']);
watchタスクをチェックする
watchタスクを実行して、HTMLの変更を監視しcopyタスクが実行されるか確認します。
$ gulp watch
[21:48:10] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[21:48:10] Starting 'sass'...
[21:48:10] Finished 'sass' after 5.39 ms
[21:48:10] Starting 'copy'...
[21:48:10] Finished 'copy' after 1.25 ms
[21:48:10] Starting 'watch'...
[21:48:10] Finished 'watch' after 7.3 ms
[21:48:14] Starting 'sass'...
[21:48:14] Finished 'sass' after 1.28 ms
[21:48:17] Starting 'copy'...
[21:48:17] Finished 'copy' after 1.59 ms
問題なさそうです。
serveタスクを作る
まずは、ローカルサーバーを立ち上げるだけのタスクを作ります。
gulp.task('serve', function(){
connect.server();
});
serveタスクを追加したgulpfile.js
はこうなります。
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
//sass
gulp.task('sass', function(){
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./prod/css'));
});
//copy
gulp.task('copy', function(){
gulp.src('./src/*.html')
.pipe(gulp.dest('./prod'));
});
//watch
gulp.task('watch', ['sass', 'copy'], function(){
gulp.watch('./src/scss/*.scss', ['sass']);
gulp.watch('./src/*.html', ['copy']);
});
//server
gulp.task('serve', function(){
connect.server();
});
gulp.task('default', ['sass']);
ローカルサーバーを起動する
serveタスクを起動してみます。rootディレクトリをprodにしていないので、gulpfile.jsが置かれているディレクトリがrootになります。
$ gulp serve
[11:36:46] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[11:36:46] Starting 'serve'...
[11:36:46] Finished 'serve' after 22 ms
[11:36:46] Server started http://localhost:8080
ローカルサーバーが起動したのでhttp://localhost:8080にアクセスしてみます。 rootディレクトリにindex.htmlがないのでディレクトリとファイルの一覧が表示されるはずです。
ディレクトリ一覧の中にあるprod(http://localhost:8080/prod/)をクリックすると冒頭で作成したindex.htmlが表示されるはずです。
ローカルサーバーを停止する
ローカルサーバーを止めるにはcontrol + Cを打ちます。
[11:36:46] Starting 'serve'...
[11:36:46] Finished 'serve' after 22 ms
[11:36:46] Server started http://localhost:8080
^C[12:01:47] Server stopped
rootディレクトリを指定する
rootディレクトリを指定するにはgulp-connectのserveメソッドにオプションを与えます。
gulp.task('serve', function(){
connect.server({
root: './prod'
});
});
これでhttp://localhost:8080にアクセスした時にprodがrootディレクトリになりprod/index.htmlが見られるようになります。
defaultタスクで必要なタスクをすべて実行する
最後にwatchタスクとserveタスクをgulpコマンドだけで実行できるようにdefaultタスクを調整します。
gulp.task('default', ['sass']);
sassタスクが設定されていますがこれをwatchとserveに書き換えます。
gulp.task('default', ['watch', 'serve']);
gulpfile.js
gulpfile.jsは最終的にこのようになります。
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
//sass
gulp.task('sass', function(){
gulp.src('./src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./prod/css'));
});
//copy
gulp.task('copy', function(){
gulp.src('./src/*.html')
.pipe(gulp.dest('./prod'));
});
//watch
gulp.task('watch', ['sass', 'copy'], function(){
gulp.watch('./src/scss/*.scss', ['sass']);
gulp.watch('./src/*.html', ['copy']);
});
//server
gulp.task('serve', function(){
connect.server({
root: './prod'
});
});
gulp.task('default', ['watch', 'serve']);
実行
defaultタスクを試してみます。defaultタスクは省略できるのでgulp
コマンドのみで行えます。
$ gulp
[13:20:34] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[13:20:34] Starting 'sass'...
[13:20:34] Finished 'sass' after 5.32 ms
[13:20:34] Starting 'copy'...
[13:20:34] Finished 'copy' after 1.46 ms
[13:20:34] Starting 'watch'...
[13:20:34] Finished 'watch' after 7.47 ms
[13:20:34] Starting 'serve'...
[13:20:34] Finished 'serve' after 10 ms
[13:20:34] Starting 'default'...
[13:20:34] Finished 'default' after 8.98 μs
[13:20:34] Server started http://localhost:8080
変更を監視してタスクを実行し、ローカルサーバーも起動できました。あとは変更された時にブラウザをリロードするLiveReloadですね。もう少しのところですがLive Reloadは明日に回すことにします。