pugのコンパイル時にMySQLのデータを埋め込む

pugのコンパイル時にMySQLのデータを埋め込みたかったのでgulp-dataを使い実装しました.

きっかけ

少し前にPHPとMySQLを使ってWebページに更新履歴を生成させる機能を付けたのですが,そもそも更新頻度がそこまで高くないのにいちいちWebサーバで動的生成するのが無駄に感じたのと,PHPは素人が触るにはセキュリティ的に不安だったから.

目標

pugのコンパイル時にMySQLのデータ(Webページの記事のタイトルやURL)を埋め込んで,その結果を静的なHTMLに出力

環境

  • Ubuntu 16.04 LTS

手順

  1. npmでgulp-data,mysqlのインストール
  2. gulpfile書き換え
  3. pug書き換え

必要なパッケージ(gulp-data,mysql)のインストール

#gulp-dataのインストール
$sudo npm install gulp-data -g
$sudo npm install gulp-data --save-dev

#mysqlのインストール
$sudo npm install mysql -g
$sudo npm install mysql --save-dev

gulpfileの書き換え

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require("gulp-plumber");
var pug = require('gulp-pug');
//for MySQL
var mysql = require('mysql');
var data = require('gulp-data');

gulp.task('scss', function(){
    //scssディレクトリの指定
    gulp.src(['src/scss/*.scss', '!scss/_*.scss'])
    //コンパイル実行
    .pipe(plumber())
    .pipe(sass())
    .pipe(autoprefixer())
    //出力先の指定
    .pipe(gulp.dest('dest/css'));
});

gulp.task('pug', function()
{
	// gulp
	var gulpObj = gulp.src(['src/pug/*.pug', '!src/pug/_*.pug']).pipe( plumber() );
    //コンパイル実行

	// DB
	var connection = mysql.createConnection( {
		host : 'HOSTNAME',
		user : 'USER',
		password : 'PASSWORD',
		database : 'DATABASE'
	} );

	connection.connect();

	let sql = 'select * from TABLE';

	new Promise( ( resolve ) =>
	{
		connection.query( sql, ( err, rows, fields ) =>
		{
			if( err ) 
			{
				throw err;
			}

			connection.end();

			resolve( rows );
		} );
	} ).then( function ( rows )
	{
	    gulpObj.pipe( data( file => { return { data : rows } } ) )
	    .pipe(pug({pretty: true}))
	    .pipe(gulp.dest('dest'));
	} );
} );	

gulp.task('default', function() {
    gulp.watch('src/scss/*.scss',['scss']);
    gulp.watch('src/pug/*.pug',['pug']);
});

MySQLからデータを引き出す命令は非同期で実行されるためpromiseで同期をかけています.

pugの書き換え

pug内では`${data[NUM].key}`のような記法で変数を受け取ることができます

doctype html
html(lang="ja")
 head
  title=`${data[0].title}`
 body
  p=`${data[0].url}`

 

気になったこと

調べてみると予想以上にMySQLとgulpの連携をとっている人が少なかった.(ディレクトリ内のJSON形式のデータを取ってきてpug内に埋め込むというのは日本語でも何件かあった)

まとめ

あまりJavaScriptは使わないので苦労しました.が思ったものができて満足です.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top