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

JavaScriptのcall,bind+npmからのライブラリ読み込みで

npmを使ってライブラリ管理をする場合、個別にライブラリを読み込まず、package.jsonで読み込んだあと、一括してライブラリを読みこむことが一般的です。 で、その時の処理に関して。 例えばlea …

no image

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

Angularをやるうえで前提となるJavaScriptの知識を書いていこうかと。 PHPでもありますが、関数を変数として扱い、別の関数の引数にすることができます。 これを利用すると下記のようなソース …

no image

Vue.jsについて

次の現場で使うかもしれない技術ということでvue.jsをちょこちょこっと勉強。とっていっても1時間ぐらいしか勉強しておらずイントロだけですが・・ Contents1 vue.jsとは?2 ソース3 参 …

no image

クロスドメインがらみのajax

ajaxで別ドメインに対して、プログラムを実行したい時に注意すべきことなどを。 Contents1 ログ、レスポンスヘッダをとにかく追う2 特定ドメインからの許可3 フレームワーク側での認証ロジック( …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …