概要

WebページをAmazon S3 + CloudFrontで行うとどうしても HPを作るときに生のHTMLファイルを利用した方が便利になります。今回は、gulpを利用しHTMLを生成するようにします。

gulpは2019/12/29日現在最新の4.0.2を利用します。 gulpのバージョンが3.xの場合は記述方法が異なるのでご注意ください.

今回は利用がメインのためあまりコメントを多く記載しません。お手数ですが、詳細を知りたい場合はご自身でお調べください。

環境

Node.js v12.2.0
gulp 4.0

パッケージの生成

 npm install gulp gulp-autoprefixer gulp-clean-css gulp-connect gulp-ejs gulp-htmlmin gulp-rename gulp-sass gulp-uglify --save-dev

長いですがgulpを利用した内容です。

ソースコード一覧

ディレクトリ構成

.
├── src
│   ├── ejs
│   │   ├── parts
│   │   │   ├── _footer.ejs
│   │   │   └── _header.ejs
│   │   └── index.ejs
│   ├── js
│   │   └── app.js
│   └── sass
│       └── style.scss
├── gulpfile.js
└── pakage.json

package.json

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp-autoprefixer": "^7.0.1",
    "gulp-ejs": "^5.0.0",
    "gulp": "^4.0.2",
    "gulp-sass": "^4.0.2"
  },
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-connect": "^5.7.0",
    "gulp-ejs": "^3.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "browserslist": [
    "last 2 versions",
    "iOS 8.1",
    "Android 4.0"
  ]
}

gulpfile.js

var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var ejs = require("gulp-ejs");
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var cleanCSS = require("gulp-clean-css");
var connect = require('gulp-connect');


// 監視　※gulp4の書き方です。
gulp.task( "watch", () => {
    gulp.watch( "src/sass/**/*.scss", gulp.series( "sass" ) ); // sassディレクトリ以下の.scssファイルの更新を監視
    gulp.watch( "src/ejs/**/*.ejs", gulp.series( "ejs" ) ); // ejsディレクトリ以下の.ejsファイルの更新を監視
    gulp.watch( "src/js/**/*.js", gulp.series( "js" ) );
    gulp.parallel('serve');
});

//server
gulp.task('serve', () => {
  connect.server({
    root: './public',
    livereload: true
  });
});


// Sass
gulp.task( "sass", () => {
    return gulp.src( 'src/sass/*.scss' )
        .pipe(sass().on( 'error', sass.logError ) )
        .pipe(autoprefixer())
        .pipe(cleanCSS())
        .pipe(rename({extname: '.min.css'}))
        .pipe(gulp.dest( './public/css' ));
});

// EJS
gulp.task( "ejs",  () => {
    return gulp.src(["./src/ejs/**/*.ejs", '!' + "src/ejs/**/_*.ejs"])    
        .pipe(ejs())
        .pipe(htmlmin({collapseWhitespace : true, removeComments : true}))
        .pipe(rename({extname: '.html' }))
        .pipe( gulp.dest( "./public/" ) );
});

gulp.task('js', () => {
    gulp.src(['./src/js/*.js', '!./js/*.min.js'])
        .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
        .pipe(gulp.dest('./public/js/'));
});

gulp.task('default', gulp.series(gulp.parallel('serve', 'watch'),function(){
}));

src/ejs/index.ejs

<%
var content = {
    title: 'title',
    description: '説明文'
};
%>
<%- include('parts/_header', {content}); %>

<%- include('parts/_footer'); %>

src/ejs/parts/_header.ejs

<!DOCTYPE html>
<html>
    <head>
        <meta name="description" content="<%= content.description %>">
        <title><%= content.title %></title>
        <script src="js/app.min.js"></script>
    </head>
    <body>

src/ejs/parts/_footer.ejs

    </body>
    
</html>

src/js/app.js と src/sass/style.scss の２つはからのファイルでまずはOKです。

実行コマンド

 node_modules/.bin/gulp

ブラウザで http://localhost:8080 URLを叩き表示されればこれで静的なHTMLを精製できます。

生成されたhtmlは、 public フォルダに格納されます。現状の課題としては,layout的な構想がejsの場合は少し手間というところここも解決したら記事を紹介します。

gulpで作るHTML Webサイト

概要

環境