标签: laravel-elixir

我在使用Laravel Elixir时遇到了一些麻烦,并按照执行的顺序进行操作.我一直被认为链接elixir调用将迫使它们同步执行但我遇到了一些问题,在某些情况下某些命令似乎没有执行或似乎执行的顺序意味着它们没有正确完成.

我的第一个问题是dependencies.js该version()函数从未被函数版本化,直到我将这两个scripts()函数交换为圆形,因此dependencies.js第二个问题是第二个.

另一个问题是,当我通过gulp函数运行任务时,大多数时候,字体很棒的字体会被复制到构建目录中.但是,在运行时,gulp watch它们经常被省略.

我能够解决这两个问题,但我一直看到这样的小事让我觉得我并不完全理解它的执行顺序和细微之处.有谁知道我是否遗漏了明显的东西？

谢谢.

这是我的gulpfile.js代码:

mix.sass("app.scss", 'public/css/', {
        includePaths: [paths.bootstrap + 'stylesheets/']
    })
    .scripts([
        'js/app.js'
    ], 'public/js/app.js', paths.assets)
    .scripts([
        // paths.jquery + "dist/jquery.js",
        paths.bootstrap + "javascripts/bootstrap.js",
        paths.assets + "js/freelancer/classie.js",
        paths.assets + "js/freelancer/cbpAnimatedHeader.js",
        paths.assets + "js/freelancer/jqBootstrapValidation.js",
        paths.assets + "js/freelancer/contact_me.js",
        paths.assets + "js/freelancer/freelancer.js"
    ], 'public/js/dependencies.js', './')
    .version([
        'public/js/dependencies.js',
        'public/js/app.js',
        'public/css/app.css'])
    .copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/build/fonts')
    .copy(paths.assets + 'fonts/font-awesome/', 'public/build/fonts');

我在这两个文件resources/assets/less夹style.less和admin/style.less.我想将这些文件编译为不同的路径,如下所示:

style.less 编译成 public/css/

而另一个编译为 public/admin/styles/

这就是我在gulpfile.js中所做的

elixir(function(mix) {
    mix.less('style.less', 'public/css/');
    mix.less('admin/style.less', 'public/admin/styles/');
});

但这只编译一个文件.有什么问题,我该如何解决这个问题？

如何使用Laravel基金会？

我以为我会在vendor文件夹中安装Foundation bower install foundation.这导致vendor/bower_components我有一个文件夹,我有基础和所有必需的库,如jQuery.

我应该添加什么来gulpfile.js让Elixir正确解释这一点？它应该是可能的

• 更新Bower组件
• 安装新的Bower套餐
• 修改Foundation Sass变量,不要在更新时覆盖这些变量
• 使用指南针

在非Laravel项目中,我将运行Ruby gem foundation new my_project并手动包含已编译的文件.但是,在这种情况下,该命令会创建许多不需要工作的文件.

从昨天开始,gulp抛出未处理的错误事件:

"C:\Program Files (x86)\JetBrains\PhpStorm 10.0.1\bin\runnerw.exe" "C:\Program >Files\nodejs\node.exe" C:\..\..\..\..\..\node_modules\gulp\bin\gulp.js --color -->gulpfile "d:\..\..\..\gulpfile.js" default
[11:41:02] Using gulpfile d:\..\..\..\gulpfile.js
[11:41:02] Starting 'default'...
[11:41:02] Starting 'sass'...

Fetching Sass Source Files...
   - resources\assets\sass\app.scss


Saving To...
   - public\css\app.css

[11:41:02] Finished 'default' after 323 ms
events.js:141
      throw er; // Unhandled 'error' event
      ^

Error: no writecb in Transform class
    at afterTransform (d:\..\..\..\node_modules\gulp-autoprefixer\node_modules\readable->stream\lib\_stream_transform.js:95:33)
    at Immediate.TransformState.afterTransform (d:\..\..\..\node_modules\gulp->autoprefixer\node_modules\readable-stream\lib\_stream_transform.js:79:12)
    at Immediate.immediate._onImmediate (timers.js:435:18)
    at processImmediate [as _immediateCallback] (timers.js:383:17)

我已经删除了所有的node_modules并重新安装它们而没有运气.

其他人有这个问题吗？

版本:

• Laravel Framework版本5.1.24(LTS)
• 节点:4.2.2
• npm:3.5.1
• 吞咽:3.90

