7

私の browserify ワークフロー (コーヒーから js まで、 とbrowserify-shimを使用coffeeify) は次のようになります。

フロントエンドとバックエンドにそれぞれ2 つのメイン ファイルと がapp.coffeeあります。および(それぞれ)_app.coffeeにある両方のファイル。結果ファイルがオンになり、後でフォルダーをリビジョンできるように、laravel elixir にタスクを含めようとしています。resources/coffee/frontresources/coffee/backbrowserifypublic/js/app.jspublic/js/_app.jsbuild

browserify.jsこれまでのところ、 elixir の node_modulesingredientsフォルダーにファイルを作成して、elixir を拡張しようとしました。内容は次のとおりです。

var gulp                =   require('gulp');
var browserify  = require('browserify');
var watchify        = require('watchify');
var source          =   require('vinyl-source-stream');
var logger          =   require('../../../gulp/util/bundleLogger');
var errors          =   require('../../../gulp/util/handleErrors');
var config          =   require('../../../gulp/config').browserify;

elixir.extend('browserify', function(callback) {
    var bundleQueue = config.bundleConfigs.length;
    var browserifyThis = function(bundleConfig) {
        var bundler = browserify({
            cache: {},
            packageCache: {},
            fullPaths: true,
            entries: bundleConfig.entries,
            extensions: config.extensions,
            debug: config.debug
        });

        var bundle = function() {
            logger.start(bundleConfig.outputName);

            return bundler
                .bundle()
                .on('error', errors)
                .pipe(source(bundleConfig.outputName))
                .pipe(gulp.dest(bundleConfig.dest))
                .on('end', finished);
        }

        if (global.isWatching) {
            bundler = watchify(bundler);
            bundler.on('update', bundle);
        }

        var finished = function() {
            logger.end(bundleConfig.outputName);
            if (bundleQueue) {
                bundleQueue--;
                if (bundleQueue === 0) {
                    callback();
                }
            }
        }

        return bundle();
    };

    config.bundleConfigs.forEach(browserifyThis);
});

browserify の設定は次のとおりです。

browserify: {
        debug: true,
        extensions: ['.coffee'],
        watch: './resources/assets/coffee/{front,back}/**/*.coffee',
        bundleConfigs: [
        {
            entries: './resources/assets/coffee/front/app.coffee',
            dest: './public/js',
            outputName: 'app.js'
        },
        {
            entries: './resources/assets/coffee/back/app.coffee',
            dest:  './public/js',
            outputName: '_app.js'
        }]
    }

次に、gulp エリキシル タスクで、次のようにします。

var gulp        =   require('gulp');
var elixir  = require('laravel-elixir');

gulp.task('elixir', function() {
    return elixir(function(mix) {
        mix.sass('app.scss').browserify().version(['.public/css/app.css', './public/js/app.js', '.public/js/_app.js']);
    });
});

関数がelixirに含まれていないため、これはcallback機能しません（元はgulpのものです）。たとえそうであっても、エリクサー ウォッチは元の.coffeeファイルをリッスンしません (私は にあるコーヒー ファイル全体を監視しようとしていますresources/coffee/**/*.coffee)。

したがって、解決策として私が考えたのは、ファイルが変更された場合、次のようにエリキシル手順全体を再実行することです。

gulp.task('default', function() {
    runSequence('coffeelint', 'browserify', 'elixir', 'images', 'watch');
});

そして私のwatch仕事：

gulp.task('watch', function() {
    gulp.watch(config.browserify.watch, ['coffeelint', 'default']);
    gulp.watch(config.images.src, ['images']);
});

しかし、エラーは、elixir の sass() 関数を browserify() にリンクできないということです。これを行う方法はありますか？

4

2 に答える 2

1

Laravel elixir には browserify がバンドルされているので、browserify の require を実行する必要はありません。

elixir(function(mix) {
    mix.browserify(['main.js'], 
                    'output directory',
                    'base-directory-if-different-from-public-folder');
});
于 2015-12-24T13:32:15.640 に答える
0

それらを組み合わせることはできませんが、両方を実行できます。

//gulp.js in the root folder
var elixir = require('laravel-elixir');

var browserify  = require('browserify');

elixir(function(mix) {

    mix.sass(['app.scss'], 'public/css');
});

elixir(function(mix) {

    mix.browserify(['app.js'], 'public/js');
});
于 2015-09-25T03:59:21.153 に答える