使用laravel elixir设置browserify观察器

时间:2016-05-20 19:09:05

标签: laravel gulp laravel-elixir

我试图添加一个浏览器观察器来自动编译我对我的一些反应组件的更改,但观察者没有工作...

这让我疯了!我不明白为什么这些任务选手必须如此复杂并且没有标准的API!

任何帮助都会有很大帮助!

无论如何,这是我的浏览器任务

// react components
elixir(function(mix) {
    mix.browserify(assetsJsDir + "components/*.jsx");
});

这里是整个gulpfile.js

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

elixir.config.js.browserify.watchify.enabled = true;

var bowerDir = './bower_components/';
var assetsJsDir = './resources/assets/js/';
var assetsCssDir = './resources/assets/css/';

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

// styles
elixir(function(mix) {
    mix.sass('app.scss')
    .version(['css/app.css']);
});

// external libs js files
elixir(function(mix) {
    mix.scripts([
        bowerDir + 'jquery/dist/jquery.min.js',
        bowerDir + 'bootstrap/dist/js/bootstrap.min.js',
        bowerDir + 'react/react.js',
        bowerDir + 'react/react-dom.js',
        bowerDir + 'lodash/dist/lodash.min.js',
    ], 'public/js/extlibs.js', ".")
    .version(['js/extlibs.js']);
});

// react components
elixir(function(mix) {
    mix.browserify(assetsJsDir + "components/*.jsx");
});

// my libs js files
elixir(function(mix) {
    mix.scripts([
        assetsJsDir + "pagevars.js",
        assetsJsDir + "traininglog-lib.js",
        assetsJsDir + "session_new.js",
    ], "public/js/app.js")
    .version(['js/app.js']);
});

1 个答案:

答案 0 :(得分:0)

我使用了错误的方法。

我想做的是

elixir(function(mix) {
    mix.babel([
        assetsJsDir + "components/*.jsx"
    ], "public/js/components.js")
    .version("js/components.js");
});

现在可行了