jeffreyway / laravel-elixir-stylus Goto Github PK

The default directory in the package is currently looking at
resources/assets/sass/

not

resources/assets/stylus/
per docs.

Something must have changed on laravel-elixir 6 that broke laravel-elixir-stylus, the error below happens if using laravel-elixir@^6.0.0-1 but not when using 5.0.0 or below.

vagrant@homestead:/srv/www/vue$ gulp
module.js:341
throw err;
^

Error: Cannot find module 'laravel-elixir/tasks/shared/Css'
at Function.Module._resolveFilename (module.js:339:15)
at Function.Module._load (module.js:290:25)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object. (/usr/lib/node_modules/laravel-elixir-stylus/index.js:4:15)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)

Hi,

When running laravel-elixir with the laravel-elixir-stylus package, I get the following error:

module.js:340
    throw err;
          ^
Error: Cannot find module 'laravel-elixir/ingredients/helpers/Utilities'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Users/jakecleary/pp/touchline/node_modules/laravel-elixir-stylus/index.js:8:17)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

My gulp file looks like this:

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

require('laravel-elixir-stylus');

elixir(function(mix) {
    mix.stylus('main.styl');
});

My stylus file is here: /resources/assets/stylus/main.styl

Any help would be greatly appreciated. Thank you in advance 😄

I just tried to require this into a new project and the the following stack trace:

Error: Cannot find module 'laravel-elixir/tasks/shared/Css'
    at Function.Module._resolveFilename (module.js:337:15)
    at Function.Module._load (module.js:287:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/home/vagrant/Code/richKode/node_modules/laravel-elixir-stylus/index.js:4:15)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)

This is my gulpfile.js

var elixir = require('laravel-elixir');
var stylus = require('laravel-elixir-stylus');
/*
 |--------------------------------------------------------------------------
 | 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.stylus('main.stly');
});

Im using Laravel 5.1 with Vagrant/Homestead on a mac with OSX 10.1.1 (El Cap) and I've installed the package via command line with npm install --save-dev laravel-elixir-stylus which installed without errors.

Thanks for you help.

I have a Gulpfile with the necessary require require('laravel-elixir-stylus'); and a call to mix.stylus('test.styl').

This is my package.json:

{
    "devDependencies": {
        "gulp": "^3.8.8",
        "gulp-rev": "^2.0.1",
        "laravel-elixir": "^0.4.7",
        "laravel-elixir-stylus": "^0.2.9",
        "laravel-elixir-codeception": "^0.1.2"
    }
}

• I have not had success with only gulp, laravel-elixir, and stylus imports as well.
• I have also removed the node_modules directory a number of times and done a npm install to redownload the packages.
• I have run npm clean cache a few times

This is the error I am getting

/home/youanden/projects/masked/node_modules/laravel-elixir-stylus/index.js:13
    var baseDir = config.preprocessors.baseDir + 'stylus';

TypeError: Cannot read property 'baseDir' of undefined
    at Object.stylus (/home/youanden/projects/masked/node_modules/laravel-elixir-stylus/index.js:13:39)
    at /home/youanden/projects/masked/Gulpfile.js:20:6
    at Elixir (/home/youanden/projects/masked/node_modules/laravel-elixir/index.js:3:2)
    at Object.<anonymous> (/home/youanden/projects/masked/Gulpfile.js:16:1)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)

I manually edited the laravel-elixir-stylus/index.js to log out the value of the config variable:

{ tasks: [ 'less', 'scripts', 'coffee' ],
  watchers:
   { default:
      { less: 'resources/assets/less//**/*.less',
        scripts: 'js//**/*.js',
        coffee: 'resources/assets/coffee//**/*.coffee' } },
  production: false,
  assetsDir: 'resources/assets/',
  concatenate: { css: [], js: [ [Object] ] },
  cssOutput: 'public/css',
  jsOutput: 'public/js',
  registerWatcher: [Function],
  buildGulpSrc: [Function],
  combine: [Function],
  queueTask: [Function],
  prefixDirToFiles: [Function],
  stylus: [Function],
  codeception: [Function],
  coffee: [Function],
  copy: [Function],
  events: [Function],
  less: [Function],
  phpSpec: [Function],
  phpUnit: [Function],
  routes: [Function],
  sass: [Function],
  scripts: [Function],
  styles: [Function],
  version: [Function] }

In the end I changed the laravel-elixir-stylus/index.js file to instead reference var baseDir = config.assetsDir + 'stylus';

The compilation worked successfully but I'm not sure that's the correct fix so I am not issuing a pull request.

Thanks for your work!

This could be related to an error I am seeing often:

[13:10:31] gulp-notify: [Error in notifier] Error in plugin 'gulp-notify'
notify-send must be installed on the system.

Basically, running gulp works and compiles stylus perfectly, while running gulp watch yields a detection followed by a finished status. However, the generated css file is empty. I disabled versioning with gulp-rev for this.

Thanks!

Hi,

I use stylus in separated files, but when translate my gulpfiles to elixir i have a problem with compilation because 1 of my file is all variables for my another files. I notice it because laravel-elixir-stylus just compile every single file, not concat first like mix.styles or mix.scripts do.

I'm trying to solve this problem, but not "right way" because my modification just install gulp-concat as dependency and concat all files before stylus compilation. The paths.output not as expected.

What do you think? Thanks.

