laravel - Foundation for Apps inside of Lumen -


i attempting install foundation apps inside of lumen (a php framework).

i having hard time figuring out how configure front-router inside gulpfile create correct route.js file.

  1. the file exposed on localhost @ /public/index.php (loads fine)
  2. it loads app.css, foundation.js, templates.js, routes.js , app.js fine, @ public/build/assets (i changed gulpfile accordingly).

  3. however, routes.js file shows:

    [{"name":"home","url":"/","path":"client/templates/home.html"}];

instead of:

[{"name":"home","url":"/","path":"build/templates/home.html"}]; 

how fix this?

my gulpfile is:

// foundation apps template gulpfile // ------------------------------------- // file processes of assets in "client" folder, combines them foundation apps assets, , outputs finished files in "build" folder finished app.  // 1. libraries // - - - - - - - - - - - - - - -  var $        = require('gulp-load-plugins')(); var argv     = require('yargs').argv; var gulp     = require('gulp'); var rimraf   = require('rimraf'); var router   = require('front-router'); var sequence = require('run-sequence');  // check --production flag var isproduction = !!(argv.production);  // 2. file paths // - - - - - - - - - - - - - - -  var paths = {   assets: [     './client/**/*.*',     '!./client/templates/**/*.*',     '!./client/assets/{scss,js}/**/*.*'   ],   // sass check these folders files when use @import.   sass: [     'client/assets/scss',     'bower_components/foundation-apps/scss'   ],   // these files include foundation apps , dependencies   foundationjs: [     'bower_components/fastclick/lib/fastclick.js',     'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js',     'bower_components/tether/tether.js',     'bower_components/hammerjs/hammer.js',     'bower_components/angular/angular.js',     'bower_components/angular-animate/angular-animate.js',     'bower_components/angular-ui-router/release/angular-ui-router.js',     'bower_components/foundation-apps/js/vendor/**/*.js',     'bower_components/foundation-apps/js/angular/**/*.js',     '!bower_components/foundation-apps/js/angular/app.js'   ],   // these files app's javascript   appjs: [     'client/assets/js/app.js'   ] };  // 3. tasks // - - - - - - - - - - - - - - -  // cleans build directory gulp.task('clean', function(cb) {   rimraf('../public/build', cb); });  // copies in client folder except templates, sass, , js gulp.task('copy', function() {   return gulp.src(paths.assets, {     base: './client/'   })     .pipe(gulp.dest('../public/build'))   ; });  // copies app's page templates , generates urls them gulp.task('copy:templates', function() {   return gulp.src('./client/templates/**/*.html')     .pipe(router({       path: '../public/build/assets/js/routes.js',       root: './client/templates'     }))     .pipe(gulp.dest('../public/build/templates'))   ; });  // compiles foundation apps directive partials single javascript file gulp.task('copy:foundation', function(cb) {   gulp.src('bower_components/foundation-apps/js/angular/components/**/*.html')     .pipe($.nghtml2js({       prefix: 'components/',       modulename: 'foundation',       declaremodule: false     }))     .pipe($.uglify())     .pipe($.concat('templates.js'))     .pipe(gulp.dest('../public/build/assets/js'))   ;    // iconic svg icons   gulp.src('./bower_components/foundation-apps/iconic/**/*')     .pipe(gulp.dest('../public/build/assets/img/iconic/'))   ;    cb(); });  // compiles sass gulp.task('sass', function () {   return gulp.src('client/assets/scss/app.scss')     .pipe($.sass({       includepaths: paths.sass,       outputstyle: (isproduction ? 'compressed' : 'nested'),       errlogtoconsole: true     }))     .pipe($.autoprefixer({       browsers: ['last 2 versions', 'ie 10']     }))     .pipe(gulp.dest('../public/build/assets/css/'))   ; });  // compiles , copies foundation apps javascript, app's custom js gulp.task('uglify', ['uglify:foundation', 'uglify:app']);  gulp.task('uglify:foundation', function(cb) {   var uglify = $.if(isproduction, $.uglify()     .on('error', function (e) {       console.log(e);     }));    return gulp.src(paths.foundationjs)     .pipe(uglify)     .pipe($.concat('foundation.js'))     .pipe(gulp.dest('../public/build/assets/js/'))   ; });  gulp.task('uglify:app', function() {   var uglify = $.if(isproduction, $.uglify()     .on('error', function (e) {       console.log(e);     }));    return gulp.src(paths.appjs)     .pipe(uglify)     .pipe($.concat('app.js'))     .pipe(gulp.dest('../public/build/assets/js/'))   ; });  // rr: took out; going use php artisan serve // starts test server, can view @ http://localhost:8080 // gulp.task('server', ['build'], function() { //   gulp.src('./build') //     .pipe($.webserver({ //       port: 8080, //       host: 'localhost', //       fallback: 'index.html', //       livereload: true, //       open: true //     })) //   ; // });  // builds entire app once, without starting server gulp.task('build', function(cb) {   sequence('clean', ['copy', 'copy:foundation', 'sass', 'uglify'], 'copy:templates', cb); });  // rr: changed not run server // default task: builds app, starts server, , recompiles assets when change // gulp.task('default', ['server'], function () { gulp.task('default', ['build'], function () {   // watch sass   gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['sass']);    // watch javascript   gulp.watch(['./client/assets/js/**/*', './js/**/*'], ['uglify:app']);    // watch static files   gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*'], ['copy']);    // watch app templates   gulp.watch(['./client/templates/**/*.html'], ['copy:templates']); }); 

i found workaround:

  1. install gulp-replace

    npm install --save-dev gulp-replace
  2. create var it:

    var replace  = require('gulp-replace');
  3. create task.

    // rr: changes paths in routes.js build/templates/ gulp.task('update-route', function(){   gulp.src(['../public/build/assets/js/routes.js'])     .pipe(replace('templates', 'build/templates'))     .pipe(gulp.dest('../public/build/assets/js/')); });
  4. add build task

    gulp.task('build', function(cb) {   sequence('clean', ['copy', 'copy:foundation', 'sass', 'uglify'], 'copy:templates', 'update-route', cb); });

Comments

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -