ごきげんよう
普通に考えると公開領域にCSSとHTMLが別にあって、
HTMLにこんな感じのタグを用意して読み込ませるのが自然よね。
<link rel="stylesheet" type="text/css" href="css/example.css">
つまりgulp等のタスクランナーでは、node_module配下のファイルを掴んで、即distすればコピーと同じように扱えるわよ。
これで公開領域に放り込んでやれば解決ね。
不要になったゴミファイルがいつまでも残らないように、まず公開領域を掃除しておいた方がいいかもね。
参考記事:
gulpfile.jsはこんな感じでどう?
JavaScript
1const gulp = require('gulp')
2const del = require('del')
3
4gulp.task('copy', () => {
5 del.sync(['./public/css/*.css'])
6 return gulp
7 .src('./node_modules/example-package/style.css')
8 .pipe(gulp.dest('./public/css'))
9});
node_modules配下のCSSを読みたいということは、package.jsonはあるのよね?
なら後は依存モジュールを導入して終了
Bash
1# 依存モジュールをインストール
2$ npm install gulp del
3
4# コマンドラインツールのgulpをインストール
5$ npm install -g gulp
6
7# 導入出来た事を確認する為にバージョンを確認
8$ gulp -v
9
10# 登録されているタスク一覧を確認
11$ gulp --tasks
12copy
13
14# 登録済みのタスクを実行
15$ gulp copy
おまけ: 質問文通りの事がやりたい
S3にアップロード
この条件があるから出来るだけ1ファイルで済ませたいと?
そうねぇ……他人が作ったHTMLならともかく、自分が作ったHTMLを構文解析を行いながら文字列を流し込むのは時間の無駄だからやめなさい。
Pugを使うといいわ。
無駄な<>
がなくなって、Pythonのようにインデントで管理するフォーマットだから生産性がとても高いのが特徴よ。
Pugは犬種の一つでもあるからググらビリティが低いけど「Pug テンプレート」というワードで調べればいくらでも情報が出て来るから調査してみて。
まぁ、まともなHTMLが書けるなら同じことをするPugの構文なんて数時間でマスター出来るんじゃないかしら?
ifやfor文なんかのJavaScript的な事を組み合わせ始めると大変かもしれないけどね。
こういった生成するとHTMLになるものはassetsみたいなディレクトリを作ってバージョン管理ソフトで管理するのが主流だから、一旦[project-root]/assets/index.pug
に保存するね。
pug
1doctype html
2html
3 head
4 style != string_css
5 body
6 p test
このstring_css
ってのが変数名。
コンパイルする時にオプションで値を注入することが出来るから覚えておいてね。
続いてgulpfile.jsの書き方。
ディスクの読み書きを行うNode.jsの公式パッケージのfsと
Gulpのタスク内でPugをコンパイルするgulp-pugの2つを利用するといいんじゃない?
JavaScript
1const gulp = require('gulp')
2const del = require('del')
3const fs = require('fs')
4const pug = require('gulp-pug')
5
6gulp.task('pug', () => {
7 del.sync(['./public/*.html'])
8 const data = {
9 string_css: fs.readFileSync(./node_modules/example/style.css),
10 }
11 return gulp
12 .src('./assets/**/*.pug')
13 .pipe(pug({
14 locals: data,
15 })
16 .pipe(gulp.dest('./public'))
17});
後はこんな感じでコマンド叩いておしまい。
ニッチな要望をピンポイントで探すんじゃなくて、色んなものを組み合わせるのがNode.jsの武器だからちょっとずつ裾野を広げるようにしていくと出来る事が増えるわよ。
Bash
1$ npm install gulp del gulp-pug
2
3$ npm install -g gulp
4
5$ gulp -v
6
7$ gulp --tasks
8pug
9
10$ gulp pug