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.
Related
I am using https://archiverjs.com/docs/ to zip a directory for my PhoneGap application but I have not yet managed to achieve what I want to.
I have a folder structured like this:
- www
- css
- images
- scripts
- config.xml
- index.html
Now what I would like to have is a zip file containing the the CONTENT of the www folder but NOT the www itself.
BAD
- www.zip
- www
- css
- images
- scripts
- config.xml
- index.html
GOOD
- www.zip
- css
- images
- scripts
- config.xml
- index.html
The code I have in place is the follow:
var archiver = require('archiver');
var output = fs.createWriteStream('./www/www.zip');
var archive = archiver('zip', {
store: true // Sets the compression method to STORE.
});
output.on('close', function() {
console.log(archive.pointer() + ' total bytes');
console.log('archiver has been finalized and the output file descriptor has closed.');
});
archive.on('error', function(err) {
throw err;
});
archive.pipe(output);
archive.directory('www/');
archive.finalize();
I have tried to add something like:
archive.directory('www/*');
but it throws an error.
Any other way I can accomplish that?
Thanks
I found the solution, I just needed to do the follow:
archive.directory('www', '/');
Problem solved :)
Thanks
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.
My folder structure is like this
|
|-scss/
|-main1.scss
|-main2.scss
Is it possible to use extract-text-webpack-plugin to extract these two entry points two separate files?
Currently, I'm getting it as a single file.
If you specify the two entry points in your webpack config like so:
entry: {
main1: __dirname + '/src/main1.js',
main2: __dirname + '/src/main2.js',
},
ouput: {
path: __dirname,
filename: '[name].js'
}
I assume your main1.scss is imported in the main1.js file, and main2.scss is imported in main2.js.
You can then use the [name] placeholder on the extract-text-webpack-plugin, which should create a separate output file for each entry point:
plugins: [
new ExtractTextPlugin('[name].css')
]
This should output two separate css files for you: main1.css and main2.css
Hope this helps!
I'm using laravel 4 and I need to change an uploaded image, I have it in:
Public
--uploads
---news
----id_news.jpg
When editing the new's I want to make a change image form, but how could I delete and upload another file. I am using:
Input::file('img')->move('uploads/news', $id.'_news.jpg');
The problem it's that it doesn't work, it's not replacing the file, so how could I delete The image so I could upload again.
In laravel 3 I only used:
File::delete('path/to/file');
But I don't see anything about removing files in laravel docs.
I think you should append public_path() to file names , to get real file path, like this
File::delete(public_path().$id.'_news.jpg');
There is still the delete method in Laravel 4:
src/Illuminate/Filesystem/Filesystem.php
otherwise just use good old unlink()!?
You can easily do something like:
$filename = public_path().'/uploads/foo.bar';
if (File::exists($filename)) {
File::delete($filename);
}
Reference: Laravel-recipes Delete a File
Other delete usage:
// Delete a single file
File::delete($filename);
// Delete multiple files
File::delete($file1, $file2, $file3);
// Delete an array of files
$files = array($file1, $file2);
File::delete($files);
Source: http://laravel-recipes.com/recipes/133/deleting-a-file
$destinationPath = 'uploads/my-image.jpeg'; // from public/
if ( File::exists($destinationPath) ) {
File::delete($destinationPath);
}
This works on laravel 4.2.
File::delete(storage_path()."/ProductSalesReport-20150316.csv");
// Here are some other paths to directories laravel offers, Hope this
helps
/* Path to the 'app' folder */
echo app_path();
/* Path to the project's root folder */
echo base_path();
/* Path to the 'public' folder */
echo public_path();
/* Path to the 'app/storage' folder */
echo storage_path();
I'm using nanoc to generate an static site.
Recently I added Bower to manage front end dependencies.
When I add Bootstrap via Bower I place the package in /assets/bower/
The Bootstrap package contains multiple files, including:
bootstrap/js/tests/vendor/qunit.css
bootstrap/js/tests/vendor/qunit.js
My Rules file has these rules:
route '/assets/*' do
extension = item[:extension]
if extension == 'coffee'
extension = 'js'
end
item.identifier.chop + '.' + extension
end
compile '*', :rep => :spec do
if !item[:spec_files].nil? && !item.binary?
filter :erb
layout 'spec'
end
end
route '*', :rep => :spec do
if !item[:spec_files].nil? && !item.binary?
'/specs' + #item.identifier[0..-2] + '.html'
end
end
compile '*' do
if !item.binary?
filter :erb
layout_name = item[:layout] || 'default'
layout layout_name
end
end
route '*' do
if item.binary?
item.identifier.chop + '.' + item[:extension]
else
item.identifier[0..-2] + '.html'
end
end
When running nanoc I get the following error:
RuntimeError: Found 2 content files for
content/assets/bower/bootstrap/js/tests/vendor/qunit; expected 0 or 1
I tried adding 2 new 'empty' rules for the /assets/bower/ folder but still getting the error.
route '/assets/bower/*' do
end
compile '/assets/bower/*' do
end
Any suggestions?
Later edit:
Looks like nanoc supports a static datasource that also takes in consideration the file extension.
https://github.com/nanoc/nanoc-site/blob/master/content/docs/troubleshooting.md
Still not sure if I can use both data sources in parallel.
Unfortunately, you can't have two files in the same directory with the same name before the last extension. For nanoc 4.0 it'll be rewritten to change that.
You can definitely have multiple data sources used at once, but that means you can't apply filters to the qunit files, only redirect the output.
Do you explicitly have to be able to organise files the same as Bower installs them? It might be a better idea to split them up into scripts and styles if you can, anyway - you'll almost certainly be filtering based on filetype, anyway, and that means in Rules you can just go
compile '/whatever-path/scripts/' do
filter :concatenate
filter :uglify_js
end
rather than
compile '/whatever-path/ do
case item[:extension]
when 'js'
filter :uglify_js
when 'scss'
filter :sass
end
end