2015-04-24 85 views
0

我正在嘗試在流明(php框架)內安裝Apps for Apps。流明應用程序基礎

我很難搞清楚如何在我的gulpfile裏面配置前臺路由器來創建正確的route.js文件。

  1. 暴露在本地主機上的文件是在/public/index.php(加載罰款)
  2. 它加載app.css,foundation.js,templates.js,routes.js和app.js就好了,這些都在公共/建設/資產(我相應地改變了大文件)。

  3. 然而,routes.js文件顯示:

    [{ 「Name」: 「家」, 「URL」: 「/」, 「路徑」: 「客戶端/模板/ /home.html」 的} ]。

代替:

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

我該如何解決這個問題?

我gulpfile是:

// FOUNDATION FOR APPS TEMPLATE GULPFILE 
// ------------------------------------- 
// This file processes all of the assets in the "client" folder, combines them with the Foundation for Apps assets, and outputs the finished files in the "build" folder as a 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 for --production flag 
var isProduction = !!(argv.production); 

// 2. FILE PATHS 
// - - - - - - - - - - - - - - - 

var paths = { 
    assets: [ 
    './client/**/*.*', 
    '!./client/templates/**/*.*', 
    '!./client/assets/{scss,js}/**/*.*' 
    ], 
    // Sass will check these folders for files when you use @import. 
    sass: [ 
    'client/assets/scss', 
    'bower_components/foundation-apps/scss' 
    ], 
    // These files include Foundation for Apps and its 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 are for your app's JavaScript 
    appJS: [ 
    'client/assets/js/app.js' 
    ] 
}; 

// 3. TASKS 
// - - - - - - - - - - - - - - - 

// Cleans the build directory 
gulp.task('clean', function(cb) { 
    rimraf('../public/build', cb); 
}); 

// Copies everything in the client folder except templates, Sass, and JS 
gulp.task('copy', function() { 
    return gulp.src(paths.assets, { 
    base: './client/' 
    }) 
    .pipe(gulp.dest('../public/build')) 
    ; 
}); 

// Copies your app's page templates and generates URLs for 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 the Foundation for Apps directive partials into a 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 and copies the Foundation for Apps JavaScript, as well as your 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 this out; going to use php artisan serve 
// Starts a test server, which you can view at 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 your entire app once, without starting a server 
gulp.task('build', function(cb) { 
    sequence('clean', ['copy', 'copy:foundation', 'sass', 'uglify'], 'copy:templates', cb); 
}); 

// RR: changed to not run server 
// Default task: builds your app, starts a server, and recompiles assets when they 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']); 
}); 

回答

0

我找到了一個解決辦法:

  1. 安裝一飲而盡替換

    npm install --save-dev gulp-replace
  2. 爲它創建一個變種:

    var replace = require('gulp-replace');
  3. 創建一個任務。

    // RR: Changes paths in routes.js to 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. 加建任務

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

這是最後的工作gulpfile,如果任何人需要它。我相信有更好的方法來完成這一切,但嘿, - 它的工作原理!

gulpfile位於項目名稱/ FFA/

PHP工匠發球運行在端口8000的服務器和響應livereload。

工作前端目錄是在項目名稱/ FFA /客戶/

建設進入項目名稱/公/建設/

 

    // FOUNDATION FOR APPS TEMPLATE GULPFILE 
    // ------------------------------------- 
    // This file processes all of the assets in the "client" folder, combines them with the Foundation for Apps assets, and outputs the finished files in the "build" folder as a 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'); 
    var replace = require('gulp-replace'); 
    var livereload = require('gulp-livereload'); 

    // Check for --production flag 
    var isProduction = !!(argv.production); 

    // 2. FILE PATHS 
    // - - - - - - - - - - - - - - - 

    var paths = { 
     assets: [ 
     './client/**/*.*', 
     '!./client/templates/**/*.*', 
     '!./client/assets/{scss,js}/**/*.*' 
     ], 
     // Sass will check these folders for files when you use @import. 
     sass: [ 
     'client/assets/scss', 
     'bower_components/foundation-apps/scss' 
     ], 
     // These files include Foundation for Apps and its 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 are for your app's JavaScript 
     appJS: [ 
     'client/assets/js/app.js' 
     ] 
    }; 

    // 3. TASKS 
    // - - - - - - - - - - - - - - - 

    // Cleans the build directory 
    gulp.task('clean', function(cb) { 
     rimraf('../public/build', cb); 
    }); 

    // Copies everything in the client folder except templates, Sass, and JS 
    gulp.task('copy', function() { 
     return gulp.src(paths.assets, { 
     base: './client/' 
     }) 
     .pipe(gulp.dest('../public/build')) 
     ; 
    }); 

    // Copies your app's page templates and generates URLs for them 
    gulp.task('copy:templates', function() { 
     return gulp.src('./client/templates/**/*.html') 
     .pipe(router({ 
      path: '../public/build/assets/js/routes.js', 
      root: 'client' 
     })) 
     .pipe(gulp.dest('../public/build/templates')) 
     ; 
    }); 

    // RR: Changes paths in routes.js to 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/')); 
    }); 


    // Compiles the Foundation for Apps directive partials into a 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 and copies the Foundation for Apps JavaScript, as well as your 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/')) 
     ; 
    }); 


    // Builds your entire app once, without starting a server 
    gulp.task('build', function(cb) { 
     sequence('clean', ['copy', 'copy:foundation', 'sass', 'uglify'], 'copy:templates', 'update-route', cb); 
    }); 

    // Default task: builds your app, and recompiles assets when they change 
    gulp.task('default', ['build'], function() { 

     livereload.listen(35729); 

     // Watch Sass 
     gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['build']); 

     // Watch JavaScript 
     gulp.watch(['./client/assets/js/**/*', './js/**/*'], ['build']); 

     // Watch static files 
     gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*'], ['build']); 

     // Watch app templates 
     gulp.watch(['./client/templates/**/*.html'], ['build']); 

     gulp.on('stop', function(){ 
     livereload.changed(""); 
     }); 

    });