質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

2004閲覧

node_modules配下のcssファイルをstringで扱うには?

aja_ht

総合スコア4

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2018/05/02 03:11

編集2022/01/12 10:55

#やりたいこと

以下のどちらかが達成できれば良い。

  • node_modules配下のcssファイルをstringで扱いたい。
  • node_modules配下のcssをWebページに適用したい。

#理由

  • Stringで扱えれば、JavaScriptでstyle要素を生成し、動的にスタイルをappend(=挿入)したいため。
  • Railsなどは使用していない。
  • npmでインストールしたcssファイルを利用したい。
  • bower等を使ってもよい。

#考察

  • タスクランナーとnpmライブラリを使えばできそう。
  • しかし、良いライブラリがみつからない現状。

#質問

  • 何か良い方法はありますか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2018/05/02 03:16

動かす環境はNode.jsでしょうか、それともブラウザ内でしょうか。
aja_ht

2018/05/02 03:17

nodeでファイルをコンパイルさせ、それをS3にアップロードして、ブラウザで読み込ませています。
maisumakun

2018/05/02 03:22

バンドラー(Webpack、Rollup、Browserify、Parcelなど)は何を使っていますでしょうか。
aja_ht

2018/05/02 07:00

Browserify と babelify です
guest

回答1

0

ごきげんよう

普通に考えると公開領域に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

投稿2018/05/02 06:36

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問