我正在使用Linux Mint,我正在尝试运行编译sass文件.我已经安装了npm和node.但是当我运行时gulp,它不会编译,并且它不会在public目录中生成css文件.当我运行它时,它不显示任何错误或任何东西.

我应该如何在Laravel 5.2中编译sass文件？谢谢!

编辑:这是截图:

Gulpfile.js是:

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

/*
 |--------------------------------------------------------------------------
 | 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.
 |
 */

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

我的app.scss文件是:

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

li {
  color: red;
}

Updated: When I ran again `npm install` …

我如何使用interceptor的vue.js？因此,在每个请求/响应之前,它应首先进入拦截器.我已经搜索了很多但是找不到关于它的好文档.

我想像这样使用JWTAuth:

(function (define) {
  'use strict'

  define(function (require) {

    var interceptor

    interceptor = require('rest/interceptor')

    /**
     * Authenticates the request using JWT Authentication
     *
     * @param {Client} [client] client to wrap
     * @param {Object} config
     *
     * @returns {Client}
     */
    return interceptor({
      request: function (request, config) {
        var token, headers

        token = localStorage.getItem('jwt-token')
        headers = request.headers || (request.headers = {})

        if (token !== null && token !== 'undefined') {
          headers.Authorization = token
        }

        return request
      }, …

我试图在laravel项目中将大量Vue.js组件加载到我的app.js文件中(使用browserify/vueify通过elixir).

我不想一次加载每个组件,而是在使用vue路由器时需要延迟加载各个vue组件.

我在哪里设置partition bundle json文件以及如何构建文件？

目前,我已将以下主要app.js文件绑定:

import Vue from 'vue';
import Resource from 'vue-resource';
import VueRouter from 'vue-router';

// These are the components that I wish to lazy load:
// import Users from './components/Users.vue';
// import Sales from './components/Sales.vue';
// import Projects from './components/Projects.vue';
// import Dashboard from './components/Dashboard.vue';
// import Receipts from './components/Receipts.vue';

Vue.use(Resource);
Vue.use(VueRouter);

var router = new VueRouter();

router.map({
  '/async': {
    component: function (resolve) {
      loadjs(['./components/Users.vue'], resolve)
    }
  } …

嗨,我在运行gulp手表时遇到此错误.我在laravel项目中使用vueify.为什么会发生这种情况.这些天它一直很好,今天就来了.

$ gulp watch  
[12:56:01] Using gulpfile ~/Documents/web_projects/next-home/gulpfile.js  
[12:56:01] Starting 'watch'...  
[12:56:01] Starting 'browserify'...  
Fetching Browserify Source Files...  
    - resources/assets/js/app.js  
Saving To...  
   - public/js/app.js  
[12:56:02] Finished 'browserify' after 707 ms  
[12:56:02] 'watch' errored after 722 ms  
[12:56:02] Error: watch /home/bazi/Documents/web_projects/next-home/resources/assets/less/ ENOSPC  
    at exports._errnoException (util.js:893:11)  
    at FSWatcher.start (fs.js:1313:19)  
    at Object.fs.watch (fs.js:1341:11)  
    at Gaze._watchDir (/home/bazi/Documents/web_projects/next-home/node_modules/gaze/lib/gaze.js:289:30)  
    at /home/bazi/Documents/web_projects/next-home/node_modules/gaze/lib/gaze.js:358:10
    at iterate (/home/bazi/Documents/web_projects/next-home/node_modules/gaze/lib/helper.js:52:5)  
    at Object.forEachSeries (/home/bazi/Documents/web_projects/next-home/node_modules/gaze/lib/helper.js:66:3)  
    at Gaze._initWatched (/home/bazi/Documents/web_projects/next-home/node_modules/gaze/lib/gaze.js:354:10)  
    at Gaze.add (/home/bazi/Documents/web_projects/next-home/node_modules/gaze/lib/gaze.js:177:8)  
    at new Gaze (/home/bazi/Documents/web_projects/next-home/node_modules/gaze/lib/gaze.js:74:10)  
events.js:154  
      throw er; // Unhandled 'error' event …

我正在使用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文档,并希望安装Elixir来管理sass和其他预处理器.

但是当我从laravel根文件夹开始"npm install"时,我最终得到:

35.861项目的114.316.724字节(磁盘上为220,3 MB)

在node_modules文件夹中!

请告诉我,Elixir或Gulp不需要这种荒谬的依赖,或者我做错了什么？

package.json包含:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^5.0.0",
    "bootstrap-sass": "^3.3.0"
  }
}