我收到了laravel 5的错误消息,我不明白.

Next exception 'ErrorException' with message 'File build/css/all.css not             
defined in asset manifest.

我没有安装任何资产管道或其他东西.只是使用elixir来编译,缩小和版本化scss文件all.css并将其包含在主视图中<link rel="stylesheet" href="{{ elixir("css/all.css") }}">

什么是"资产清单"以及如何解决这个错误？`

我在我的项目中使用Laravel 5.4并尝试使用Mix设置前端构建系统.一切都工作正常,除了我无法获得浏览器自动重新加载选项.文档上没有任何内容.

有人请帮忙,我该怎么做？

在Laravel 5.4中引入了Mix来编译资产并维护资产管道.将默认值混合到名为的公共目录public.在许多情况下,包括我的,我的公共目录被称为其他东西.在我的情况下,它是public_html.

如何更改编译资产的公共目录？

我试过改变其中的路径webpack.min.js:

mix.js('resources/assets/js/app.js', 'public_html/assets/js')
   .sass('resources/assets/sass/app.scss', 'public_html/assets/css');

不幸的是,这编译为:

- public
|- _html
|-- assets
|--- css
|--- js
|- fonts

在Laravel 5.3和Elixir中,这很简单:

elixir.config.publicPath = 'public_html/assets';

我已经检查了Mix的配置文件,但是在这里看不到任何明显的东西.

请注意:这是Laravel Mix,npm包,所以它与index.php文件中的修改无关.

我使用本教程在我的项目中集成bootstrap:

https://laravel-news.com/2015/10/setup-bootstrap-sass-with-laravel-elixir/

这会将app.css文件放在css文件夹中.但是,如果我尝试使用glyphicons,他们就不会出现.所以我试着像这样修改elixir文件:

    elixir(function(mix) {

    mix.sass('app.scss')
        .browserify('app.js')
        .copy('node_modules/bootstrap-sass/assets/fonts', 'public/css/fonts')   

});

fonts文件夹在public/css/fonts下复制,但没有显示图标.我在这里错过了什么？任何线索？

在我的app.css中,路径似乎是正确的,例如:

src: url("fonts/bootstrap/glyphicons-halflings-regular.eot");

我对Laravel 5.0很新,但不是PHP.我一直在玩Elixir来编译我的SASS,从我的资源目录中复制图像并通过该mix.version函数运行它们以防止缓存.

这适用于CSS,图像和JavaScript; 有没有可能让Elixir缓存 - 破坏我的CSS/SASS中链接的图像？当然,它很容易对图像进行版本控制,但有没有办法调整CSS以反映新的文件名？

我发现了这个:https://github.com/trentearl/gulp-css-url-adjuster ,它允许您将查询参数附加到CSS文件中的文件路径,这样就解决了问题的一半.如果每次gulp运行都可以自动更改查询参数,我会很高兴使用它.

有关如何实现这一目标的任何想法,或者是否有可能实现？

我想这样做的原因是我不断开发我的应用程序,我使用一个大的精灵表,经常重新安排,缓存清除是一个要求,如果它可以自动当吞咽运行,这将节省我很多时间和精力.

谢谢

我使用gulp和laravel elixir来建立一个网站.每次我gulp或gulp --production在我的编辑器(geany)中,都会弹出3个桌面通知.(侏儒3.18.2).当我gulp watch发出通知时也会出现.

我可以禁用这些消息还是只让它们出现在终端中？

对于需要使用变量的VueJS组件,我遇到了一个相当简单的问题.问题在于让sass在组件内注册变量.

我尝试导入_variables.scss包含我的变量的文件,但没有运气.在这一点上,非常感谢任何指导,或者如果组件有另一种方式来继承样式.

MyComponent.vue

<template>
    <div class="my-color"></div>
</template>
<style lang="sass">
    .my-color {
        color: $primary-color;
    }
</style>
<script>
    export default{
        data(){
            return {}
        }
    }
</script>

Gulpfile.js

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

elixir(function(mix) {
    mix.browserify('main.js');
    mix.sass('app.scss');
});

app.scss

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "modules/variables";

variables.scss

$primary-color: #BA2731; //Red

我刚刚安装了Laravel 5.3,这是一个全新的安装,在查看了Docs后我设置了我的Gulpfile如下:

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js')
       .version(['css/app.css', 'js/app.js'])
       .browserSync({
         proxy: 'subdomain.mydomain.dev'
       });
});

出于某种原因,我每次运行gulp watch它都会启动浏览器localhost:3000

我究竟做错了什么？如果我设置地址完全相同,是不是应该将BrowserSync指向我的Mamp Vhost？

我目前正在潜入Laravel Mix,到目前为止,虽然我完全理解Laravel Mix是什么以及它是如何工作的,但我想了解更多关于常见做法和'How-Tos'......

例如,考虑这个文件结构:

/resources/assets/js/app.js (all global functions)
/resources/assets/js/index/index.js (functions specific to index.js)
/resources/assets/js/about/about.js (functions specific to about.js)
/resources/assets/js/contact/contact.js (functions specific to contact.js)

现在,理想情况下,我希望通过以下方式合并和缩小以下内容:

/public/js/index/index-some_hash.js (including app.js)
/public/js/about/about-some_hash.js (including app.js)
/public/js/contact/contact-some_hash.js (including app.js)

据我了解,实现这一目标的方法如下:

// Index
mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/index/index.js'
], 'public/js/index/index.js').version();

// About
mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/about/about.js'
], 'public/js/about/about.js').version();

// Contact
mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/contact/contact.js'
], 'public/js/contact/contact.js').version();

我的问题

很简单,我想知道以上是否是正确的方法来做我想做的事情？是否有更好的方法,或更常见的方法来实现这一目标？

如果上述结构错误,我的文件还有其他方式可以合并,请分享您的知识.但是,除非有充分的理由,否则我想避免以下情况:

• 为每个页面提供两个单独的文件,即app.min.js和index.min.js.这需要每页两次查找,理想情况下应该尽可能少
• 将同一文件提供给我网站上的所有页面.将代码提供给不会使用它的页面是浪费资源,无论缓存...

一个想法......

我注意到其中一个JS文件中有一行代码; require('./bootstrap');.叫我老式,但我从未在JavaScript中看到过这种情况(我假设它来自node.js).也就是说,显然它只是将bootstrap.js文件作为依赖项加载到特定文件中.因此,考虑到这一点,以下解决方案是否会更好:

about.js

require('./app'); // Include global functions

// Do some magic here specifically …

如何将纯CSS和Sass文件与Laravel Elixir结合使用？如果我运行以下代码,则在public/CSS/目录上生成两个文件"all.css"和"app.css" .但是,我只想生成一个CSS文件all.css.你们知道做任何技巧吗？

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