Skip to content

Instantly share code, notes, and snippets.

@midascodebreaker

midascodebreaker/1Instruction.md

Last active November 24, 2020 05:29
Show Gist options
  • Save midascodebreaker/0851ca4ba331aea3fb05b48450b0d74e to your computer and use it in GitHub Desktop.
Save midascodebreaker/0851ca4ba331aea3fb05b48450b0d74e to your computer and use it in GitHub Desktop.
Download ZIP
Laravel Elixir Modern Workflow: Using Sass, Compass, Sussy, Webpack, BrowserSync, KeenUi (VueJs Reusable Components)
Raw
1Instruction.md

Making Things Easy With Laravel

Requirement:

1.) NPM
2.) Gulp
3.) Homestead
4.) Laravel Installer / Composer
5.) WinNFSd

Note: I wont Discuss Here How You Could Set up NPM , Gulp, Homestead , Laravel Installer/Composer, or NFS for Windows

Technology We Will Use For Our Front end Development.

Sass
Sussy
Compass
ES6
VueJS
Keen-Ui
Webpack
BrowserSync

GOAL :

1.) View All Changes In All Types Of Devices
2.) Automatically Compile Sass And JS.
3.) Automatically Reflect Changes In Your Blade Templates

Procedure

Step: 1 - Create a New Laravel Project

laravel new midas.code

Step: 2 - Generate Homestea.yaml File inside folder midas.code

vendor\\bin\\homestead make

NOTE: If you are not using NFS remove type: nfs and mount options [nolock,vers=3,udp,noatime]

---
ip: "192.168.32.32"
memory: 2048
cpus: 1
hostname: codegenius
name: codemidas
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: "C:/Users/Uriah/Codes/midas.code"
      to: "/home/vagrant/midas"
      type: nfs
      mount_options: [nolock,vers=3,udp,noatime]

sites:
    - map: midas.code
      to: "/home/vagrant/midas/public"

databases:
    - midas

# blackfire:
#     - id: foo
#       token: bar
#       client-id: foo
#       client-token: bar

# ports:
#     - send: 50000
#       to: 5000
#     - send: 7777
#       to: 777
#       protocol: udp

Step: 3 - Edit etc Hosts File

Note: This Ip Address Must be the same as Inside Your Homestead.yaml File

192.168.32.32 midas.code

Step : 4 - Run Vagrant and Visit your site at midas.code

vagrant up

Step: 5 - Edit Your Packages.Json with the One Included in this Tutorial

Step: 6 - Run NPM INSTALL

npm install

Step: 7 Globally Install dev ip so you can use it also in other project

Note: This is Usefull to Tell Use What Ip we Can Access Our Site in Our Local Area Network

npm install -g dev-ip

Step : 8 Update Your Gulpfile.js with the One Included in This Tutorial.

Step : 9 Create app.scss in resources/asses/sass and Paste the Content of this file app.scss

Step : 10 Create app.js in resouces/assets/js and Paste the Content of this file app.js

Step : 11 Update Your welcome.blade.php in resource/views/welcome.blade.php with this content welcome.blade.php

Step 12: Run GULP Watch

gulp watch

[12:41:18] Using gulpfile ~\Codes\midas.code\gulpfile.js
[12:41:18] Starting 'watch'...
[12:41:18] Starting 'all'...
[12:41:18] Starting 'sass'...
[12:41:18] Finished 'sass' after 438 ms
[12:41:18] Starting 'webpack'...
[12:41:19] Finished 'webpack' after 350 ms
[12:41:19] Starting 'browserSync'...
[12:41:19] Finished 'browserSync' after 138 μs
[12:41:19] Finished 'all' after 798 ms
[12:41:19] Starting 'default'...
┌───────────────────┬───────────────────────────────┬────────────────────────────────┬────────────────────┐
│ Task              │ Summary                       │ Source Files                   │ Destination        │
├───────────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.sass()        │ 1. Compiling Sass             │ resources\assets\sass\app.scss │ public\css\app.css │
│                   │ 2. Autoprefixing CSS          │                                │                    │
│                   │ 3. Concatenating Files        │                                │                    │
│                   │ 4. Writing Source Maps        │                                │                    │
│                   │ 5. Saving to Destination      │                                │                    │
├───────────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.webpack()     │ 1. Transforming ES2015 to ES5 │ resources\assets\js\app.js     │ public\js\app.js   │
│                   │ 2. Writing Source Maps        │                                │                    │
│                   │ 3. Saving to Destination      │                                │                    │
├───────────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.browserSync() │ 1. Starting Browsersync       │
└───────────────────┴───────────────────────────────┴────────────────────────────────┴────────────────────┘
[12:41:19] Finished 'default' after 24 ms
[12:41:19] Finished 'watch' after 843 ms
[Midas Up Up and Away!] Proxying: http://midas.code
[Midas Up Up and Away!] Access URLs:
 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    Local: http://localhost:3000
 External: http://List [ "192.168.56.1", "192.168.10.1", "192.168.20.1", "192.168.30.1", "192.168.40.1", "192.168.50.1", "192.168.17.1", "192.168.69.1", "192.168.32.1", "192.168.11.1", "192.168.15.1", "192.168.16.1", "192.168.23.1", "192.168.12.1", "192.168.1.106" ]:3000
 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
