Vuejs 2 Gulp Karma

Posted on  by admin
Modified5 anos, 2 meses atrás.

Estou trabalhando em um projetinho usando gulp e queria aprender um pouco mais de vue.js então quero usar no projeto, mas não to conseguindo achar nada claro (pra mim) na internet de como montar no gulpfile.js.

Meu arquivo esta assim:. user27585user27585. Seu arquivo já está montando todos os outros recursos, só precisaria fazer o mesmo com os .vue.

Para isso existe o pacote gulp-vueifyPra usá-lo você deve baixar ele junto do Babel:npm install gulp-vueify vueify-insert-css babel-core babel-plugin-transform-runtime babel-preset-es2015 --save-dev.

E adicionar a task no seu gulpfile.js:. Adicione a taskvueify no default e mãos à massa!

Você pode apontar a taskjs para a pasta final dos .vue (no exemplo é a dist) e poder usufruir do uglify e concat nesses arquivos também.

* Isso sem o uso do browserify.

In my project I have happily been using Jasmine to unit test client side Javascript code.

Now I want to start using Vue, which naturally breaks unit tests with errors like this:.

since the vue files are being required into the source javascript files that are being tested.

I have a build process, with gulp, browserify and vueify.
But Jasmine runs test cases in files in a folder “spec/” which does require of the source files, without any build process.

I am, so far, not talking about testing the Vue part of the project. For now I’d be happy to not break existing tests of client side javascript code.

What am I doing wrong here? Thanks for any help!

Experienced Software Engineer with a demonstrated history of working in the consumer electronics industry and ESL company.

TomerTomer
17.2k1

Technology used: PHP (Yii). Rarejob PH Website - EdTech Tool, class booking. Technology used: PHP (Yii), DDD, PHPUnit and Codeception. Asteria Teacher Website - EdTech Tool, class booking. Technology used: PHP (Laravel 5), DDD, PHPUnit and Codeception.

Tutor Lesson Room - Real-time video/chat communication, tool for EdTech. Technology used: JS/TS, Angular 2, Gulp, Protractor, Karma, WebRTC (Skyway SDK).

Asteria Tutor Lesson Room - Real-time video/chat communication, tool for EdTech.

Technology used: JS/TS, VueJS, WebPack, Node.js, WebRTC (Skyway SDK).

SMART Method Lesson Rooms (Student, Tutor and Consultant) - Real-time video/chat communication, tool for EdTech.

Technology used: JS/TS, VueJS, WebPack, Node.js, WebRTC (Skyway SDK).

Not sure how you are handling your babel presets perhaps you are using the a babelrc and this isn't being found (or some way that isn't in your base webpack config anyway) but you could try adding something like, but matching your requirements:

to your webpack config in build/webpack.test.conf ... hard to say though as I don't know what you have in your test.conf

Purple HexagonPurple Hexagon
3,4882

The solution I've found is to load Foundation via Babel.

webpack.base.conf.js

The main reason for this is actually explained in the Foundation docs:

Our JavaScript uses some features of ECMAScript 2015. If you use Foundation with a build system, you'll need to compile our code to ES5. We use Babel in our templates to do this. Babel has plugins for every build system imaginable, so integrating it into an existing setup is easy.

The Foundation docs go on to recommend including and setting the babel "presets": ["es2015"] however the Vue CLI is already setup slightly differently.

Vue CLI already uses the babel-preset-env and babel-preset-stage2 plugins which I've since learned takes care of the ES2015 > ES5 transpilation. Vue CLI sets up webpack with several loaders so seems to be it's necessary to add Foundation to the babel-loader config.

Currently I'm importing Foundation and adding it to the global window from within Vue's main.js entry point. Next up I'll probably see if I can expose it using the Expose loader.

Dwight GunningDwight Gunning

Not the answer you're looking for? Browse other questions tagged vue.jsphantomjszurb-foundationvue-cli or ask your own question.