标签: laravel-elixir

如何在新的Laravel 5安装中使用SASS而不是LESS？

几周前,SASS是所选择的预处理器,但从那时起,泰勒已经改变了Laravel使用LESS开箱即用.Laravel Elixir/Gulp仍然支持编译SASS,但我不知道如何将SASS文件放入我的项目中.

如果有人有任何步骤的想法,请霍拉.

我只是干净地安装了laravel.Elixir没有合并我的脚本.我对发生的事情毫无头绪.我看到脚本任务被触发但在public/js目录中没有输出文件.

这是我的gulpfile.js:

elixir(function (mix) {
    mix.sass('style.scss')
        .scripts([
            'vendor/jquery.js',
            'vendor/foundation.min.js',
            'script.js'
        ], 'resources/assets/js', 'public/js/app.min.js')
        .scripts([
            'vendor/modernizr.js'
        ], 'resources/assets/js', 'public/js/modernizr.js');
});

它适当地编译sass.

这是目录结构:https://www.uploady.com/#!/ download = 21Y0RI_aYe/V7eKiQHIw2gvyXVD

我目前正在试验我的开发工作流程中的速度减慢,我花费大约3-4s来编译然后版本,这引起了很大的烦恼.我想'拆分'我的观察者,以便它只编译已更改的文件,我想知道这是否可能在Elixir中没有核心Gulp？

目前我有:

mix.less([
        'app.less',
        'login.less',
        'till.less'
    ])
    .version([
        "css/app.css",
        "css/login.css"
    ]);

我已经尝试将其拆分为多个管道,但它似乎覆盖并且只执行最后一项任务:

mix.less([
        'app.less',
        'login.less'
    ])
    .less(['till.css'])
    .version([
        "css/app.css",
        "css/login.css"
    ]);

有什么方法可以解决这个问题吗？

当我gulp在Windows上使用命令行使用Laravel Elixir任务时,每次运行时都会在托盘图标中显示消息.我必须点击文字气球才能gulp完成任务.我觉得这很烦人.

导致此托盘图标出现在Windows上的原因是什么,以及如何禁用它,或者不必单击气球？

我正在我最新的家用机器上安装laravel elixir,在laravel 5.3上工作,我按照确切的文档来安装laravel elixir,但它没有用,它是关于sass文件的抛出错误.这是快照

我该如何解决这个问题.测试版是 - >```

[19:33:15] Using gulpfile ~/sites/dev.friendsforever/server/gulpfile.js
[19:33:15] Starting 'all'...
[19:33:15] Starting 'sass'...
[19:33:16] 'sass' errored after 169 ms
[19:33:16] Error: ENOENT: no such file or directory, scandir '/home/vagrant/sites/dev.friendsforever/server/node_modules/node-sass/vendor'
    at Error (native)
    at Object.fs.readdirSync (fs.js:856:18)
    at Object.getInstalledBinaries (/home/vagrant/sites/dev.friendsforever/server/node_modules/node-sass/lib/extensions.js:119:13)
    at foundBinariesList (/home/vagrant/sites/dev.friendsforever/server/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/home/vagrant/sites/dev.friendsforever/server/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/home/vagrant/sites/dev.friendsforever/server/node_modules/node-sass/lib/errors.js:45:5)
    at Object.<anonymous> (/home/vagrant/sites/dev.friendsforever/server/node_modules/node-sass/lib/index.js:15:28)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
[19:33:16] 'all' errored after 179 ms
[19:33:16] Error in plugin 'run-sequence(sass)'
Message:
    ENOENT: no such file or …

问题是 - 如何强制Laravel Elixir不生成地图文件？

目前,如果我运行,gulp我将生成app.css和app.css.map文件.我不知道这个app.css.map文件是什么,但我认为目前对我来说没有必要.问题是 - 如何强制gulp不生成此文件？

目前我gulpfile.js看起来像这样:

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

elixir(function(mix) {
    mix.sass('app.scss', 'public/css/app.css');
});

如何将多个文件与Elixir混合复制？

这不起作用:

mix.copy([
    ['node_modules/vue/dist/vue.js', 'resources/assets/js/vendor/vue.js'],
    ['node_modules/vue-resource/dist/vue-resource.js', 'resources/assets/js/vendor/vue-resource.js']
]);

除以下任何其他建议:

mix.copy('node_modules/vue/dist/vue.js', 'resources/assets/js/vendor/vue.js');
mix.copy('node_modules/vue-resource/dist/vue-resource.js', 'resources/assets/js/vendor/vue-resource.js');

任何人都可以帮我解决这个问题吗？我正在努力学习如何使用Laravel的elixir.browserify + vue.js,但我无法完成这项工作!我收到这个错误:

gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token

D:\xampp\htdocs\pwebdev-project\resources\assets\js\components\skills.vue:1
<template>
^
ParseError: Unexpected token

知道可能是什么问题吗？我是否需要指定我想要使用vueify的地方,或者我只需要像我一样安装它？

的package.json

{
  "private": true,
  "devDependencies": {
    "babel-runtime": "^6.3.13",
    "gulp": "^3.8.8",
    "vue-hot-reload-api": "^1.2.2",
    "vueify": "^7.0.2"
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.5.0",
    "jquery": "^2.1.4",
    "laravel-elixir": "^4.0.0",
    "vue": "^1.0.11",
    "vue-resource": "^0.1.17"
  }
 }

gulpfile.js

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

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

main.js

var Vue = require('vue')
var Skills = require('./components/skills.vue')

new Vue({
    el: '#app',
    components: {
        'skills' : Skills
    }
})

和/components/skills.vue

<template>
    <div> …

我正在尝试在我的项目中安装CKEditor.我正在使用Laravel.

我知道我可以下载文件,但我喜欢让我的生活变得困难,我决定将CKEditor安装为npm依赖项.

正如他们在这里的文档中所述,我将包添加到package.json,如下所示:

"dependencies": {
    "jquery": "^1.11.1",
    "bootstrap-sass": "^3.0.0",
    "elixir-coffeeify": "^1.0.3",
    "laravel-elixir": "^4.0.0",
    "font-awesome": "^4.5.0",
    "ckeditor": "^4.5.7"
}

现在我想我必须在app.coffee中要求它,所以我尝试了:

window.$ = window.jQuery = require('jquery')
require('bootstrap-sass')
require('ckeditor')

这肯定会将ckeditor.js脚本添加到我的app.js. 但是ckeditor似乎有自己的依赖项,例如config.js或editor.css,当然服务器对这些请求的响应为404.

我怎么能这样安装CKeditor？

谢谢!

我正在使用Laravel 5.在gulp任务期间,处理过的SASS文件和从资源文件夹复制的其他CSS文件存储在public/css中.然后将public/css中的所有文件合并为一个文件"all.css".因此需要删除创建的文件.

我怎样才能做到这一点？