jeffreyway / laravel-elixir-browserify Goto Github PK

View Code? Open in Web Editor NEW

16.0 16.0 7.0 8 KB

Laravel Elixir Browserify Integration

JavaScript 100.00%

laravel-elixir-browserify's People

Contributors

Stargazers

Watchers

Forkers

adamszigeti ethanhuang0526 coldbox-elixir yhbyun wpdevops salehimehdi roughtron

laravel-elixir-browserify's Issues

browserify not generating any output

Hi,
I have a problem that it does not generate any output file even though the terminal looks like this:
does not give any error?

'import' and 'export' may appear only with 'sourceType: module' (6:0)

gulpfile.js:

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

require('laravel-elixir-vueify');

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

vue.js:

var Vue = require('vue');

import CriticalState from './components/CriticalState.vue';

new Vue({

    el: '#dashboard',

    components: { CriticalState },

});

CriticalState.vue:

<template>
    {{ id }}
</template>

<script>
    export default {

        props: ['id']

    }
</script>

package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.0.0",
    "gulp": "^3.9.1",
    "laravel-elixir": "^5.0.0",
    "laravel-elixir-webpack-official": "^1.0.4",
    "vue": "^1.0.26",
    "vueify": "^8.7.0"
  },
  "dependencies": {
    "laravel-echo": "~1.0.0",
    "pusher-js": "~3.2.1",
    "laravel-elixir-browserify-official": "~0.1.3",
    "babel-preset-es2015": "~6.13.2",
    "babel-preset-react": "~6.11.1"
  }
}

versions:

npm -v
2.15.9
node -v
v4.5.0

When running gulp I get the following error:
Error: Parsing file /.../resources/assets/js/components/CriticalState.vue: 'import' and 'export' may appear only with 'sourceType: module' (6:0)

Am I missing something?

gulp watch lets browserify run multiple times

Hey,

i have 3 bundles to create

core
app
testbench

with the following gulp file and running gulp it does create all 3 bundles and browserify runs only 3 times. But using gulp watch it does compiles 9 times.

npm: v3.8.6
node: v.6.1.0
gulp-cli: v3.8.11

packages:

    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-10",
    "laravel-elixir-browserify-official": "^0.1.3",
    "laravel-elixir-browsersync-official": "^1.0.0",
    "laravel-elixir-vueify": "^2.0.0",

gulpfile:

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

elixir(function(mix){

    mix.browserify('core.js')
        .browserify('testbench.js')
        .browserify('app.js');

});

gulp output:

[13:49:32] Using gulpfile D:\sebdev\mTrace\gulpfile.js
[13:49:32] Starting 'all'...
[13:49:32] Starting 'browserify'...
[13:49:35] Finished 'browserify' after 3.52 s
[13:49:35] Starting 'browserify'...
[13:49:36] Finished 'browserify' after 942 ms
[13:49:36] Starting 'browserify'...
[13:49:41] Finished 'browserify' after 4.39 s
[13:49:41] Finished 'all' after 8.86 s
[13:49:41] Starting 'default'...
┌──────────────────┬─────────┬──────────────────────────────────┬────────────────────────┐
│ Task             │ Summary │ Source Files                     │ Destination            │
├──────────────────┼─────────┼──────────────────────────────────┼────────────────────────┤
│ mix.browserify() │         │ resources\assets\js\core.js      │ public\js\core.js      │
├──────────────────┼─────────┼──────────────────────────────────┼────────────────────────┤
│ mix.browserify() │         │ resources\assets\js\testbench.js │ public\js\testbench.js │
├──────────────────┼─────────┼──────────────────────────────────┼────────────────────────┤
│ mix.browserify() │         │ resources\assets\js\app.js       │ public\js\app.js       │
└──────────────────┴─────────┴──────────────────────────────────┴────────────────────────┘
[13:49:41] Finished 'default' after 11 ms

gulp watch output:

