gulp、webpackでjqueryプラグイン(scrollmagic、tweenmax等)を使う時の設定

メモメモ
前提条件

• gulp-webpack、webpackがnpm installされている
• bowerにてscrollmagic等のプラグインをインストールしている

パスは適宜変更してください

#webpack.config.js

• gulpタスクが読み込む設定ファイルです。

var webpack = require("webpack");
var path = require('path');

module.exports = {
    output: {
        filename: "bundle.js"
    },
    resolve: {
        root: [path.join(__dirname, "bower_components")],
        extensions: ['', '.js', '.coffee', '.html'],
        modulesDirectories: ['node_modules', 'bower_components'],
        alias: {
            bower: 'bower_components',
            TweenLite: __dirname + '/bower_components/gsap/src/uncompressed/TweenLite.js',
            TweenMax: __dirname + '/bower_components/gsap/src/uncompressed/TweenMax.js',
            TimelineLite: __dirname + '/bower_components/gsap/src/uncompressed/TimelineLite.js',
            TimelineMax: __dirname + '/bower_components/gsap/src/uncompressed/TimelineMax.js',
            ScrollMagic: __dirname + '/bower_components/ScrollMagic/js/jquery.scrollmagic.js',
            bxSlier: __dirname + '/bower_components/bxslider/jquery.bxSlider.min.js'
        }
    },
    module: {
        loaders: [
            { test: /\.coffee$/, loader: 'coffee' }
        ]
    },
    plugins: [
        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery",
            jquery: "jquery"
        })
    ]
};

• resolveのaliasでそれぞれのモジュールへのパスと、読み込むときの名前を設定します。

#webpack.js

• gulpタスクの方です

var gulp = require('gulp');
var conf = require('path/to/webpack.config.js');
var webpack = require("gulp-webpack");
module.exports = function () {
    gulp.task('webpack',function() {
        gulp.src('path/to/app.coffee')
        .pipe(webpack(conf))
        .pipe($.uglify())
        .pipe(gulp.dest('path/to/bundle.js'))
        .pipe($.browser.reload({stream: true}));
    });
}();

#app.coffee

• requireの仕方

require 'TweenMax'
ScrollMagicObject = require 'ScrollMagic'
window.ScrollMagic = ScrollMagicObject.Controller
window.ScrollScene = ScrollMagicObject.Scene
bxSlider = require 'bxSlier'

• TweenMaxはrequireだけすることで使えました。
• ScrollMagicはControllerとSceneをグローバルに入れることで通常通り使えました。
• bxSliderは変数に入れることで使えました。