I may be overthinking this, but this is what I have so far:
elixir(function(mix) {
//mix.getCND();
mix.copy([
'jquery-1.11.0.min.js'
], 'resources/assets/js/cdn.js', '../../venturepro/cdn/js');
mix.scripts([
'resources/assets/js/cdn.js',
'resources/assets/js/core.js'
], 'public/assets/js/core.js');
});
I also tried to use gulp-cdnizer as well by doing this, but with no luck:
var gulp = require('gulp');
var cdnizer = require('gulp-cdnizer');
var Elixir = require('laravel-elixir');
var Task = Elixir.Task;
/*
|--------------------------------------------------------------------------
| 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.extend('getCDN', function() {
new Task('cdnizer', function () {
return gulp.src('')
.pipe(cdnizer([
{
package: 'jquery',
file: 'resources/assets/js/vendor/jquery.js',
cdn: 'https://cdn.venturepro.com/js/jquery-1.11.0.min.js'
}
]))
.pipe(gulp.dest("public/assets/js/"));
});
});
Elixir(function(mix) {
mix.getCDN();
// Combine all files into one single JS file
mix.scripts([
'resources/assets/js/vendor/jquery.js',
'resources/assets/js/core.js'
], 'public/assets/js/core.js');
});
It says it compiles, but the cdnizer doesn't seem to be working. I have no new files in my resources directory. However I do get the core.js file in my public directory.
Basically, we have about 5 different projects that are all using/sharing files.. we have a lot of common javascript files that get copied and pasted into different projects so we want to host them in a CDN sort of way. So we have a domain like cdn.website.com.. and we want to be able to pull files from that via Elixir into our project, but still combine project-specific files that are local to the root directory.
I've used Elixir before, but only for local files. Is there a way to grab files via a different domain or as I was trying, go out of the root directory in the CDN directory since they are on the same server?
Thanks.
Related
Given the webpack.mix.js of a fresh Laravel project :
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
What is the equivalent using just webpack and a webpack.config.js? (Im looking to remove laravel mix as a dependency on an existing project.)
I did find this default file in the source but it did not help me. Is there a way I can see the "compiled/resulting" webpack configuration or a template/starting point that corresponds to laravel mix default settings?
You can, but the result is not very satisfactory.
Create a JS script with this:
console.log (JSON.stringify(
require('./node_modules/laravel-mix/setup/webpack.config.js'), null, 4)
);
and save it in the root folder of your laravel project. Run it with Node and the output will be the configuration object Laravel Mix receives and inputs to webpack.
However, this file is very long and covers a vast amount of settings, which you wouldn't need if you made your file from scratch. Yes, you could try and remove every extra setting you think you can remove without breaking your output, but in the end it's better to learn how Webpack works so you can write better, mode adjusted configs. At least you can use it to understand how it does certain things.
Just put into webpack.mix.js
Mix.listen('configReady', function (config) {
RegExp.prototype.toJSON = RegExp.prototype.toString;
console.log(JSON.stringify(config));
});
So you will get webpack config from your laravel.mix.
With recent laravel-mix you just need to invoke mix.dump() (in the webpack.mix.js script).
The file you referenced seems to point exactly to the default configuration. Why did this not help?
In order to migrate you could
Learn the basics
Extract the dependencies from Laravel mix aÇıd add them to your package.json
Hint: The dependencies there are your devDependencies
Start by installing npm install --save-dev everything "webpack", "babel" and prefixed with "-loader".
If you need Sass and extracted css - npm install --save-dev node-sass sass-loader mini-css-extract-plugin.
Minimal example of a webpack config for your mix example from above would be
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './resources/js/app.js',
output: {
filename: 'js/[name].js',
path: path.join(__dirname, 'public')
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'sass-loader'
]
}
]
}
};
Learn the more advanced basics for your use case
I want to take all json files from path resources/json/ and do versioning so that when json files changed user can reload it, but I dont know which function I have to use
I changeed webpack.mix.js:
mix
.setPublicPath('public/build')
.setResourceRoot('build')
.js('resources/assets/js/app.js', 'js')
.sass('resources/assets/sass/app.scss', 'css')
//.json('resources/assets/json/*', 'json')
.version();
but I dont know how to copy from dir into another dir and in write mix-manifest file write all json files with hash
I have done this:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix
.setPublicPath('public/build')
.setResourceRoot('build')
.js('resources/assets/js/app.js', 'js')
.sass('resources/assets/sass/app.scss', 'css')
.copyDirectory('resources/assets/json', 'public/build/json')
.version(['public/build/json']);
and two times npm run dev, because mix is not waiting for copying files, .then() not helped, so two times npm run dev.
I'm actually running a Laravel website in which I would like to run a Vuepress documentation section.
Installing Vuepress is quite straightforward thanks to the instructions and so is the development server.
However, when it comes to integrating it as a static site, I'm kind of lost with the interactions with the Laravel.
All my documentation is located in a docs folder located on the root of the my Laravel App.
I managed to set up Vuepress' config.js to build the static site into another folder.
base: '/docs/',
dest:'./public/docs',
Doing the above, exposes the documentation is entirely exposed to the web (in the public folder).
However, what I'm looking for is to integrate it more precisely in Laravel (with the middleware and routes I created).
Method 1
1. Install vuepress in /docs in your laravel directory
2. Configure vuepress with the correct base and dest
/docs/.vuepress/config.js
module.exports = {
dest: 'public/docs',
base: 'docs/',
};
3. Enable laravel views to include files from the /public directory
/app/config/view.php
...
'paths' => [
resource_path('views'),
base_path('public'), // now blade's #include will also look in /public
],
...
4. Create a laravel route for vuepress that allows .html extension
/routes/web.php
use View;
Route::get('/docs', function() {
View::addExtension('html', 'php'); // allows .html
return view('docs.index'); // loads /public/docs/index.html
});
Method 2
Or for more control for assets through Laravel, you can try this tutorial here: https://serversideup.net/vuepress-within-a-laravel-application/
# install as a local dependency
yarn add -D vuepress # OR npm install -D vuepress
# create a docs directory
mkdir docs
# create a markdown file
echo '# Hello VuePress' > docs/README.md
package.json
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
/docs/.vuepress/config.js
module.exports = {
dest: 'public/docs',
base: '/docs/',
};
npm run docs:build
/routes/web.php
Route::get('/docs', function() {
return File::get(public_path() . '/docs/index.html');
});
I'm having an issue with watching custom paths with Laravel Elixir's sass.
Here is the code.
var publicScss = [
'./resources/assets/scss/public',
'./resources/assets/jquery_plugins/rotate.scss'
];
elixir(function (mix) {
mix.sass(publicScss, './public_html/css/dist/public.css');
// Tried the suggested solution below, but it still doesn't watch the files
// https://github.com/laravel/elixir/issues/297
elixir.Task.find('sass').watch(publicScss);
mix.browserSync();
});
The SCSS files get compiled to CSS if I just do gulp. But with gulp watch it doesn't seem to watch for changes.
Anyone else had setting up a sass watcher on a custom path?
After spending some more time on this, I realised just entering a directory path to watch doesn't work. You have to either explicitly specify the filenames or enter a wildcard.
The following works:
var publicScss = [
'./resources/assets/scss/public/*.scss',
'./resources/assets/jquery_plugins/rotate.scss'
];
elixir(function (mix) {
mix.sass(publicScss, './public_html/css/dist/public.css');
// the watch needs to receive a filename or a wildcard (not a directory)
elixir.Task.find('sass').watch(publicScss);
mix.browserSync();
});
I've been trying to compile two less files using Laravel's elixir.
In my gulpfile.js 'm doing :
elixir(function(mix) {
mix.less([
'app.less',
'soul.less'
]);
});
After running gulp, 'm only able to generate app.css and app.css.map in my 'public/css/' directory.
But i am not able to find the soul.css and soul.css.map. When i open a page with soul.css linked, the styles are being applied but the soul.css file cannot be found.
Any fix ?
Thanks
After Laravel 5.1 has been released you need to set the output path for files otherwise they will get combined by default.
elixir(function(mix) {
mix.less('app.less', 'public/css/app.css')
.less('soul.less', 'public/css/soul.css');
});