ラック
Home > ブログ > 記事 > 2017年1月 > Brackets + gulp + ejs

Brackets + gulp + ejs

カテゴリ: ホームページ,開発環境,テンプレートエンジン

Bracketsからgulpを動かすのさらなる応用編。node.js上で動くテンプレートエンジ「ejs」を、gulp上で試します。gulp一式は


> npm install gulp gulp-ruby-sass gulp-plumber gulp-notify gulp-imagemin gulp-connect-php browser-sync gulp-uglify gulp-concat gulp-rename gulp-ejs --save-dev

でgulpにejsも含ませてインストール。gulpfile.jsは


var gulp = require("gulp");

//全般
var plumber = require("gulp-plumber"); //待機
var notify = require("gulp-notify"); //標準出力
//sass
var sass = require("gulp-ruby-sass"); //sass
//img
var imagemin = require("gulp-imagemin"); //画像ロスレス圧縮
//js
var uglify = require("gulp-uglify"); //js圧縮
var concat = require("gulp-concat"); //ファイル結合
var rename = require("gulp-rename"); //ファイル名変更
//ejs
var ejs = require("gulp-ejs");
//reload
var connect = require("gulp-connect-php"); //proxy(phpファイル更新時リロード用)
var browserSync = require("browser-sync"); //ブラウザリロード

//scssコンパイルタスク
gulp.task("sass", function() {
	var errorMessage = "Error: <%= error.message %>";
	var sassOptions = {
		style : "compressed"
	}

	return sass(["./src/scss/**/*.scss"], sassOptions)
	.pipe(plumber({
		errorHandler: notify.onError( errorMessage )
	}))
	.pipe(gulp.dest("./dist/css/"));
});

//watchタスク(Sassファイル変更時に実行するタスク)
gulp.task("sass-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("imagemin", function(){
	gulp.src("./src/img/**/*.+(jpg|jpeg|png|gif|svg)")
		.pipe(imagemin())
		.pipe(gulp.dest("./dist/img/"));
});

//js圧縮&結合&リネーム
gulp.task("js.concat", function() {
	return gulp.src(["./src/js/bootstrap.min.js", "./src/js/jquery.easing.1.3.js", "./src/js/jquery.easing.1.3.js", "./src/js/index.js"])
		.pipe(plumber())
		.pipe(concat("main.js"))
		.pipe(gulp.dest("./src/js/concat/")); //srcとdistを別ディレクトリにしないと、自動でタスクが走る度にconcatしたものも雪だるま式に追加されていく
});
gulp.task("js.uglify", ["js.concat"], function() { //第2引数に先に実行して欲しい js.concat を指定する
	return gulp.src("./src/js/concat/main.js")
		.pipe(plumber())
		.pipe(uglify({
			preserveComments: "some" // ! から始まるコメントを残すオプションを追加
		}))
		.pipe(rename("./dist/js/main.min.js"))  // 出力するファイル名を変更
		.pipe(gulp.dest("./"));
});
gulp.task("js.uglify.progress", function() { //第2引数に先に実行して欲しい js.concat を指定する
	return gulp.src("./src/js/progress.js")
		.pipe(plumber())
		.pipe(uglify({
			preserveComments: "some" // ! から始まるコメントを残すオプションを追加
		}))
		.pipe(rename("./dist/js/progress.min.js"))  // 出力するファイル名を変更
		.pipe(gulp.dest("./"));
});
//上記2つをまとめておく
gulp.task("js", ["js.concat", "js.uglify", "js.uglify.progress"]);

//ejs
gulp.task("ejs", function() {
    gulp.src(
        ["./src/ejs/**/*.ejs", "!" + "./src/ejs/**/_*.ejs"] //_*.ejsはhtmlにしない
    )
    .pipe(plumber())
    .pipe(ejs())
    .pipe(rename({ extname: ".html" }))
    .pipe(gulp.dest("./dist/"));
});

//proxy経由
gulp.task("connect-sync", function() {
/*	connect.server({ //今回はphp使わないのでプロキシも使わず
		port: 8001,
		base:"./dist/",
		bin: "D:/xampp/php/php.exe",
		ini: "D:/xampp/php/php.ini"
	}, function (){
		browserSync({
			proxy: "localhost:8001"
		});
	});*/
    browserSync({
        server: {
            baseDir: "./dist/"
        }
    });
});

//リロード
gulp.task("reload", function(){
	browserSync.reload();
});

//gulpのみでsass-watchとejsとjsとimageminとconnect-syncを動かす
gulp.task("default", ["sass-watch", "ejs", "js", "imagemin", "connect-sync"], function() {
	gulp.watch("./src/**/*.ejs",["ejs"]);
    gulp.watch(["./dist/**/*.html"]).on("change", browserSync.reload);
//	gulp.watch("./dist/**/*.php",["reload"]);

    gulp.watch("./src/scss/**/*.scss",["sass-watch"]);
    gulp.watch(["./dist/css/**/*.css"]).on("change", browserSync.reload);

	gulp.watch("./src/img/**/*.+(jpg|jpeg|png|gif|svg)",["imagemin"]);
    gulp.watch(["./dist/img/**/*.+(jpg|jpeg|png|gif|svg)"]).on("change", browserSync.reload);

	gulp.watch("./src/js/**/*.js",["js"]);
    gulp.watch(["./dist/js/**/*.js"]).on("change", browserSync.reload);
});

※1/31に公開したgulpfile.jsでは意図した動作にならないことが判明したため、2/1に内容を差し替えました。

これで、gulpで画像圧縮 + jsのminify + Scssのコンパイル + ejsテンプレートからhtml生成 + ejs,scss,jsに変更が加えられた場合にブラウザをリロードして再表示が一度にできるようになりました。ついでに、その起動もBrackets上から実行可能と…ブラボー!おお…ブラボー!!

ちなみに、ディレクトリ階層は

  • ejs_test(ルートディレクトリ)
    • dist/: 公開するもの一式
      • css/
      • img/
      • js/
      • .html群
    • misc/: 雑多なもの置き場
    • src/: ソース一式
      • img/
      • js/
      • scss/
      • ejs/
    • node_mocules/: gulpに必要
    • gulpfile.js: gulp設定ファイル
    • package.json: node.jsのパッケージ管理

という階層で実験しました。

タグ: 手順,Brackets,gulp,ejs,Node.js

 



関連する記事一覧