Last active
April 5, 2016 06:59
-
-
Save appkr/219567b3063c2ce25dcf to your computer and use it in GitHub Desktop.
Laravel 5 Front-end Scaffolding
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "analytics": false, | |
| "directory": "resources/assets/vendor" | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "project", | |
| "version": "0.0.0", | |
| "authors": [ | |
| "Juwon Kim <[email protected]>" | |
| ], | |
| "license": "MIT", | |
| "ignore": [ | |
| "**/.*", | |
| "node_modules", | |
| "bower_components", | |
| "resources/assets/vendor", | |
| "test", | |
| "tests" | |
| ], | |
| "dependencies": {}, | |
| "devDependencies": { | |
| "jquery": "~2.1.3", | |
| "bootstrap-sass": "~3.3.3", | |
| "font-awesome": "~4.3.0" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Not recommended | |
| // This is a task script used before the release of Laravel5 | |
| // Instead use Elixir, which is a wrapper of gulp | |
| var gulp = require("gulp"), | |
| livereload = require("gulp-livereload"), | |
| gutil = require("gulp-util"), | |
| notify = require("gulp-notify"), | |
| sass = require("gulp-sass"), | |
| autoprefixer = require("gulp-autoprefixer"), | |
| concat = require("gulp-concat"), | |
| minify = require("gulp-minify-css"), | |
| uglify = require("gulp-uglify"), | |
| rev = require("gulp-rev"); | |
| var fontSource = [ | |
| "resources/assets/vendor/bootstrap-sass/assets/fonts/bootstrap/**/*", | |
| "resources/assets/vendor/font-awesome/fonts/**/*" | |
| ], | |
| fontTarget = "public/build/fonts"; | |
| var sassSource = ["resources/assets/sass/style.scss"], | |
| sassTarget = "resources/assets/sass"; | |
| var cssSource = ["resources/assets/sass/style.css"], | |
| cssTarget = "public/css"; | |
| var scriptSource = [ | |
| "resources/assets/vendor/jquery/dist/jquery.js", | |
| "resources/assets/vendor/bootstrap-sass/assets/javascripts/bootstrap.js", | |
| "resources/assets/js/script.js" | |
| ], | |
| scriptTarget = "public/js"; | |
| var revSource = [ | |
| "public/css/all.css", | |
| "public/js/all.js" | |
| ], | |
| revTarget = "public/build"; | |
| gulp.task("fonts", function() { | |
| gulp.src(fontSource) | |
| .pipe(gulp.dest(fontTarget)); | |
| }); | |
| gulp.task("assets", function() { | |
| gulp.src(sassSource) | |
| .pipe(sass().on("error", gutil.log)) | |
| .pipe(autoprefixer("last 10 version", "ie8")) | |
| .pipe(minify({keepSpecialComments: 0})) | |
| .pipe(concat("style.css")) | |
| .pipe(gulp.dest(sassTarget)); | |
| gulp.src(cssSource) | |
| .pipe(minify()) | |
| .pipe(concat("all.css")) | |
| .pipe(gulp.dest(cssTarget)); | |
| gulp.src(scriptSource) | |
| .pipe(uglify()) | |
| .pipe(concat("all.js")) | |
| .pipe(gulp.dest(scriptTarget)); | |
| return gulp.src(revSource) | |
| .pipe(rev()) | |
| .pipe(gulp.dest(revTarget)) | |
| .pipe(rev.manifest({ merge: true })) | |
| .pipe(gulp.dest(revTarget)) | |
| .pipe(livereload()) | |
| .pipe(notify({message: "Task complete"})); | |
| }); | |
| gulp.task("watch", function () { | |
| livereload.listen(); | |
| gulp.watch(sassSource.concat(scriptSource), ["assets"]); | |
| }); | |
| gulp.task("default", ["fonts", "assets"]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var elixir = require('laravel-elixir'); | |
| var sassSource = ["style.scss"], | |
| sassTarget = "resources/assets/sass" | |
| cssSource = ["../assets/sass/style.css"], | |
| scriptSource = [ | |
| "../assets/vendor/jquery/dist/jquery.js", | |
| "../assets/vendor/bootstrap-sass/assets/javascripts/bootstrap.js", | |
| "../assets/js/script.js" | |
| ], | |
| fontSource = [ | |
| "resources/assets/vendor/bootstrap-sass/assets/fonts/bootstrap", | |
| "resources/assets/vendor/font-awesome/fonts" | |
| ], | |
| fontTarget = "public/build/fonts", | |
| versioningSource = [ | |
| "css/all.css", | |
| "js/all.js" | |
| ]; | |
| elixir(function(mix) { | |
| mix | |
| .sass(sassSource, sassTarget) // sass(resources/sass/./) => public/css/original-file-name.css | |
| .styles(cssSource) // styles(resources/css/./) => public/css/all.css | |
| .scripts(scriptSource) // scripts(resources/js/./) => public/js/all.js | |
| .version(versioningSource) //version(public/./file-name.ext) | |
| .copy(fontSource[0], fontTarget) // copy(full-source-path, full-target-path) | |
| .copy(fontSource[1], fontTarget); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- resources/views/app.blade.php --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="description" content="Laravel 5 Front-end Scaffolding"> | |
| <meta charset="utf-8"> | |
| <title>Laravel 5 Front-end Scaffolding</title> | |
| <link href="{{ elixir('css/all.css') }}" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <script src="{{ elixir('js/all.js') }}"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "project", | |
| "description": "", | |
| "version": "0.0.0", | |
| "author": { | |
| "name": "Juwon Kim", | |
| "email": "[email protected]" | |
| }, | |
| "dependencies": {}, | |
| "devDependencies": { | |
| "laravel-elixir": "^0.10.7" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* resources/assets/sass */ | |
| @import url("//fonts.googleapis.com/css?family=Roboto:300,400,500"); | |
| @import "../vendor/bootstrap-sass/assets/stylesheets/bootstrap"; | |
| @import "../vendor/font-awesome/scss/font-awesome"; | |
| $btn-font-weight: 300; | |
| $font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif; | |
| body, label, .checkbox label { | |
| font-weight: 300; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // paste this into node_modules/laravel-elixir/ingredients/watch.js | |
| // install dependency by issuing "cd node_modules/laravel-elixir/ && npm install gulp-livereload --save" | |
| var gulp = require('gulp'); | |
| var _ = require('underscore'); | |
| var config = require('laravel-elixir').config; | |
| var inSequence = require('run-sequence'); | |
| var livereload = require('gulp-livereload'); | |
| var srcPaths; | |
| var tasksToRun; | |
| gulp.task('watch', function() { | |
| livereload.listen(); | |
| srcPaths = config.watchers.default; | |
| tasksToRun = _.intersection(config.tasks, _.keys(srcPaths).concat('copy')); | |
| inSequence.apply(this, tasksToRun.concat('watch-assets')); | |
| gulp.on('stop', function() { | |
| livereload.changed(""); | |
| }); | |
| }); | |
| gulp.task('watch-assets', function() { | |
| for (task in srcPaths) { | |
| gulp.watch(srcPaths[task], [task]); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment