gulp導入しました。
引き続きgulpです。
gulpfile.js設定
gulp4だと3系の記事を参照していたらエラー吐きまくったので、バージョンは気をつけましょう。
追加したモジュール
- gulp-sass
- gulp-plumber
- gulp-notify
それぞれインストールしてください。
sassコンパイル用
npm install gulp-sass --save-dev
エラー時に監視を止めない
npm install gulp-plumber --save-dev
エラーコードのポップアップ表示
npm install gulp-notify --save-dev
それらを反映した設定ファイル
gulpfile.js
var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
//sassコンパイル
gulp.task("sass",function(done){
gulp.src("sass/*.scss")
.pipe(plumber({errorHandler: notify.onError('<%= error.message %>')}))
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest("./css"));
done();
});
//動作設定
gulp.task("default", gulp.series('sass', function(done){
gulp.watch("sass/*.scss", gulp.series('sass'));
done();
}));
これを使用するプロジェクトフォルダに配置。
該当のフォルダにcdで移動後、gulpで開始します。
$ gulp
終了するときは「ctrl + c」です。
さらにbrowser-sync加える
ファイルを更新すると同時にブラウザも更新してくれます。
複数のブラウザを開いている状態で、ページ遷移、スクロールなどを同期してくれます。
npm install browser-sync --save-dev
gulpfile.js
var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var browserSync =require('browser-sync');
//sass
gulp.task("sass",function(done){
gulp.src("sass/*.scss")
.pipe(plumber({errorHandler: notify.onError('<%= error.message %>')}))
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest("./css"));
done();
});
//ブラウザ同期
gulp.task('browser-sync', function(done) {
browserSync({
proxy: "http://hogehoge" //MAMPなどで設定したバーチャルホスト
});
done();
});
//ブラウザリロード
gulp.task('bs-reload', function (done) {
browserSync.reload();
done();
});
//動作設定
gulp.task('default', gulp.series('browser-sync', function (done) {
gulp.watch("sass/*.scss", gulp.series('sass'));
gulp.watch("./*.html", gulp.series('bs-reload'));
gulp.watch("./**/*.html", gulp.series('bs-reload'));
gulp.watch("./css/*.css", gulp.series('bs-reload'));
gulp.watch("./js/*.js", gulp.series('bs-reload'));
done();
}));
MAMPで設定しなくてもbrowser-syncでローカル環境は作ってくれますが、PHP環境などは対応していないので、やはり動的サイトではMAMPを入れたほうが良さそうです。
MAMPについてはこちら
MAMPのインストール＆初期設定＋αをしてみる
完全な静的サイトだったら、browser-syncの部分を下記に書き換えるとMAMPなしでローカル環境を作ってくれます。
gulpfile.js
//ブラウザ同期
gulp.task('browser-sync', function(done) {
browserSync({
server: {
baseDir: "/",
index: "index.html"
}
});
done();
});