gulp + webpackでフロントエンド開発

Question

いつもお世話になっております。

今、gulp + webpackでタスクランナーの設定をしております。
やりたいことは、全てのviewで共通で読み込んでいるjsのライブラリ軍を1つのファイルにまとめることです。
具体的にはhtmlで

<script src="./js/jquery.js"></script> <script src="./js/jquery-ui.js"></script> <script src="./js/slick.js"></script>

と複数のjsを読み込んでいるファイルを

<script src="./js/bundle.js"></script>

のように1つのjsにまとめたいです。

webpackの設定でどのようにすればよろしいでしょうか？？

requireでjsを読み込んでインスタンス化するのはよく見るのですが、、、

理解不足で申し訳ございません。。

よろしくお願いいたします。

Answer 1

https://www.npmjs.com/package/gulp-concat
https://www.npmjs.com/package/gulp-uglify

gulp concatで１つのファイルにして
gulp-uglifyでminify化します。

Comments

[MasakazuFukami]

おぉ！！ありがとうございます！！！！

[nanndemoiikara]

解決したようで何よりです。

[MasakazuFukami]

すいません。
昨日質問させていただいたものです。

concatを使い、1つのファイルに纏めるコードを記載しました。

var gulp = require('gulp');
var concat = require('gulp-concat');

gulp.task('scripts', function() {
return gulp.src('./app/javascripts/src/applications/pc/*.js')
.pipe(concat('bundle.js'))
.pipe(gulp.dest('./app/javascripts/dest/'));
});

これでターミナルでgulp scriptsを実行してbundle.jsにconcatしたものが出力されたのですが、bundle.jsにコンパイルされた中のライブラリを読むことができません。

具体的には

app/javascripts/src/applications/pcの中に
easyselectbox.js
jquery-1.8.3.min.js
jquery-ui.min.js
jquery.infinitescroll.js
jquery.transit.js
slick.js

このようなファイルを入れています。
これらをgulp scriptsでコンパイルして
app/javascripts/dest/bundle.jsにしています。

ただ、view内でapp/javascripts/dest/bundle.jsを読み込んだあとに
$('#element').slick();
と呼ぶと、Uncaught TypeError: $(...).slick is not a function
このようなエラーが出てしまいます。。。

こちらどのように解決できるのでしょうか？？

もしよろしければご教授お願い致します。

[nanndemoiikara]

return gulp.src(['./app/javascripts/src/applications/pc/jquery-1.8.3.min.js', './app/javascripts/src/applications/pc/jquery-ui.min.js', './app/javascripts/src/applications/pc/jquery.infinitescroll.js', './app/javascripts/src/applications/pc/jquery.transit.js', './app/javascripts/src/applications/pc/easyselectbox.js', './app/javascripts/src/applications/pc/slick.js'])
.pipe(concat('bundle.js'))
.pipe(gulp.dest('./app/javascripts/dest/'));