Laravel 5扩展Elixir以包括browserify

我的浏览工作stream程(从coffee到js,带有coffeeify browserify-shimcoffeeify )是这样的:

我有两个主要的文件, app.coffee_app.coffee ,分别为前端和后端。 这两个文件位于resources/coffee/frontresources/coffee/back (分别)。 我正在尝试在laravel elixir中包含browserify任务,以便结果文件将位于public/js/app.jspublic/js/_app.js并且可以稍后修改为生成文件夹。

到目前为止,我试图通过在elixir的node_modulesconfiguration文件夹中创build一个browserify.js文件来扩展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的configuration是:

 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' }] } 

然后在我的吞咽灵药任务中,我这样做:

 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']); }); }); 

这是行不通的,因为callback函数不包含在elixir中(原来它是吞噬的)。 即使是这样,elixir手表也不会听我最初的.coffee文件(我正试图观察位于resources/coffee/**/*.coffee的整个咖啡文件)。

所以我认为解决scheme是重新运行整个elixir过程,如果文件更改,如:

 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()。 任何想法如何做到这一点?

Laravel elixir与browserify捆绑在一起,因此不需要通过浏览器来完成您所能做的事情

 elixir(function(mix) { mix.browserify(['main.js'], 'output directory', 'base-directory-if-different-from-public-folder'); }); 

你不能把它们组合起来,但是你可以同时运行。

 //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'); });