こちらのリンクでJSのnpmパッケージでのインストール&ビルドをしたので、gulpでのビルドを。
前提条件としては
- nodeのインストール
- npmのインストール
がされていればOKです。
最小構成でいうとgulp,gulp-webback,config.js(設定ファイル)が読み込めればOKです。※サンプルでは例としてjQueryを読み込んでいます。
1 |
npm install -D gulp gulp-webpack jquery |
sample_rs.js ビルドしたいjs
jQueryを読み込みオリジナルの処理をここに書きます。
1 2 3 4 5 6 7 |
'use strict'; var $ = require('jquery'); $(function(){ $('#hoge').html('bbbb'); }); |
config.js 設定ファイル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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 ※ここでタスクを実行します。
1 2 3 4 5 6 7 8 9 |
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ももちろん入っています。)
1 |
npm run gulp webpack |
sample.html コンパイルしたjsをよみこむhtml
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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> |
ソース
https://github.com/umanari145/library/tree/master/resources
参考リンク
webpack初心者がJavaScriptをビルドするまでの手順
*ちなみにnpmのinstallはバージョン依存関係で結構こけます。
うまく行かずもう一度最初からやりたいときは以下のコマンドで。
1 2 3 |
rm -rf node_modules/ npm cache clean npm install |