Laravel 5扩展Elixir以包括browserify
我的浏览工作stream程(从coffee到js,带有coffeeify
browserify-shim
和coffeeify
)是这样的:
我有两个主要的文件, app.coffee
和_app.coffee
,分别为前端和后端。 这两个文件位于resources/coffee/front
和resources/coffee/back
(分别)。 我正在尝试在laravel elixir中包含browserify任务,以便结果文件将位于public/js/app.js
和public/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'); });