标签: laravel-elixir

我有内容的gulpfile.js

var gulp = require('gulp');//this is working
gulp.task('default', function() { });//this is working
var elixir = require('laravel-elixir');//this is NOT working

在cmd中运行"gulp"我收到一条消息:

C:\myaccount\workspace\todoparrot>gulp
module.js:338
    throw err;
    ^
Error: Cannot find module 'lodash._baseclone'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:286:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (C:\myaccount\workspace\todoparrot\node_modules\laravel-elixir\node_modules\gulp-notify\node_modules\node-notifier\node_modules\lodash.clonedeep\index.js:9:17)
    at Module._compile (module.js:434:26)
    at Object.Module._extensions..js (module.js:452:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)

命令gulp正在工作,但如何设置elixir工作,gulp正在努力.什么是laravel/elixir正确的版本写入文件composer.js需要{..,"laravel/elixir":"???????",..}.是"laravel/elixir"还是"laravel-elixir".我找不到足够好的指示.

我正在使用knockout.js组件,Laravel传递配置信息.

淘汰代码列出默认选项,并使用ES2015(新Javascript)将它们与laravel参数合并,例如:

this.options = {};
const defaults = {
    option1: true,
    option2: false,
    option3: true
};
Object.assign(this.options,defaults,data.options);

data.options是Laravel Blade中设置的选项

Object.assign工作正常,除了<= IE9

所以我必须插入代码而不是Object.assign:

for (var key in defaults) {
    if (data.options.hasOwnProperty(key)) {
        this.options[key] = data.options[key];
    } else {
        this.options[key] = defaults[key];
    }
}

我很想杀掉这个旧代码,但仍使用以下NPM Babel转换支持IE9:

https://www.npmjs.com/package/babel-plugin-transform-object-assign

然而Laravel Elixir似乎没有babel.rc配置,所以我无法让这个转换工作.

帮助赞赏!

我的项目基于Laravel并使用Laravel Elixir来编译和缩小客户端代码(用ECMAScript 6编写).

我注意到如果我对客户端代码进行任何更改,然后使用gulp并重新加载页面再次编译所有内容我在Chrome中收到以下错误:

未捕获的SyntaxError:无效或意外的令牌

无法解析SourceMap:http://192.168.99.100/js/app.js.map

如果我检查,app.js我可以看到为什么我遇到这个问题:

每个红点都是角色\u0.

之后我在IDE中检查了同一个文件,最后没有这样的字符.

如果我还原我的更改,然后再次重新编译,gulp一切都开始工作.

我的gulpfile.js:

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

// Enable full sourcemaps with browserify. Disable in production.
elixir.config.js.browserify.options.debug = true;

// Disable notifications
process.env.DISABLE_NOTIFIER = true;

elixir(function(mix)
{
    // Compile SASS
    mix.sass('app.scss');

    mix.browserify('app.js');

    mix.browserSync({
        notify : false,
        open: false,        
        proxy : '192.168.99.100',
        reloadDelay: 2000
    });
});

不确定是否重要,但应用程序在由Mac OS X托管的共享文件夹内的多个docker容器中运行.

使用Laravel Elixir和Webpack时,我无法获得JQuery UI.

这是我的gulpfile.js,没什么不寻常的:

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

elixir.config.sourcemaps = false;

elixir(mix => {
    mix.sass('app.scss')
       .webpack('app.js');
});

我的app.js文件是我试图同时需要JQuery和JQuery UI的地方.我尝试了很多东西,但这就是我所处的位置:

window.$ = window.jQuery = require('jquery');
window.$ = $.extend(require('jquery-ui'));

无论我做什么,我似乎都无法获得所需的JQuery UI和工作.

我知道L5和Elixir仍处于开发阶段,但我很高兴开始考虑重组代码的方法.在L5和Elixir的背景下,我认为我的问题更多地与资产管理有关.

想澄清应如何处理连接和版本控制(在我的情况下,我使用的是Elixir styles()和version()).我遇到的问题是concat/version之后的新文件将位于一个新文件夹中,从原始css或js文件中破坏对资产的任何引用.

例如,原始CSS文件background-image: url('../img.png')将不再起作用.我尝试了几件事,但两者都不理想,特别是在供应商插件的情况下:

1. 将所需资产逐个移动(对每个资产文件夹使用mix.copy())到新构建路径(即Elixir版本控制使用的构建路径).
2. 手动编辑每个资产文件中的路径以引用绝对路径

虽然这两个选项都可以使事情有效,但我觉得我可能会遗漏一些东西.使用javascript插件(例如带有自己的图像,字体,样式表等的插件)时,它也变得非常不切实际.

在连接和版本控制时,是否有更实用的方法来管理相对路径？

