skillup

技術ブログ

JavaScript

npmでのJSライブラリインストール&ビルド(※gulp使用時)

投稿日:2017年11月26日 更新日:

こちらのリンクでJSのnpmパッケージでのインストール&ビルドをしたので、gulpでのビルドを。

前提条件としては

  • nodeのインストール
  • npmのインストール

がされていればOKです。

最小構成でいうとgulp,gulp-webback,config.js(設定ファイル)が読み込めればOKです。※サンプルでは例としてjQueryを読み込んでいます。

sample_rs.js ビルドしたいjs

jQueryを読み込みオリジナルの処理をここに書きます。

config.js 設定ファイル

gulpfile.js ※ここでタスクを実行します。

下記コマンドを実行した後、上記の設定だとbuild.jsというコンパイルされたjsが作成されます。(この中にはjQueryももちろん入っています。)

sample.html コンパイルしたjsをよみこむhtml

ソース

https://github.com/umanari145/library/tree/master/resources

参考リンク

webpack初心者がJavaScriptをビルドするまでの手順

*ちなみにnpmのinstallはバージョン依存関係で結構こけます。

うまく行かずもう一度最初からやりたいときは以下のコマンドで。

 

 

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

モジュールバンドラparcelについて

現在のフロントエンドだと、es6以降の書き方が主流になっていることもあり、一度慣れてしまうとなかなか戻れない便利さがあります。 私の場合、設定が面倒だったり、Chromeではトランスパイルしなくても動 …

no image

JavaScriptのコールバック関数について

JavaScriptでのコールバック関数について。 たまにでてきますが、これまた慣れないと手間取ります。 コールバック関数に関してまとめると以下のような感じでしょうか。 ある関数(func1)の引数と …

no image

vue-routerと認証など

vue-routerで簡単な認証に関する処理など。 例によって https://github.com/umanari145/admin_tool を題材に。 Contents1 サーバーサイドとのルー …

no image

JSでの金額変換で気をつけることなど

以前、ちょっと特集した JSでの画面の金額集計 の続きです。 画面で帳票系のアプリを作ろうとしている時など、画面上の値から金額の合計金額を出すなどがよく見られます。 すごく基本的ですが、PHPに慣れて …

no image

オートコンプリートのプラグイン

最近だとフォームの入力画面で最初の数文字を入力すると候補を予測して表示してくれる機能(=オートコンプリート)があることが一般的ですね。 いろいろなプラグインがありますが、今回お勧めしたいのはBoots …

アーカイブ