Know Your Laravel Assets

Assets management in Laravel. A talk presented at Laravel Abuja Meetup.

Transcript

1. Know Your Laravel Assets
2. Know Your Laravel Assets Victor Bala Systems Analyst - Bingham University Twitter: @savics
3. It starts with…
4. $ laravel new jollof-app
5. It gets complex…
6. You wish
9. Gulp
10. What is Gulp? Gulp is a toolkit for automating painful or time consuming tasks in your development workflow, so you can stop messing around and build something.
11. => Gulp is a streaming JavaScript build system built with NodeJs that leverages the power of streams and code-over-configuration. => Gulp uses small, single-purpose plugins to modify and process your project files => Gulp uses small, single-purpose plugins to modify and process your project files
12. With Gulp you can chain, or pipe, these plugins together into more complex actions with full control of the order in which those actions take place,
13. gulpfile.js //modules and plugins var gulp = require(‘gulp’); var concat = require(‘gulp-concat’); var uglify = require(‘gulp-uglify’); var imagemin = require(‘gulp-imagemin’);
14. //styles gulp.task(‘styles’, function () { return gulp.src(‘app/css/*.css’) .pipe(concat(‘bundle.css’)) .pipe(uglify()) .pipe(gulp.dist(‘dist’)); });
15. //scripts gulp.task(‘scripts’, function () { return gulp.src(‘app/js/*.js’) .pipe(concat(‘bundle.js’)) .pipe(uglify()) .pipe(gulp.dist(‘dist’)); });
16. //scripts gulp.task(‘images’, function () { return gulp.src(‘app/img/*’) .pipe(imagemin()) .pipe(gulp.dist(‘dist’)); });
17. Laravel Mix
18. Laravel Mix Laravel mix provides a fluent API for defining webpack build steps for your laravel application using several common CSS and JavaScript pre-processors $ npm install $ npm run dev
20. mix.js(resources/assests/js/app.js’, ‘public/js’) .sass(‘resources/assets/sass/app.scss’, ‘public/css’) mix.less(resources/assests/less/app.less’, ‘public/css’) .less(resources/assests/less/admin.less’, ‘public/css’) mix.styles([ ‘public/css/vendor/custom.css’, ‘public/css/font-awesome.css’ ], ‘public/css/bundle.css’);
21. mix.sass(resources/assests/app/app.scss’, ‘public/css’) .options({ processCssUrls: false }); .example { background: url(‘../images/example.png’); } .example { background: url(/images/example.png?d41d8cd98f00b2); }
22. mix.js(‘resources/assets/js/app.js’, ‘public/js’) .extract([‘vue’])
24. Thank You!