我和Laravel Elixir有问题.version('xxxxxx.js').由于某种原因,似乎我不能使用.versionjs文件或除了.css甚至有多个版本化的js文件.

elixir(function(mix) {

    /**
     * My Less
     */

    mix.less('app.less').version('public/css/app.css');

    /**
     * Vendor Scripts
     */

    mix.scripts([
        'jquery/dist/jquery.js'
    ], 'public/js/vendor.js', 'resources/assets/bower_components/').version('public/js/vendor.js');

    /**
     * My Scripts
     */

    mix.scripts(['app.js','app2.js'], 'public/js/app.js', 'resources/assets/scripts').version('public/js/vendor.js');

});

我的laravel-elixir配置如下:

var config = {
    production: !! util.env.production,
    srcDir: 'app',
    assetsDir: 'resources/assets/',
    cssOutput: 'public/css',
    jsOutput: 'public/js',
    bowerDir: 'resources/assets/bower_components',
    tasks: [],
    watchers: { default: {} },
    duplicate: [],
    concatenate: { css: [], js: [] }
};

我有这个gulpfile.js https://gist.github.com/kristapsveveris/c25ba60984d8f3602d68

当我运行gulp任务时,结果是:http:

//maxtraffic.com/assets/img/public-assets.png

rev-manifest.json包含:

{
  "assets/js/all.js": "assets/js/all-d764f790.js",
  "assets/css/all.css": "assets/css/all-189848ae.css",
  "assets/css/serve-desktop.css": "assets/css/serve-desktop-037f21da.css",
  "assets/css/serve-mobile.css": "assets/css/serve-mobile-b0a650b6.css"
}

所以问题是版本控制不会创建'campaign.js'和'serve.js'只有他们的.map文件

如果我跑:

 gulp --production && gulp version --production

将创建所有版本控制文件

我正在从windows运行gulp任务

我正在使用一堆"console.log"调用来调试我的JS应用程序.但是,我想在将代码发送到生产环境时自动删除它们.

使用传统的gulp文件,我会使用"gulp-strip-debug"插件,该插件仅在我运行"生产"主要任务时触发.

但是,当使用Laravel Elixir时,它有点不同.我使用"--production"标志来最小化我的资产,但之后我想执行strip-debug任务.我在Laravel 5.1文档中找不到如何做到这一点.

所以我看到elixir不会自动使用autoprefixer.这是我的gulp文件的样子:

var Elixir = require('laravel-elixir');
var autoprefixer = require('gulp-autoprefixer');
var gulp = require('gulp');

Elixir.config.sourcemaps = false;

gulp.task('sass', function() {
    return gulp.src('resources/sass/app.scss')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('public/css/app.css'));
});

Elixir(function(mix) {

    // Copy bootstrap.min.js to node vendor directory until it becomes a node module
    mix.copy('public/vendor/bootstrap-4', 'node_modules/bootstrap-4');

    // Combine all vendor scripts
    mix.scripts([
        'bootstrap-4/dist/js/bootstrap.min.js',
        'vue/dist/vue.min.js'
    ], 'public/js/vendor.js', 'node_modules');

    // Combine all files into one single CSS file
    mix.task('sass', 'resources/sass/**/*.scss');

    // Get rid of cached version
    mix.version([
        'public/js/vendor.js',
        'public/css/app.css'
    ]); …

我正在开发一个Web应用程序，该应用程序将vue-router用于带有Laravel 5后端的SPA。它使用.vue用于运行应用程序组件的文件laravel-elixir-vueify来创建所需的JavaScript。

我已经与Vue一起成功设置了vue-router，并且可以加载与主Vue和Vue路由器实例相同的文件中定义的组件。

但是，当我尝试并需要.vue文件中包含的组件时，问题就来了。尽管browserify / vueify在我检查Vue实例时报告运行成功，但是Vue dev-tools在实例内仅显示匿名组件片段，而在内没有标记router-view。

控制台内部没有错误，尽管看起来外部组件未正确加载。

各种代码和文件的示例如下：

gulpfile.js

...
    mix.browserify('dashboard.js');
...

dashboardOverview.vue

<template>
    <div>
        <h1>Overview</h1>
        <img src="//placehold.it/320x100" style="width: 100%; margin-bottom: 15px" alt="Pathway Visualisation" />
    </div>
</template>

<script>

    export default {}

</script>

凡dashboardOverview.vue位于resources\assets\js\components\dashboardOverview.vue。

主视图

@section('content')
<div id="app">
    <h1>Welcome</h1>
    <a v-link="{ path: '/activate' }">Activate</a>|
    <a v-link="{ path: '/' }">Overview</a>
    <router-view></router-view>
</div>
@endsection

以下JavaScript对此进行了补充：

var Vue = require('vue');
var VueRouter = require('vue-router');

Vue.use(VueRouter)

/* Components */
var dashboardOverview = …