ここはなに？
しがないプログラマの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内で使いたい定数を定義しています。