[英]Laravel 5 extend Elixir to include browserify
我的browserify工作流程(从coffee到js,使用coffeeify
browserify-shim
和coffeeify
)是这样的:
我有2个主要文件, app.coffee
和_app.coffee
,分别用于前端和后端。 两个文件分别位于resources/coffee/front
和resources/coffee/back
(分别)。 我想包括browserify
在laravel灵药任务,以便结果文件将在public/js/app.js
和public/js/_app.js
和可修订的build
后的文件夹。
到目前为止,我曾尝试通过创建一个扩展的灵药browserify.js
在仙丹的node_modules文件ingredients
的文件夹。 内容是:
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 elixir任务中,我这样做:
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中(原来它是gulp的)。 即便如此,elixir手表也不会收听我原来的.coffee
文件(我正在尝试查看位于resources/coffee/**/*.coffee
的整个咖啡文件)。
所以我认为解决方案是在文件发生变化时重新运行整个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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.