ここはなに?

しがないプログラマのhtml作成実験場です。
Node.jsを使って、低実装コストで見栄えが良いページを作るのが目的です。

やっている事

ejsで書いたものをgulpでhtmlに変換しています。
部分的にmarkdownからhtmlに変換している部分もあります。
CSSフレームワークにはBootstrapを利用しています。
jsはtypescriptをコンパイルしています。

開発環境

以下のような感じで作成しています。

フォルダ構造

├─build
├─release
│  ├─css
│  ├─js
│  └─webtools
└─src
    ├─layout
    ├─sass
    └─script

src以下にejsやmdファイル、script以下にtsファイル、sass以下にscssを置いています。
layoutには使い回す共通htmlをejsなりhtmlなりで格納しています。
releaseに最終的な公開物が格納される仕組みです。
buildはmdファイルを一時期的にhtmlにしたものを置いて、ejsから適宜includeさせています。

導入npmパッケージ

+-- @types/jquery@3.2.16
+-- ejs@2.5.7
+-- gulp@3.9.1
+-- gulp-cssmin@0.2.0
+-- gulp-ejs@3.1.0
+-- gulp-markdown-github-style@1.0.3
+-- gulp-plumber@1.1.0
+-- gulp-rename@1.2.2
+-- gulp-sass@3.1.0
+-- gulp-typescript@3.2.3
+-- gulp-uglify@3.0.0
+-- gulp-watch@4.3.11
+-- gulp-webserver@0.9.1
`-- typescript@2.6.2

gulpfile.js

gulpfile.jsは超汚いけどこんな感じです。

const gulp = require('gulp');
const sass = require('gulp-sass');
const cssmin = require('gulp-cssmin');
const plumber = require('gulp-plumber');
const server = require('gulp-webserver');
const ejs = require("gulp-ejs");
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const typescript = require('gulp-typescript');
const markdown = require('gulp-markdown-github-style');
const watch = require('gulp-watch');
const replace = require('gulp-replace');
const fs = require('fs');

gulp.task('server', function () {
    gulp.src('release')
        .pipe(server({
            livereload: true
        }))
});

gulp.task('default', ['markdown', 'css', 'js', 'server'], function () {
    return watch(['./src/**/*'], function (event) {
        gulp.start(['markdown', 'css', 'js']);
    });
});

gulp.task('html', function () {
    let data = JSON.parse(fs.readFileSync('src/constants.json', {
        encoding: 'utf-8'
    }));
    gulp.src(['src/**/*.ejs', '!src/**/_*.ejs'])
        .pipe(plumber())
        .pipe(ejs({consts: data}, {}, {ext: '.html'}))
        .pipe(gulp.dest('release'));
});

gulp.task('markdown', function () {
    gulp.src(['src/**/*.md'])
        .pipe(plumber())
        .pipe(markdown())
        .pipe(replace(/<\!DOCTYPE html>[\s\S]*?<head>[\s\S]*?<style[\s\S]*?>[\s\S]*?<\/style>[\s\S]*?<\/head>[\s\S]*?<body>([\s\S]*?)<\/body><\/html>/gi, '$1'))
        .pipe(gulp.dest('build'))
        .on('end', function () {
            gulp.start('html');
        });
});

gulp.task('css', function () {
    gulp.src(['src/sass/*.css', '!src/js/**/*.min.css'])
        .pipe(plumber())
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('release/css'));
    gulp.src('src/sass/*.scss')
        .pipe(plumber())
        .pipe(sass())
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('release/css'));
});

gulp.task('js', function () {
    gulp.src(['src/script/**/*.js', '!src/script/**/*.min.js'])
        .pipe(plumber())
        .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
        .pipe(gulp.dest('release/js'));
    gulp.src(['src/script/**/*.ts'])
        .pipe(plumber())
        .pipe(typescript({
            noImplicitAny: true
        }))
        .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
        .pipe(gulp.dest('release/js'));
});

gulpコマンドを裏で実行しておけば、ファイルを書き換えるたびに勝手にリロードされて、
http://localhost:8000
経由で結果を確認できます。

src/constants.jsonにejs内で使いたい定数を定義しています。