I've got a problem with gulp.js.
Steps to reproduce:
$ composer global require "laravel/installer=~1.1"
$ laravel new myproject
$ cd myproject
$ php artisan serve
$ npm install
$ npm rm bootstrap-sass —save
$ npm install foundation-sites —save
$ npm install motion-ui —save
then I copy
_settings.scss
from
node_modules/foundation-sites/scss/settings
to
resources/assets/sass
in app.scss then i put every Foundation import
and finally I write Elixir task as reported here:
http://zecipriano.com/en/2015/12/laravel-elixir-and-zurb-foundation-revisited/
But when I launch gulp from terminal:
path.js:7
throw new TypeError('Path must be a string. Received ' + inspect(path));
... don't know what to do.
Everything updated, so I think it's not a version problem.
[EDIT]
$ node -v
v6.8.0
and here's my gulpfile.js:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| 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) {
// Sass
var options = {
includePaths: [
'node_modules/foundation-sites/scss',
'node_modules/motion-ui/src'
]
};
mix.sass('app.scss', null, options);
// Javascript
var jQuery = '../../../node_modules/jquery/dist/jquery.js';
var foundationJsFolder = '../../../node_modules/foundation-sites/js/';
mix.scripts([
jQuery,
foundationJsFolder + 'foundation.core.js',
// Include any needed components here. The following are just examples.
foundationJsFolder + 'foundation.util.mediaquery.js',
foundationJsFolder + 'foundation.util.keyboard.js',
foundationJsFolder + 'foundation.util.timerAndImageLoader.js',
foundationJsFolder + 'foundation.tabs.js',
// This file initializes foundation
'start_foundation.js'
]);
});
Any ideas?
Thank you in advance.
The problem is that the options have been moved from the third to the fourth parameter. You can run it with:
mix.sass('app.scss', null, null, options);
Cheers :D
I have the node 4.4.2 installed and countered the same error. Then I passed the the directory string directly instead of using an array with directions.
Related
I am currently having issues with using tagging with the cypress-cucumber-preprocessor package. I know that the cypress-tags has been removed and made redundant so I'm trying to set up tagging using the new syntax but to no avail.
Here is my feature:
Feature: duckduckgo.com
Rule: I am on a desktop
Scenario: visiting the frontpage
When I visit <site>
Then I should see a search bar
#google
Examples:
| site |
| google.com |
#duckduckgo
Examples:
| site |
| duckduckgo.com |
And my step definitions:
import { When, Then } from "#badeball/cypress-cucumber-preprocessor";
When(`I visit` + url, () => {
if(url === 'duckduckgo.com') return cy.visit("https://www.duckduckgo.com");
if(url === 'google.com') return cy.visit("https://www.google.com");
});
Then("I should see a search bar", () => {
cy.get("input").should(
"have.attr",
"placeholder",
"Search the web without being tracked"
);
});
When I try to run my tests with npx cypress run --env tags="#google", it gives me an error saying url in my steps definitions isn't defined. What am I doing wrong?
Try to add script with this command in package.json file this way:
"scripts": {
"open:test": "npm run clean:report && cypress open --env configFile=test,TAGS=#test" (or any tag you need)
}
And then use it as:
npn run open:test
The main difference besides rapping it into script is not using quotes, maybe this will help you
I want to use mix on a set of images. First I copy them:
mix.copy('resources/images', 'public/images');
Then version:
mix.version();
The above does nothing to the images.
I've also tried specifying the path:
mix.version('public/images/*');
But I get a no such file or directory error.
How can I version the images?
I know it's an old question, but for 2019 - laravel mix 4 you can use:
mix.copy('resources/images/*', 'public/images');
mix.version();
This will version all your copied files. DON'T use one of these:
mix.copy('resources/images/*', 'public/images/*');
mix.copy('resources/images/', 'public/images/*');
mix.copyDirectory('resources/images/*', 'public/images');
-> it will not version the files then.
The see the result, take a look in the public/mix-manifest.json:
"/favicon.ico": "/favicon.ico?id=ecb5fdce0172885513c8",
To use it in code, use the laravel mix helper method: mix();
<link rel="icon" type="image/x-icon" href="{{ mix('favicon.ico') }}" />
which will generate something like this:
<link rel="icon" type="image/x-icon" href="/favicon.ico?id=ecb5fdce0172885513c8" />
version() (without arguments) is not applied to files passed to copy() and copyDirectory().
If you'll look at the source of mix.version you'll see that it expands glob synchronously. But all laravel-mix operations such as copy and version are executed asynchronously. This means that public/images/* is empty because there are no files yet in public directory.
As a workaround you can list files in source directory (from which you copy files, for example resources), replace resources path segment with public and pass this list to version().
In my case I have various assets in resources directory so directory tree looks like:
- resources
| - css
| - fonts
| - images
| - js
| - less
I need to copy to public and version all these directories except less which I need to preprocess and also version.
This is like my webpack.mix.js looks like:
const mix = require('laravel-mix'),
glob = require('glob');
mix.disableNotifications();
const
directoriesToCopy = ['css', 'fonts', 'images', 'js'],
publicDir = 'public/',
publicCssDir = publicDir + 'css/',
resourcesDir = 'resources/',
resourcesLessDir = resourcesDir + 'less/',
lessFiles = glob.sync('**/*.less', {cwd: resourcesLessDir});
directoriesToCopy.forEach(d => mix.copyDirectory(resourcesDir + d, publicDir + d));
lessFiles.forEach(f => mix.less(resourcesLessDir + f, publicCssDir + f.slice(0, -'less'.length) + 'css'));
mix.version([].concat(...directoriesToCopy.map(d => glob.sync('**/*', {cwd: resourcesDir + d}).map(f => d + '/' + f))).map(f => publicDir + f));
Basically I use glob to recursively get a list of all files in each copied directory, replace resources with public in their paths and then pass list of all such files to mix.version.
So I am using webpack, babel, and mocha here. When I have code like this:
import userImage from '../../images/user.png';
and I build with webpack, userImage results in a string to the path of the file since I am using the file loader for images (requirements call for me not to embed images) however when I try to run my mocha tests using:
./node_modules/.bin/babel-node ./node_modules/.bin/babel-istanbul cover ./node_modules/.bin/_mocha
I get a syntax error:
SyntaxError: /repositories/react-seed/web/app/images/user.png: Unexpected character '�' (1:0)
> 1 | �PNG
| ^
2 |
3 |
I also get this error when removing istanbul. So it seems like it is trying to load the actually image file however can parse it as JavaScript since it is not.
Anyone know a way around this issue?
You can use the --compilers option which allows you to customize the nodejs require system in order to let it understand png files. So :
mocha --compilers png:./mochacfg.js
Or create a file 'test/mocha.opts' containing (better for your needs):
--compilers png:./mochacfg.js
With ./mochacfg.js:
require.extensions['.png'] = function(){ return null; }
This ignores png files (should be ok if you do nothing special with them).
If you want to do something with the image data:
var fs = require('fs');
require.extensions['.png'] = function(module, filepath) {
var src = fs.readFileSync(filepath).toString ('base64');
return module._compile('module.exports = "data:image/png;base64,' + src + '";');
}
Its quite late to answer this question but just for knowledge sharing purpose, I am answering another approach to do this.
Create a test-config.js file and use it while running the mocha test cases.
var jsdom = require('jsdom').jsdom;
process.env.NODE_ENV = 'test';
// -------------------------------
// Disable webpack-specific features for tests since
// Mocha doesn't know what to do with them.
['.css', '.scss', '.png', '.jpg'].forEach(ext => {
require.extensions[ext] = () => null;
});
and inside package.json use this test command to run the test cases
"test": "mocha ./test/test-setup.js './test/**/*.spec.js' --compilers js:babel-core/register",
I hope it helps someone.
I'm trying to compile BitcoinJS library to include it in browser with
<script src="js/bitcoinjs.js"></script>
I'm trying all day but I couldn't.
What I do is to follow the instructions
npm -g install bitcoinjs-lib browserify
browserify bitcoinjs-lib -s bitcoin -o bitcoinjs.js
Compilation is successful (errors don't occur).
When I try to use it in my webpage
function NewRandomWallet() {
var keyPair = bitcoin.ECPair.makeRandom()
// Print your private key (in WIF format)
console.log(keyPair.toWIF())
// => Kxr9tQED9H44gCmp6HAdmemAzU3n84H3dGkuWTKvE23JgHMW8gct
// Print your public key address
console.log(keyPair.getAddress())
// => 14bZ7YWde4KdRb5YN7GYkToz3EHVCvRxkF
}
I get followed errors in the console of Chrome:
Unexpected token ...
//because of 3 points ... in oneOf(...types) and tuple(...types) in the bitcoinjs.js file
If I remove these points I get a key and address, my code is working.
Why these points appear?
Next problem is when I try to create a transaction:
var tx = new bitcoin.TransactionBuilder()
// Add the input (who is paying) of the form [previous transaction hash, index of the output to use]
tx.addInput("aa94ab02c182214f090e99a0d57021caffd0f195a81c24602b1028b130b63e31", 0)
// Add the output (who to pay to) of the form [payee's address, amount in satoshis]
tx.addOutput("1Gokm82v6DmtwKEB8AiVhm82hyFSsEvBDK", 15000)
// Initialize a private key using WIF
var keyPair = bitcoin.ECPair.fromWIF("L1uyy5qTuGrVXrmrsvHWHgVzW9kKdrp27wBC7Vs6nZDTF2BRUVwy")
// Sign the first input with the new key
tx.sign(0, keyPair)
// Print transaction serialized as hex
console.log(tx.build().toHex())
// => 0100000001313eb630b128102b60241ca895f1d0ffca21 ...
I get a new error
types.every is not a function
it's pointing to this part of the code in bitcoinjs.js
function tuple(value, strict) {
return types.every((type, i) => typeforce(type, value[i], strict));
}
Any ideas? Is the code of the library wrong or I do compilation wrong way?
The problem was that I used browserify wrong way.
I have compiled the bitcoinjs library with this command in CMD of Windows OS:
cmd> cd:testdir
cmd> npm install bitcoinjs-lib
cmd> npm -g install browserify
cmd> browserify foobar.js -o bitcoinjs.js
foobar.js contains:
Bitcoin = require('bitcoinjs-lib');
to get minified version after use:
cmd> uglifyjs bitcoinjs.js -c -m -r 'Array,BigInteger,Boolean,Buffer,ECPair,Function,Number,Point,Script' -o bitcoinjs.min.js
if you want to get only minified version, use:
cmd> browserify -r bitcoinjs-lib -s Bitcoin | uglifyjs > bitcoinjs.min.js
Now, if you want to generate a wallet, you can do it as:
function NewRandomWallet() {
var keyPair = Bitcoin.ECPair.makeRandom();
// Print your private key (in WIF format)
$('#private_key').val(keyPair.toWIF());
// => Kxr9tQED9H44gCmp6HAdmemAzU3n84H3dGkuWTKvE23JgHMW8gct
// Print your public key address
$('#address').val(keyPair.getAddress());
// => 14bZ7YWde4KdRb5YN7GYkToz3EHVCvRxkF
}
You could add a function to generate a wallet from string before minify the library:
ECPair.makeFromString = function (aStr) {
var hash = Bitcoin.crypto.sha256(aStr)
var d = BigInteger.fromBuffer(hash)
return new ECPair(d)
}
I have just forked bitcoinjs-lib with a compiled, minified distribution folder for your convenience.
https://github.com/davidapple/bitcoinjs-lib-for-browsers
bower install bitcoinjs-lib-for-browsers#4.0.2 --save
<script src="bower_components/bitcoinjs-lib-for-browsers/dist/bitcoinjs-lib-4.0.2.min.js"></script>
I'm trying to use babel for both ES6 and JSX transpilation for mocha tests.
Suppose we have test.jsx like this:
var React = require("react");
React.createClass({
render: function(){
return (<div>Hello World</div>);
}
});
Running babel test.jsx gives us valid transformed code. No problem.
I would expect that if I create a test.js file like this:
require("babel/register");
require("./test.jsx");
And then run node test.js, it would transpile my jsx for me in line, but instead I get an error:
c:\Users\user\dev\app\node_modules\babel\node_modules\babel-core\lib\babel\t
ransformation\file\index.js:628
throw err;
^
Error: c:/Users/user/dev/app/test.jsx: Invalid mapping: {"generated":{"line"
:6,"column":11},"source":"c:/Users/user/dev/app/test.jsx","name":null}
at SourceMapGenerator_validateMapping [as _validateMapping] (c:/Users/user/dev/app/node_modules\babel\node_modules\source-map\lib\source-map\source-map-
generator.js:275:15)
at SourceMapGenerator_addMapping [as addMapping] (c:/Users/user/dev/app/
node_modules\babel\node_modules\source-map\lib\source-map\source-map-generator.j
s:105:14)
at SourceMap.mark (c:/Users/user/dev/app/node_modules\babel\node_modules
\babel-core\lib\babel\generation\source-map.js:65:9)
at CodeGenerator.print (c:/Users/user/dev/app/node_modules\babel\node_mo
dules\babel-core\lib\babel\generation\index.js:236:16)
at NodePrinter.plain (c:/Users/user/dev/app/node_modules\babel\node_modu
les\babel-core\lib\babel\generation\node\printer.js:16:27)
at CodeGenerator.ReturnStatement (c:/Users/user/dev/app/node_modules\bab
el\node_modules\babel-core\lib\babel\generation\generators\statements.js:120:13)
at CodeGenerator.print c:/Users/user/dev/app/node_modules\babel\node_mo
dules\babel-core\lib\babel\generation\index.js:238:22)
at NodePrinter.plain (c:/Users/user/dev/app/node_modules\babel\node_modu
les\babel-core\lib\babel\generation\node\printer.js:16:27)
at CodeGenerator.printJoin (c:/Users/user/dev/app/node_modules\babel\nod
e_modules\babel-core\lib\babel\generation\index.js:286:13)
at NodePrinter.sequence (c:/Users/user/dev/app/node_modules\babel\node_m
odul
es\babel-core\lib\babel\generation\node\printer.js:23:27)
According to the docs, it looks like this should work. Am I missing something obvious, or should I report this as a bug in babel?
This was a bug in acorn-jsx, the JSX parser that Babel uses. The recommended fix would be:
rm -rf node_modules/babel && npm install