[Midas Up Up and Away!] Watching files...
[12:41:22]
[12:41:22] webpack is watching for changes

Step 13: Open the Following

http://localhost:3000 - This will Be Open By Default on Your desktop

Choose Among all the  External URL Listed Above
For Example:
http://192.168.1.106:3000 - Open In Other Device such as Mobile, Tablet Connected in your Local Area Network

Step 14: Change Something in Your SASS, JS or BLADE.PHP and See it CHANGES LIVE!

CODE , EAT , RAVE REPEAT :D

Raw
app.js
import Vue from 'vue'
import UiButton from 'keen-ui/lib/UiButton'
import UiAlert from 'keen-ui/lib/UiAlert'
let x = 'power'
new Vue({
el: 'body',
data: {
user: `${x} overwhelming`
},
components: {
UiButton,
UiAlert
}
})
console.log(x)
Raw
app.scss
@import "node_modules/compass-sass-mixins/lib/compass";
@import "./node_modules/susy/sass/susy";
$susy: (
columns: 12,
container: 1200px,
gutters: 1/4,
global-box-sizing: border-box,
// debug: (image: show)
);
body {
@include container(80em);
background-color: pink;
}
nav { @include span(25%); }
.button { @include border-radius(4px, 4px); }a
Raw
gulpfile.js
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| 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.
|
*/
var devip = require('dev-ip');
elixir(function(mix) {
mix.sass('app.scss')
.webpack('app.js')
.browserSync({
ui: false,
proxy: "midas.code",
port: 3000,
logPrefix : "Midas Up Up and Away!",
logConnections : false,
reloadOnRestart : false,
notify : false,
online: true,
open: "local",
host: devip()
});
});
Raw
packages.json
{
"name": "Laravel Elixir - Modern Work Flow",
"version": "1.0.0",
"description": "Easy , Fast and Fun Modern Work Flow Using Laravel Elixir",
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"compass-sass-mixins": "^0.12.7",
"gulp": "^3.9.1",
"keen-ui": "^0.8.8",
"laravel-elixir": "^6.0.0-9",
"laravel-elixir-browsersync-official": "^1.0.0",
"laravel-elixir-webpack-official": "^1.0.2",
"susy": "^2.2.12",
"vue": "^1.0.26"
},
"dependencies": {}
}
Raw
welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/app.css">
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
display: table;
font-weight: 100;
font-family: 'Lato', sans-serif;
}
.container {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content {
text-align: center;
display: inline-block;
}
.title {
font-size: 96px;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="title">Laravel 6</div>
<div class="group">
<ui-button>Default</ui-button>
<ui-button color="primary">Primary</ui-button>
<ui-button color="accent">Accent</ui-button>
<ui-button color="success">Success</ui-button>
<ui-button color="warning">Warning</ui-button>
<ui-button color="danger">Danger</ui-button>
</div>
</div>
<div class="demo">
<ui-alert text="Hi everybody! This is the default alert."></ui-alert>
<ui-alert type="success">
Okilly dokilly, your account was updated successfully.
</ui-alert>
<ui-alert type="warning">
Ay caramba! Alerts can also contain HTML. <a href="https://google.com" target="_blank">Click here</a> for Google.com.
</ui-alert>
<ui-alert
type="error"
text="D'oh! Something went wrong and we cannot process your request at this time. Try again later."
></ui-alert>
<ui-alert icon="battery_alert" type="warning">
This alert has a custom icon.
</ui-alert>
<ui-alert>
This is a multi-line alert. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor suscipit facilis explicabo officiis consectetur, ipsam voluptate excepturi quas quae. Dolorem.
</ui-alert>
<ui-alert text="This alert is not dismissible." :dismissible="false"></ui-alert>
<ui-alert hide-icon>
The icon for this alert has been removed.
</ui-alert>
<ui-alert :dismissible="false" hide-icon>
This alert has no icon and cannot be dismissed.
</ui-alert>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment