Question

在设置gulp任务后，我无法在Ionic中加载模板，这是我用firebug得到的错误：

  Cannot GET /templates/login.html

这是我项目的树

app  
   controllers
   services
   templates/
      login.html
   index.html
   app.js
vendors : bower directory 
web:  this is the deployment directory 
  templates/
     login.html  the gulp task copy the file

这是完整的 gulp 文件：

'use strict';

var gulp    = require('gulp');
var connect = require('gulp-connect');
var uglify  = require('gulp-uglify');
var concat  = require('gulp-concat');
var historyApiFallback = require('connect-history-api-fallback');

/**
 * Deploying the compress vendors
*/
gulp.task('vendors', function () {
  gulp.src('./vendors/**')
    .pipe(gulp.dest('./www/lib'))
    .pipe( connect.reload() );
});
/**
 * Deploying the templates in  www
*/
gulp.task('templates',function(){
  gulp.src( './app/templates/**/*.html')
      .pipe( gulp.dest( './www/js/templates') )
      .pipe( connect.reload() );
});


/**
 * Deployting the compress factories in www
*/
gulp.task( 'factories', function(){
  gulp.src('./app/core/**/*.js')
      .pipe( uglify({mangle: false}) )
      .pipe( concat('factories.js') )
      .pipe( gulp.dest('./www/js/') )
      .pipe( connect.reload() );
});
/**
 * Deployting the compress services in www
*/
gulp.task( 'services', function(){
  gulp.src('./app/services/**/*.js')
      .pipe( uglify({mangle: false}) )
      .pipe( concat('services.js') )
      .pipe( gulp.dest('./www/js/') )
      .pipe( connect.reload() );
});

/**
 * Deploying the compress controllers in www
*/
gulp.task( 'controllers', function(){
  gulp.src('./app/controllers/**/*.js')
      .pipe( uglify({mangle: false}) )
      .pipe( concat('controllers.js') )
      .pipe( gulp.dest('./www/js/') )
      .pipe( connect.reload() );
});

/**
 * Deployting the app in www
*/
gulp.task( 'app', function(){
  gulp.src('./app/app.js')
      .pipe( uglify({mangle: false}) )
      .pipe( concat('app.js') )
      .pipe( gulp.dest('./www/js') );
});

gulp.task( 'index', function(){
  gulp.src('./app/index.html')
      .pipe( gulp.dest('./www/') )
      .pipe( connect.reload() );
});

gulp.task( 'watch',function(){
    gulp.watch( ['./app/templates/**/*.html'], ['templates'] );
    gulp.watch( ['./app/controllers/**/*.js'], ['controllers']);
    gulp.watch( ['./app/core/**/*.js'],        ['factories']);
    gulp.watch( ['./app/services/**/*.js'],    ['services'] );
    gulp.watch( ['./app/app.js'],              ['app'] );
    gulp.watch( ['./app/index.html'], ['index'] );
});


 // Servidor web de desarrollo
 gulp.task('server', function() {
     connect.server({
       root: './app',
       hostname: '0.0.0.0',
       port: 8080,
       livereload: true,
       middleware: function(connect, opt) {
         return [ historyApiFallback ];
       }
     });
});

var tareas = [
  'vendors','index','templates', 'factories', 'services','controllers','app', 'watch'
];



gulp.task('default',tareas);

这是我要部署的 app.js ：

var app =   angular.module('rondas', ['ionic']);


app.run(['$ionicPlatform',function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });

}]);
app.config(['$stateProvider','$urlRouterProvider','$httpProvider',function( $stateProvider,$urlRouterProvider,$httpProvider ){
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    $stateProvider.state('login', {
      url: '/',
      templateUrl: 'templates/login.html',
      controller : 'LoginController'
    });
    $urlRouterProvider.otherwise('/');
}]);

奇怪的是，当我运行gulp任务时，文件被复制到expectd目录中，但是当我使用ionic serve和firebug运行应用程序时，我收到错误。

这是ionic.project文件：

{
  "name": "irondas",
  "app_id": "",
  "gulpStartupTasks": [
    "vendors","templates", "factories", "services","controllers","app", "watch"
  ]
}

您可以查看所有来源here

那时我不知道我做错了什么？

Answer 1

您的gulp进程将模板文件放入www/js/templates目录，而不是您建议的web/templates目录：

.pipe( gulp.dest( './www/js/templates') )

也许你打算放

.pipe( gulp.dest( './web/templates') )

相反？

我无法加载模板Angular JS + Ionic + Gulpjs

1 个答案: