I'd like to make an extension for Laravel Elixir.
In my own extension I need to run an existent Elixir version() task.
How can I do this?
A bit of my code:
// File: elixir-extensions.js
var gulp = require('gulp');
var Elixir = require('laravel-elixir');
var Task = Elixir.Task;
Elixir.extend('recursive', function(dir) {
new Task('recursive', function(dir) {
// Generate files list for versioning...
var files = [];
// ...
// Here I need to run Laravel Elixir version(files) with my files list
});
});
Related
I am having an issue where browsersync does not find/open my index.php file.
The relevant parts of my gulp file are as follows:
const browserSync = require("browser-sync").create();
const php = require('gulp-connect-php');
// Configure PHP server
gulp.task('php', function(){
php.server({base:'./', port:8010, keepalive:true});
});
// Inject php config into browserSync task
gulp.task('browserSync', function() {
browserSync.init({
proxy:'localhost:8000',
port: 8080,
baseDir: './',
open:true,
notify:false
});
});
// Watch files
function watchFiles() {
gulp.watch("./scss/**/*", css);
gulp.watch(["./js/**/*", "!./js/**/*.min.js"], js);
gulp.watch("./**/*.php", browserSync.reload);
gulp.watch("./**/*.html", browserSync.reload);
}
const watch = gulp.series(build, gulp.parallel(watchFiles, browserSync.reload));
// Export tasks
exports.watch = watch;
My console output when 'Gulp watch' is run looks like this:
The page never opens in the browser.
Any advice as to why it is getting hung up on browser-sync?
Also, browsersync works when run directly in the cmd with:
browser-sync start --proxy "localhost/BtcMiningContracts" --files "*.php, *.html, css/*.css, ./js/**/*"
thanks!
Many hours of searching have resulted in a working answer.
For anyone else experiencing the same issue, the updated code is below:
const browserSync = require("browser-sync");
const php = require('gulp-connect-php');
// Configure PHP server
gulp.task('connect-sync', function() {
php.server({}, function (){
browserSync({
proxy: '127.0.0.1:8000'
});
});
gulp.watch('**/*.php').on('change', function () {
browserSync.reload();
});
});
// Watch files
function watchFiles() {
gulp.watch("./scss/**/*", css);
gulp.watch(["./js/**/*", "!./js/**/*.min.js"], js);
gulp.watch("./**/*.php").on('change', function () {
browserSync.reload()});
}
This works with scss
hope it helps somebody out :)
I recently check out my project from SVN. I ran into "Uncaught ReferenceError: $ is not defined" where ever I have used "$" ie; Jquery. I am using laravel mixer to combine the JS and CSS Files.
This is my bootstrap.js
window._ = require('lodash');
window.Popper = require('popper.js').default;
window.tooltip = require('tooltip.js');
try {
window.$ = window.jQuery = require('jquery');
require('jquery-ui-dist/jquery-ui.min.js');
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
//Moment JS
window.moment = require('moment');
//Collect JS
window.collect = require('collect.js');
//Clipboard JS
window.ClipboardJS = require('clipboard');
//Import Toster
window.toastr = require('toastr');
//Swaet Alert
import Swal from 'sweetalert2';
window.swal = Swal;
//Owl Carousel
window.owlCarousel = require('owl.carousel');
//JS Cookie
window.Cookies = require('js-cookie');
//Image Zoom
require('ez-plus');
This is my webpack.mix.js
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js').sourceMaps()
.sass('resources/assets/sass/app.scss', 'public/css');
My Laravel Version: 5.5.40
laravel-mix Version: 1.7.2
This worked for me:
Remove the defer from the app.js script tag and change window.$ = window.jquery = to global.$ = global.jquery =
Weather or not this is the correct way to do it, this has worked for me.
laravel 5.7
I have setup a 2 custom tasks in my gulpfile.js :
var gulp = require('gulp'),
elixir = require('laravel-elixir');
gulp.task('task1', function() {
console.log('test1');
});
gulp.task('task2', function() {
console.log('test2');
});
elixir(function(mix) {
mix
.task('task1', './resources/**/*.php')
.task('task2', './resources/**/*.js')
;
});
When I run gulp watch I want only to see 'test1' when a *.php file is changed, and 'test2' when a *.js file is changed. But somehow both tasks are triggered when only 1 file changes.
Why is this happening ?
Is there a way to only trigger the right task ?
Have you tried this using Custom Watchers? See https://laravel.com/docs/5.2/elixir under "Custom Watchers".
new Task('task1', function() {
console.log('test1');
// gulp.src here ect.
})
.watch('./resources/**/*.php');
new Task('task2', function() {
console.log('test2');
// gulp.src here ect.
})
.watch('./resources/**/*.js');
This could fix your issue.
I have a gulp file that I have grabbed from here and modified to this:
var gulp = require('gulp'),
path = require('path'),
del = require('del'),
run = require('run-sequence'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
include = require('gulp-include'),
imagemin = require('gulp-imagemin'),
svgmin = require('gulp-svgmin'),
cache = require('gulp-cache'),
watch = require('gulp-watch'),
livereload = require('gulp-livereload')
//lr = require('tiny-lr'),
//server = lr()
;
var config = {
// Source Config
src : 'src', // Source Directory
src_assets : 'src/assets', // Source Assets Directory
src_fonts : 'src/assets/fonts', // Source Fonts Directory
src_images : 'src/assets/img', // Source Images Directory
src_javascripts : 'src/assets/js', // Source Javascripts Directory
src_stylesheets : 'src/assets/styles', // Source Styles Sheets Directory
src_main_scss : 'src/assets/styles/main.scss', // Source main.scss
src_main_js : 'src/assets/scripts/main.js', // Source main.js
// Destination Config
dist : 'dist', // Destination Directory
dist_assets : 'dist/assets', // Destination Assets Directory
dist_fonts : 'dist/assets/fonts', // Destination Fonts Directory
dist_images : 'dist/assets/img', // Destination Images Directory
dist_javascripts : 'dist/assets/js', // Destination Javascripts Directory
dist_stylesheets : 'dist/assets/css', // Destination Styles Sheets Directory
// Auto Prefixer
autoprefix : 'last 3 version' // Number of version Auto Prefixer to use
};
gulp.task('styles', function () {
return gulp.src(config.src_main_scss)
.pipe(sass({
outputStyle: 'expanded',
precision: 10,
sourceComments: 'none'
}))
.pipe(autoprefixer(config.autoprefix))
.pipe(gulp.dest(config.dist_stylesheets))
.pipe(livereload())
});
gulp.task('scripts', function () {
gulp.src(config.src_main_js)
.pipe(include())
.pipe(gulp.dest(config.dist_javascripts))
.pipe(livereload())
});
gulp.task('php', function() {
return gulp.src([path.join(config.src, '/**/*.php')])
.pipe(gulp.dest(config.dist))
.pipe(livereload())
});
gulp.task('images', function() {
gulp.src(path.join(config.src_images, '/**/*.png'))
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest(config.dist_images))
});
gulp.task('svg', function() {
gulp.src(path.join(config.src_images, '/**/*.svg'))
.pipe(svgmin())
.pipe(gulp.dest(config.dist_images))
});
gulp.task('clean', function() {
del(path.join(config.dist, '/**/*'))
});
gulp.task('watch', function() {
//server.listen(35729, function (err) {
// if (err) {
// return console.log(err)
// };
gulp.watch(path.join(config.src_stylesheets, '/**/*.scss'), ['styles']);
gulp.watch(path.join(config.src_javascripts, '/**/*.js'), ['scripts']);
gulp.watch(path.join(config.src, '/**/*.php'), ['php']);
//});
});
gulp.task('default', function(cb) {
run('build', ['watch'], cb);
});
gulp.task('build', function (cb) {
run('clean', 'styles', 'scripts', 'php', 'images', 'svg', cb);
});
Now if I run 'gulp' everything works however when I go the my apache host the live reload is no longer working.
I am not that familiar with live reload so please walk me through any solutions.
I have installed live reload plugin and turned it on, still not working.
Am I missing a step with my host?
Alright, I don't know what this Gulpfile promised you in the first place, but I am missing two things here:
Any connection to your up-and-running server.
The place in your HTML file where you insert Livereload. Livereload needs to know where to be injected and just doesn't work automatically out of the box
This can be tricky, especially when you already have a server up and running, and it requires a lot of configuration. One tool which can be integrated with Gulp rather easily and does have a good Livereload setup out of the box is BrowserSync. You can just boot it up and create a proxy to any running server that you have. It will also take care of inserting the LiveReload snippet. I'd strongly suggest you switch to that one, especially if you are pretty new to that topic. I does just all for you :-)
I wrote about BrowserSync here, but here are the changes you would have to do to make it work:
Setup BrowserSync
Add this anywhere to your Gulpfile:
var browserSync = require('browser-sync');
browserSync({
proxy: 'localhost:80',
port: 8080,
open: true,
notify: false
});
(Don't forget to npm install --save-dev browser-sync first). This will create a new server, proxying your MAMP and injecting everything you need for LiveReload. Open your page at localhost:8080 (BrowserSync would do it for yourself), and you are ready to go
Add a reload-Call
Everywhere where you put livereload, change it to
.pipe(browserSync.reload({stream: true}))
Like this for example:
gulp.task('scripts', function () {
return gulp.src(config.src_main_js)
.pipe(include())
.pipe(gulp.dest(config.dist_javascripts))
.pipe(browserSync.reload({stream:true}))
});
This will trigger LiveReload and will refresh your sources. Make sure that you have it everywhere, where you change stuff.
Than you should be able to go. Good luck!
One more thing
Please write a little return statement before every gulp.src. This will let Gulp know that you are working with streams, making it a lot more able to work with streams.
I'm trying Laravel Elixir and want to include bootstrap with includePaths but it does not work. Where am I going wrong?
var paths = {
'bootstrap': './vendor/bower_components/bootstrap-sass-official/assets/'
}
elixir(function(mix) {
mix.sass("style.scss", 'public/assets/css/', {includePaths: [paths.bootstrap + 'stylesheets/']})
});
I'm not sure if there is a reason that you want to do includePaths in your gulpfile, but for bootstrap you don't have to. The bootstrap include path is already configured out of the box in /node_modules/laravel-elixir/ingredients:
elixir.extend('sass', function(src, output, options) {
options = _.extend({
outputStyle: inProduction ? 'compressed' : 'nested',
includePaths: [elixir.config.bowerDir + "/bootstrap-sass-official/assets/stylesheets"]
}, options);
return compile({
compiler: 'Sass',
pluginName: 'sass',
pluginOptions: options,
src: src,
output: output,
search: '**/*.+(sass|scss)'
});
});
So all you should have to do is, in your gulpfile:
elixir(function(mix) {
mix.sass("style.scss");
});
And then in your style.scss:
#import "bootstrap";
I think you have to set your .bowerrc file to:
{
"directory": "vendor/bower_components"
}
but it looks like you have already done that.
I know this already has an accepted answer but I got something like this to work.
var paths = {
'bootstrap': '/bower_components/bootstrap-sass/assets/',
}
elixir(function (mix) {
mix.sass('app.scss', 'public/css', {
includePaths: [
__dirname + paths.bootstrap + 'stylesheets/'
]
});
mix.version("css/app.css");
});
Where bower_components is installed in the laravel root dir.
(From: https://laracasts.com/discuss/channels/requests/gulpfile-elixir-merge-scss-includepaths)
Another solution is using this line to compile sass or less files sitting in your vendor folder:
mix.less("../../../vendor/twbs/bootstrap/less/bootstrap.less");
Note: I used "composer require twbs/boostrap" to get the complete package. No bower needed.
Edit:
I output the compiled css file to the resource folder to combine it with other css files:
mix.less("../../../vendor/twbs/bootstrap/less/bootstrap.less", 'resources/css');
mix.styles([
"bootstrap.css"
], 'public/css/app.css');