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

投稿日：2017年11月26日更新日：2019年2月10日

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

前提条件としては

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

がされていればＯＫです。

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

 npm install -D gulp gulp-webpack jquery

1	npm install -D gulp gulp-webpack jquery

sample_rs.js ビルドしたいjs

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

'use strict';

var $ = require('jquery');

$(function(){
	$('#hoge').html('bbbb');
});

'use strict';

var $ = require('jquery');

$(function(){

$('#hoge').html('bbbb');

});

config.js 設定ファイル

var dest = './resources'; // 出力先ディレクトリ
var src = './resources';  // ソースディレクトリ

module.exports = {
  // 出力先の指定
  dest: dest,

  // jsのビルド設定
  js: {
    src: src + '/**',
    dest: dest + '/',
    uglify: true
  },
  // webpackの設定
  webpack: {
    entry: src + '/sample_rs.js',
    output: {
      filename: 'build.js'
    }
  }
}

var dest = './resources'; // 出力先ディレクトリ

var src = './resources'; // ソースディレクトリ

module.exports = {

// 出力先の指定

dest: dest,

// jsのビルド設定

js: {

src: src + '/**',

dest: dest + '/',

uglify: true

// webpackの設定

webpack: {

entry: src + '/sample_rs.js',

output: {

filename: 'build.js'

}

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

var gulp = require('gulp');
var webpack = require('webpack');
var config = require('config.js');
var webpackStream = require('webpack-stream');
gulp.task('webpack',function(){

    return webpackStream(config.webpack, webpack)
        .pipe(gulp.dest(config.js.dest));
});

var gulp = require('gulp');

var webpack = require('webpack');

var config = require('config.js');

var webpackStream = require('webpack-stream');

gulp.task('webpack',function(){

return webpackStream(config.webpack, webpack)

.pipe(gulp.dest(config.js.dest));

});

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

npm run gulp webpack

1	npm run gulp webpack

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <head>
   <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="build.js"></script>
    <body>
    <div id="hoge">
    	aaaa　←ここがのちほどbbbになります。
    </div>
    </body>
</html>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://xmlns.jcp.org/jsf/html">

<head>

<body>

aaaa　←ここがのちほどbbbになります。

</div>

</body>

</html>

ソース

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

参考リンク

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

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

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

rm -rf node_modules/
npm cache clean
npm install

rm -rf node_modules/

npm cache clean

npm install