Same error in new version 6.0.0-2 as #19

Hi,
I don't know what happend but the fresh install of laravel, gulp woks fine but if I install your stylus package gulp throws this error:

module.js:328
    throw err;
    ^

Error: Cannot find module 'laravel-elixir/dist/tasks/CssTask'
    at Function.Module._resolveFilename (module.js:326:15)
    at Function.Module._load (module.js:277:25)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/PATH_TO_LARAVEL/node_modules/laravel-elixir-stylus/index.js:1:77)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)

I have a project where the default path is not resources/assets and in order to set the correct path a forked this repository. I hope, I didn't overlook any option to set the path to the source file.

so I added an extra argument to

Elixir.extend('stylus', function(src, output, baseDir, options) {

and extracted the paths variable to set the correct path to watch

var path = prepGulpPaths(src, baseDir, output):

new Elixir.Task('stylus', function() {

    return compile({
        name: 'Stylus',
        compiler: require('gulp-stylus'),
        src: paths.src,
        output: paths.output,
        task: this,
        pluginOptions: options || config.css.stylus.pluginOptions
    });
})
.watch(paths.src.baseDir + '/**/*.styl')
.ignore(paths.output.path);

and modified the prepGulpPaths function

var prepGulpPaths = function(src, baseDir, output) {
    return new Elixir.GulpPaths()
        .src(src, baseDir || config.get('assets.css.stylus.folder'))

I have a custom place for assets:

elixir.config.assetsDir = 'resources/assets/app/';

This affects other tasks, but not stylus. Currently I workaround this with such setup:

mix.stylus('../app/stylus/app.styl', 'public/assets/app/css/app.css');

But obviously assetsDir option should be respected.

LostGrid has moved into releasing version 7.0.* and it has some smaller new features but most important, a lot of bug fixes. It would be nice if the dependency could be upgraded.

Thank you.

Module 'laravel-elixir/tasks/shared/Css' not found in laravel-elixir when trying compile with gulp.

I have just tried a fresh laravel 5.3 (dev) and elixir 6, tried to pull in laravel-elixir-stylus 2.x and all my lost grid directives are not compiled anymore.

Packaged used:
"gulp": "^3.9.1",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-stylus": "^2.0.2",
"laravel-elixir-vue": "^0.1.4",
"laravel-elixir-webpack-official": "^1.0.2"

My gulpfile.js
var elixir = require('laravel-elixir');
require('laravel-elixir-stylus');
elixir(function(mix) {
mix.sass(['app.scss'], 'resources/assets/css')
.webpack('app.js')
.stylus('app.styl', 'resources/assets/css/app.stylus.css')
.styles([
'app.css',
'app.stylus.css'
]);
});

Would you add support or accept a pull request to add nib http://tj.github.io/nib/ to this extension?

I'm sure this is just a terrible bug report, but I wasn't getting errors, things just were not working. There's so many moving parts, and I don't have enough knowledge to understand the scope of the issues I was facing, but I can give some context.

Phpstorm 10
Laravel 5.1
Just the standard elixir with the plugin here and required packages.

I didn't have any css knowledge coming into this, so in some cases I don't know what I was looking for exactly. This is related to the lost grid. The first issue was that the grid just wouldn't drop down. I think thats the float clear on the last element of the row. It would clear the margin right, but not drop. I updated all the related packages. It fixed it. But then with nested grids I was having issues. Again, no errors, just not working. I was banging my head against the wall. The examples from https://github.com/peterramsing/lost/tree/gh-pages worked just fine. I ended up commenting out your plugin and and all the elixer stuff and going raw with the gulp file. I went with * in the json file and just brought everything postcss and gulp and lost related upto the most recent and then just manually set up the gulp file.

It works now like it is supposed to with the core utilities. But who knows where it went wrong? It's plugins on plugins on plugins. Was it elixir, was it gulp was it some dependency of one of these packages? I'm just not cool enough to fix that yet. In any case, it was killing me. Something somewhere is broken and I'm just giving you a heads up.

Hi Jeff
How to watch custom folder for changes? Creating a package for laravel and having a folder in packages/xxx/xxx/assets/stylus
when type gulp watch in console, it does not watching a given folder in gulpfile.js

Elixir.tasks.byName('sass').forEach(function (task) {
    task.watch('./packages/thcoder/blog/assets/stylus/*.stylus');
});

How i can achieve that gulp watch these folders? I am using last laravel-elixir

Hi,

I forked the repository and I'm working in a little modification to add the possibility of extra arguments to stylus. Ex:

.stylus({
    use: [nib()],
    errors: true
})

Etcetera. Passing a new argument to elixir.extend('stylus', function(src, output, extra)

After installed and configured laravel-elixir-stylus according to the installation guideline and I ran the gulp command and get the the error message:

C:\Websites\deve> npm list | findstr elixir
+-- [email protected]
`-- [email protected]

C:\Websites\deve\beautifulas.com>gulp
module.js:341
throw err;
^

Error: Cannot find module 'laravel-elixir/dist/tasks/CssTask'
at Function.Module._resolveFilename (module.js:339:15)
at Function.Module._load (module.js:290:25)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
at Object. (C:\Websites\deve\node_modules\laravel-elixir-stylus\index.js:1:77)
at Module._compile (module.js:413:34)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)

but once i disabled stylus and change to scss and it compiled successfully.