夜田たんの知的生活実践

ほそく・ながく・ゆるく続くブログを目指します(だいたい週一で更新中)

Pelicanプラグインの代わりにNode.jsを使う

Teamwork
Teamwork Illustration by unDraw

このサイトは静的サイトジェネレータのPelicanで作っていますが、いくつかのプラグインをNode.jsに置き換えてみました。

置き換えたプラグイン

置き換えた経緯

CSSファイル圧縮での半角スペースの扱いがイマイチだったので。
（必要な半角スペースが削除されたり）
これまでは気づかなかったのですが、Tailwind CSSをv1からv2にバージョンアップして仕様が大きく変わったら気づいた感じです。
画像圧縮は特に不都合はなかったのですが、gulpの練習も兼ねてやっています。

置き換え先

Node.jsを使ってタスクランナーのgulpを動かすようにしました。

Node.js(gulp)側

こんなタスク(gulpfile.js)を作りました。

//  const
const { src, dest, parallel } = require('gulp');
const debug = require('gulp-debug');

// paths (end with slash!)
const paths = {
    src_output_css : 'C:/path-to-output-folder/theme/css/',
    src_output_html : 'C:/path-to-output-folder/',
    src_output_img : 'C:/path-to-output-folder/images/',
}

// minify css files
function minify_css(){
    const clean_css = require('gulp-clean-css');
    return src(paths.src_output_css + '*.css')
        .pipe(clean_css())
        .pipe(debug({title: 'minify_css: '}))
        .pipe(dest(paths.src_output_css));
}

// minify html files
function minify_html(){
    const html_min = require('gulp-htmlmin');
    return src([paths.src_output_html + '**/*.html',
                '!' + paths.src_output_html +'test.html'])
        .pipe(html_min({removeComments : true,
                        collapseWhitespace: true,
                        keepClosingSlash: true}))
        .pipe(debug({title: 'minify_html: '}))
        .pipe(dest(paths.src_output_html));
}

// minify image files
function minify_img(){
    const image_min = require('gulp-imagemin');
    const image_min_jpg = require('imagemin-mozjpeg');
    const image_min_png = require('imagemin-optipng');
    const image_min_svg = require('imagemin-svgo');
    return src(paths.src_output_img + '**/*.{jpg,png,svg}')
        .pipe(image_min([image_min_jpg(), image_min_png(), image_min_svg()]))
        .pipe(debug({title: 'minify_img: '}))
        .pipe(dest(paths.src_output_img));
}

exports.minify = parallel(minify_css, minify_html, minify_img);

python(Pelican)側

こちらもビルド時にタスクランナーのinvokeを使っているので、そこを編集しました。
大本のタスク（tasks.py）はPelicanのプロジェクト作成時に動かすpelican-quickstartで出力されるやつです。

# -*- coding: utf-8 -*-

import os
import shutil
import sys
import datetime

from invoke import task
from invoke.util import cd
from pelican.server import ComplexHTTPRequestHandler, RootedHTTPServer
from pelican.settings import DEFAULT_CONFIG, get_settings_from_file

SETTINGS_FILE_BASE = 'pelicanconf.py'
SETTINGS = {}
SETTINGS.update(DEFAULT_CONFIG)
LOCAL_SETTINGS = get_settings_from_file(SETTINGS_FILE_BASE)
SETTINGS.update(LOCAL_SETTINGS)

CONFIG = {
    'settings_base': SETTINGS_FILE_BASE,
    'settings_publish': 'publishconf.py',
    # Output path. Can be absolute or relative to tasks.py. Default: 'output'
    'deploy_path': SETTINGS['OUTPUT_PATH'],
    # Port for `serve`
    'port': 8000,
}

# other tasks omitted.

# build to folder for web publishing
@task
def preview(c):
    """Build production version of site"""
    c.run('pelican -s {settings_publish} --ignore-cache'.format(**CONFIG))
    c.run('gulp minify')    # added this line

効果

CSSファイルは問題なく圧縮できて、画像圧縮も処理が速くなった気がします。
HTMLファイルが約180個・画像ファイルが約220個ですが、おおむね１分未満で処理している状況です。
何よりgulpの勉強ができて良かったかなと。

参考資料

大変お世話になりました！

  • Like!