2015-03-09 3 views
7

Мой browserify рабочий процесс (от кофе JS, с browserify-shim и coffeeify), как это:Laravel 5 продлить эликсир включить browserify

У меня есть 2 основных файлов, app.coffee и _app.coffee, соответственно для интерфейса и серверной. Оба файла находятся в resources/coffee/front и resources/coffee/back (соответственно). Я пытаюсь включить задачу browserify в laravel elixir, поэтому файл результатов будет на public/js/app.js и public/js/_app.js и может быть изменен в папку build позже.

До сих пор я пытался расширить эликсир, создав файл browserify.js в папке node_modules elixir 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); 
}); 

Config для 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' 
     }] 
    } 

Тогда в моем глотке задаче эликсира, я делаю это:

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 не будут слушать мои оригинальные файлы .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']); 
}); 

Но ошибка заключается в том, что он говорит, что функция sass() в elixir не может быть связана с браузером(). есть идеи как это сделать?

ответ

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

Laravel эликсира приходит пакет с browserify поэтому нет необходимости, чтобы сделать требовать от browserify то, что вы можете сделать, это

elixir(function(mix) { 
    mix.browserify(['main.js'], 
        'output directory', 
        'base-directory-if-different-from-public-folder'); 
}); 
Смежные вопросы