[13:50:24] Using gulpfile D:\sebdev\mTrace\gulpfile.js
[13:50:24] Starting 'watch'...
[13:50:24] Starting 'all'...
[13:50:24] Starting 'browserify'...
[13:50:25] Finished 'browserify' after 879 ms
[13:50:25] Starting 'browserify'...
[13:50:25] Finished 'browserify' after 23 ms
[13:50:25] Starting 'browserify'...
[13:50:25] Finished 'browserify' after 19 ms
[13:50:25] Finished 'all' after 927 ms
[13:50:25] Starting 'default'...
┌──────────────────┬─────────┬──────────────────────────────────┬────────────────────────┐
│ Task             │ Summary │ Source Files                     │ Destination            │
├──────────────────┼─────────┼──────────────────────────────────┼────────────────────────┤
│ mix.browserify() │         │ resources\assets\js\core.js      │ public\js\core.js      │
├──────────────────┼─────────┼──────────────────────────────────┼────────────────────────┤
│ mix.browserify() │         │ resources\assets\js\testbench.js │ public\js\testbench.js │
├──────────────────┼─────────┼──────────────────────────────────┼────────────────────────┤
│ mix.browserify() │         │ resources\assets\js\app.js       │ public\js\app.js       │
└──────────────────┴─────────┴──────────────────────────────────┴────────────────────────┘
[13:50:25] Finished 'default' after 8.82 ms
[13:50:25] Finished 'watch' after 938 ms
[13:50:40] 415462 bytes written (14.65 seconds)
[13:50:41] 415462 bytes written (15.31 seconds)
[13:50:41] 415462 bytes written (15.95 seconds)
[13:50:43] 603301 bytes written (17.92 seconds)
[13:50:43] 603301 bytes written (17.96 seconds)
[13:50:43] 603301 bytes written (18.00 seconds)
[13:50:44] 1014955 bytes written (18.50 seconds)
[13:50:44] 1014955 bytes written (18.59 seconds)
[13:50:44] 1014955 bytes written (18.68 seconds)

Generate multiple file with require & external

Hi,

I'm trying to find a way for generating 3 files using elixir and browserify (with shared dependencies)

My 3 files

main.js
photos.js
news.js

Those 3 files require jquery and i would like to only load it once. (On some pages, i will load only main.js, but on other pages, i will load main & photos.js)

Using only Browserify i could use the external & require method, but i can't use them with elixir

I'm trying to achieve something like this:

elixir(function (mix) {
    mix
        .browserify('main.js', null, null, {require: ['jquery']})
        .browserify('photos.js', null, null, {external: ['jquery']})
        .browserify('news.js', null, null, {external: ['jquery']})
    ;
});

If I add this code

if (data.options.external) {
    stream.external(data.options.external);
}

at the end of your browserifyStream function, it work fine, but is there a better way to do it ? (browserify don't expose an external options)

JS Source maps point to compiled file

Using laravel-elixir 6.0.0-11 and laravel-elixir-browserify-official 0.1.3.

My gulp file looks like this:

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

/*
 |--------------------------------------------------------------------------
 | 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.config.css.autoprefix = {
     enabled: true, //default, this is only here so you know how to disable
     options: {
         cascade: true,
         browsers: ['last 5 versions', '> 5%']
     }
 };

elixir(function(mix) {
    mix
        .browserify(['my-functions-admin.js'], 'public/js/admin-functions.js')
        .browserify(['my-functions.js'], 'public/js/functions.js')
        .browserSync({
                proxy: 'myapp.app'
            });
});

Watching doesn't work when calling `mix.browserify()` multiple times

I have a setup where I generate a different bundled JavaScript file for each of my sites because the content of the sites differs a lot. To generate these bundled scripts I call mix.browserify() for each script (about 20 times).

When calling gulp watch nothing happens and making changes doesn't make any difference.
When I'am bundling only one script everything works as expected.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.