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.
- the file exposed on localhost @ /public/index.php (loads fine)
it loads app.css, foundation.js, templates.js, routes.js , app.js fine, @ public/build/assets (i changed gulpfile accordingly).
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:
install gulp-replace
npm install --save-dev gulp-replace
create var it:
var replace = require('gulp-replace');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/')); });add build task
gulp.task('build', function(cb) { sequence('clean', ['copy', 'copy:foundation', 'sass', 'uglify'], 'copy:templates', 'update-route', cb); });
Comments
Post a Comment