2016-03-05 45 views
2

我遇到了使用我創建的Grunt構建的問題。Grunt Serve - Works,Grunt Build/Upload - 不起作用(Static Site)

的問題

的一切,當我運行grunt serve本地工作。但是,當我運行grunt build,然後將內容同步到我的S3存儲桶時,ng-view頁面無法正確呈現。頁面的頁眉實際上被加載,但內容似乎只是消失 - 即使是純文本。

我附加了當前正在使用的Gruntfile,bower.json和package.json。

在任何瀏覽器的開發控制檯中沒有錯誤吐出,網絡選項卡上沒有404錯誤。

步驟我曾經

  1. 創建使用yo angular
  2. 使用配置在新目錄中的模板:
    • 使用咕嚕,不咕嘟咕嘟
    • 基本AngularJS選項
    • 包括薩斯/指南針
    • 不包含引導程序
  3. 設置Zurb基金會5
  4. 檢查package.jsonbower.son依賴版本
  5. 使用grunt serve驗證
  6. 創建一個Amazon S3存儲(aws s3 md myTestBucket
  7. 同步的dist目錄下生成建立網站(was s3 . sync s3://myTestBucket
  8. 啓動網站,/views文件夾看起來不完整

我試過

  • 我想我的主持本地的Apache服務器上的文件具有相同的結果。但是,grunt serve仍然有效。

  • 上執行一個完全不同的計算機與源簽出該項目grunt serve - 工作得很好

  • 丟棄的靜態Apache Web服務器上的文件 - 沒有工作

  • 刪除倍率從在/views文件夾 - 還是沒工作

文件

鮑爾。JSON

{ 
    "name": "myApp", 
    "version": "0.0.3", 
    "dependencies": { 
    "angular": "^1.4.9", 
    "angular-animate": "^1.4.9", 
    "angular-aria": "^1.4.9", 
    "angular-cookies": "^1.4.9", 
    "angular-messages": "^1.4.9", 
    "angular-resource": "^1.4.9", 
    "angular-route": "^1.4.9", 
    "angular-sanitize": "^1.4.9", 
    "angular-touch": "^1.4.9", 
    "jquery": "^2.2.0", 
    "foundation": "^5.5.3", 
    "font-awesome-animation": "^0.0.8" 
    }, 
    "devDependencies": { 
    "angular-mocks": "^1.4.0" 
    }, 
    "appPath": "app", 
    "moduleName": "myApp" 
} 

的package.json

{ 
    "name": "myApp", 
    "private": true, 
    "dependencies": { 
    "grunt-cli": "^0.1.13", 
    "grunt": "^0.4.5" 
    }, 
    "devDependencies": { 
    "autoprefixer": "^6.3.3", 
    "grunt": "^0.4.5", 
    "grunt-angular-templates": "^1.0.2", 
    "grunt-concurrent": "^2.1.0", 
    "grunt-contrib-clean": "^0.7.0", 
    "grunt-contrib-compass": "^1.0.4", 
    "grunt-contrib-concat": "^0.5.1", 
    "grunt-contrib-connect": "^0.11.2", 
    "grunt-contrib-copy": "^0.8.2", 
    "grunt-contrib-cssmin": "^0.14.0", 
    "grunt-contrib-htmlmin": "^0.6.0", 
    "grunt-contrib-imagemin": "^1.0.0", 
    "grunt-contrib-jshint": "^0.12.0", 
    "grunt-contrib-uglify": "^0.11.0", 
    "grunt-contrib-watch": "^0.6.1", 
    "grunt-filerev": "^2.3.1", 
    "grunt-google-cdn": "^0.4.3", 
    "grunt-jscs": "^2.6.0", 
    "grunt-karma": "^0.12.1", 
    "grunt-newer": "^1.1.1", 
    "grunt-ng-annotate": "^1.0.1", 
    "grunt-postcss": "^0.7.1", 
    "grunt-svgmin": "^3.1.2", 
    "grunt-usemin": "^3.1.1", 
    "grunt-wiredep": "^2.0.0", 
    "jit-grunt": "^0.9.1", 
    "jshint-stylish": "^2.1.0", 
    "karma": "0.13.19", 
    "karma-jasmine": "^0.3.6", 
    "karma-phantomjs-launcher": "^1.0.0", 
    "jasmine-core": "^2.4.1", 
    "time-grunt": "^1.3.0", 
    "phantomjs-prebuilt": "^2.1.3", 
    "serve-static": "^1.10.2" 
    }, 
    "engines": { 
    "node": ">=0.10.0" 
    }, 
    "scripts": { 
    "test": "grunt test" 
    } 
} 

Gruntfile

// Generated on 2016-02-04 using generator-angular 0.15.1 
'use strict'; 

// # Globbing 
// for performance reasons we're only matching one level down: 
// 'test/spec/{,*/}*.js' 
// use this if you want to recursively match all subfolders: 
// 'test/spec/**/*.js' 

module.exports = function (grunt) { 

    // Time how long tasks take. Can help when optimizing build times 
    require('time-grunt')(grunt); 

    // Automatically load required Grunt tasks 
    require('jit-grunt')(grunt, { 
    useminPrepare: 'grunt-usemin', 
    ngtemplates: 'grunt-angular-templates', 
    cdnify: 'grunt-google-cdn' 
    }); 

    // add static serve 
    var serveStatic = require('serve-static'); 

    // Configurable paths for the application 
    var appConfig = { 
    app: require('./bower.json').appPath || 'app', 
    dist: 'dist' 
    }; 

    // Define the configuration for all the tasks 
    grunt.initConfig({ 

    // Project settings 
    appConfig: appConfig, 

    // Watches files for changes and runs tasks based on the changed files 
    watch: { 
     bower: { 
     files: ['bower.json'], 
     tasks: ['wiredep'] 
     }, 
     js: { 
     files: ['<%= appConfig.app %>/scripts/{,*/}*.js'], 
     tasks: ['newer:jshint:all', 'newer:jscs:all'], 
     options: { 
      livereload: '<%= connect.options.livereload %>' 
     } 
     }, 
     jsTest: { 
     files: ['test/spec/{,*/}*.js'], 
     tasks: ['newer:jshint:test', 'newer:jscs:test', 'karma'] 
     }, 
     compass: { 
     files: ['<%= appConfig.app %>/styles/{,*/}*.{scss,sass}'], 
     tasks: ['compass:server', 'postcss:server'] 
     }, 
     gruntfile: { 
     files: ['Gruntfile.js'] 
     }, 
     livereload: { 
     options: { 
      livereload: '<%= connect.options.livereload %>' 
     }, 
     files: [ 
      '<%= appConfig.app %>/{,*/}*.html', 
      '.tmp/styles/{,*/}*.css', 
      '<%= appConfig.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' 
     ] 
     } 
    }, 

    // The actual grunt server settings 
    connect: { 
     options: { 
     port: 9000, 
     // Change this to '0.0.0.0' to access the server from outside. 
     hostname: '0.0.0.0', 
     livereload: 35729 
     }, 
     livereload: { 
     options: { 
      open: false, 
      middleware: function (connect) { 
      return [ 
       serveStatic('.tmp'), 
       connect().use(
       '/bower_components', 
       serveStatic('./bower_components') 
      ), 
       connect().use(
       '/app/styles', 
       serveStatic('./app/styles') 
      ), 
       serveStatic(appConfig.app) 
      ]; 
      } 
     } 
     }, 
     test: { 
     options: { 
      port: 9001, 
      middleware: function (connect) { 
      return [ 
       serveStatic('.tmp'), 
       serveStatic('test'), 
       connect().use(
       '/bower_components', 
       serveStatic('./bower_components') 
      ), 
       serveStatic(appConfig.app) 
      ]; 
      } 
     } 
     }, 
     dist: { 
     options: { 
      open: false, 
      base: '<%= appConfig.dist %>' 
     } 
     } 
    }, 

    // Make sure there are no obvious mistakes 
    jshint: { 
     options: { 
     jshintrc: '.jshintrc', 
     reporter: require('jshint-stylish') 
     }, 
     all: { 
     src: [ 
      'Gruntfile.js', 
      '<%= appConfig.app %>/scripts/{,*/}*.js' 
     ] 
     }, 
     test: { 
     options: { 
      jshintrc: 'test/.jshintrc' 
     }, 
     src: ['test/spec/{,*/}*.js'] 
     } 
    }, 

    // Make sure code styles are up to par 
    jscs: { 
     options: { 
     config: '.jscsrc', 
     verbose: true 
     }, 
     all: { 
     src: [ 
      'Gruntfile.js', 
      '<%= appConfig.app %>/scripts/{,*/}*.js' 
     ] 
     }, 
     test: { 
     src: ['test/spec/{,*/}*.js'] 
     } 
    }, 

    // Empties folders to start fresh 
    clean: { 
     dist: { 
     files: [{ 
      dot: true, 
      src: [ 
      '.tmp', 
      '<%= appConfig.dist %>/{,*/}*', 
      '!<%= appConfig.dist %>/.git{,*/}*' 
      ] 
     }] 
     }, 
     server: '.tmp' 
    }, 

    // Add vendor prefixed styles 
    postcss: { 
     options: { 
     processors: [ 
      require('autoprefixer')({browsers: ['last 1 version']}) 
     ] 
     }, 
     server: { 
     options: { 
      map: true 
     }, 
     files: [{ 
      expand: true, 
      cwd: '.tmp/styles/', 
      src: '{,*/}*.css', 
      dest: '.tmp/styles/' 
     }] 
     }, 
     dist: { 
     files: [{ 
      expand: true, 
      cwd: '.tmp/styles/', 
      src: '{,*/}*.css', 
      dest: '.tmp/styles/' 
     }] 
     } 
    }, 

    // Automatically inject Bower components into the app 
    wiredep: { 
     app: { 
     src: ['<%= appConfig.app %>/index.html'], 
     ignorePath: /\.\.\// 
     }, 
     test: { 
     devDependencies: true, 
     src: '<%= karma.unit.configFile %>', 
     ignorePath: /\.\.\//, 
     fileTypes:{ 
      js: { 
      block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi, 
       detect: { 
       js: /'(.*\.js)'/gi 
       }, 
       replace: { 
       js: '\'{{filePath}}\',' 
       } 
      } 
      } 
     }, 
     sass: { 
     src: ['<%= appConfig.app %>/styles/{,*/}*.{scss,sass}'], 
     ignorePath: /(\.\.\/){1,2}bower_components\// 
     } 
    }, 

    // Compiles Sass to CSS and generates necessary files if requested 
    compass: { 
     options: { 
     sassDir: '<%= appConfig.app %>/styles', 
     cssDir: '.tmp/styles', 
     generatedImagesDir: '.tmp/images/generated', 
     imagesDir: '<%= appConfig.app %>/images', 
     javascriptsDir: '<%= appConfig.app %>/scripts', 
     fontsDir: '<%= appConfig.app %>/styles/fonts', 
     importPath: './bower_components', 
     httpImagesPath: '/images', 
     httpGeneratedImagesPath: '/images/generated', 
     httpFontsPath: '/styles/fonts', 
     relativeAssets: false, 
     assetCacheBuster: false, 
     raw: 'Sass::Script::Number.precision = 10\n' 
     }, 
     dist: { 
     options: { 
      generatedImagesDir: '<%= appConfig.dist %>/images/generated' 
     } 
     }, 
     server: { 
     options: { 
      sourcemap: true 
     } 
     } 
    }, 

    // Renames files for browser caching purposes 
    filerev: { 
     dist: { 
     src: [ 
      '<%= appConfig.dist %>/scripts/{,*/}*.js', 
      '<%= appConfig.dist %>/styles/{,*/}*.css', 
      '<%= appConfig.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', 
      '<%= appConfig.dist %>/styles/fonts/*' 
     ] 
     } 
    }, 

    // Reads HTML for usemin blocks to enable smart builds that automatically 
    // concat, minify and revision files. Creates configurations in memory so 
    // additional tasks can operate on them 
    useminPrepare: { 
     html: '<%= appConfig.app %>/index.html', 
     options: { 
     dest: '<%= appConfig.dist %>', 
     flow: { 
      html: { 
      steps: { 
       js: ['concat', 'uglifyjs'], 
       css: ['cssmin'] 
      }, 
      post: {} 
      } 
     } 
     } 
    }, 

    // Performs rewrites based on filerev and the useminPrepare configuration 
    usemin: { 
     html: ['<%= appConfig.dist %>/{,*/}*.html'], 
     css: ['<%= appConfig.dist %>/styles/{,*/}*.css'], 
     js: ['<%= appConfig.dist %>/scripts/{,*/}*.js'], 
     options: { 
     assetsDirs: [ 
      '<%= appConfig.dist %>', 
      '<%= appConfig.dist %>/images', 
      '<%= appConfig.dist %>/styles' 
     ], 
     patterns: { 
      js: [[/(images\/[^''""]*\.(png|jpg|jpeg|gif|webp|svg))/g, 'Replacing references to images']] 
     } 
     } 
    }, 

    // The following *-min tasks will produce minified files in the dist folder 
    // By default, your `index.html`'s <!-- Usemin block --> will take care of 
    // minification. These next options are pre-configured if you do not wish 
    // to use the Usemin blocks. 
    // cssmin: { 
    // dist: { 
    //  files: { 
    //  '<%= appConfig.dist %>/styles/main.css': [ 
    //   '.tmp/styles/{,*/}*.css' 
    //  ] 
    //  } 
    // } 
    // }, 
    // uglify: { 
    // dist: { 
    //  files: { 
    //  '<%= appConfig.dist %>/scripts/scripts.js': [ 
    //   '<%= appConfig.dist %>/scripts/scripts.js' 
    //  ] 
    //  } 
    // } 
    // }, 
    // concat: { 
    // dist: {} 
    // }, 

    imagemin: { 
     dist: { 
     files: [{ 
      expand: true, 
      cwd: '<%= appConfig.app %>/images', 
      src: '{,*/}*.{png,jpg,jpeg,gif}', 
      dest: '<%= appConfig.dist %>/images' 
     }] 
     } 
    }, 

    svgmin: { 
     dist: { 
     files: [{ 
      expand: true, 
      cwd: '<%= appConfig.app %>/images', 
      src: '{,*/}*.svg', 
      dest: '<%= appConfig.dist %>/images' 
     }] 
     } 
    }, 

    htmlmin: { 
     dist: { 
     options: { 
      collapseWhitespace: true, 
      conservativeCollapse: true, 
      collapseBooleanAttributes: true, 
      removeCommentsFromCDATA: true 
     }, 
     files: [{ 
      expand: true, 
      cwd: '<%= appConfig.dist %>', 
      src: ['*.html', 'views/**/*.html'], 
      dest: '<%= appConfig.dist %>' 
     }] 
     } 
    }, 

    ngtemplates: { 
     dist: { 
     options: { 
      module: 'myApp', 
      htmlmin: '<%= htmlmin.dist.options %>', 
      usemin: 'scripts/scripts.js' 
     }, 
     cwd: '<%= appConfig.app %>', 
     src: 'views/{,*/}*.html', 
     dest: '.tmp/templateCache.js' 
     } 
    }, 

    // ng-annotate tries to make the code safe for minification automatically 
    // by using the Angular long form for dependency injection. 
    ngAnnotate: { 
     dist: { 
     files: [{ 
      expand: true, 
      cwd: '.tmp/concat/scripts', 
      src: '*.js', 
      dest: '.tmp/concat/scripts' 
     }] 
     } 
    }, 

    // Replace Google CDN references 
    cdnify: { 
     dist: { 
     html: ['<%= appConfig.dist %>/*.html'] 
     } 
    }, 

    // Copies remaining files to places other tasks can use 
    copy: { 
     dist: { 
     files: [{ 
      expand: true, 
      dot: true, 
      cwd: '<%= appConfig.app %>', 
      dest: '<%= appConfig.dist %>', 
      src: [ 
      '**/*.{ico,png,txt}', 
      '**/*.html', 
      'images/**/*.{webp}', 
      'styles/fonts/{,*/}*.*' 
      ] 
     }, { 
      expand: true, 
      cwd: '.tmp/images', 
      dest: '<%= appConfig.dist %>/images', 
      src: ['generated/*'] 
     }] 
     }, 
     styles: { 
     expand: true, 
     cwd: '<%= appConfig.app %>/styles', 
     dest: '.tmp/styles/', 
     src: '{,*/}*.css' 
     } 
    }, 

    // Run some tasks in parallel to speed up the build process 
    concurrent: { 
     server: [ 
     'compass:server' 
     ], 
     test: [ 
     'compass' 
     ], 
     dist: [ 
     'compass:dist', 
     'imagemin', 
     'svgmin' 
     ] 
    }, 

    // Test settings 
    karma: { 
     unit: { 
     configFile: 'test/karma.conf.js', 
     singleRun: true 
     } 
    } 
    }); 


    grunt.registerTask('serve', 'Compile then start a connect web server', function (target) { 
    if (target === 'dist') { 
     return grunt.task.run(['build', 'connect:dist:keepalive']); 
    } 

    grunt.task.run([ 
     'clean:server', 
     'wiredep', 
     'concurrent:server', 
     'postcss:server', 
     'connect:livereload', 
     'watch' 
    ]); 
    }); 

    grunt.registerTask('server', 'DEPRECATED TASK. Use the "serve" task instead', function (target) { 
    grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); 
    grunt.task.run(['serve:' + target]); 
    }); 

    grunt.registerTask('test', [ 
    'clean:server', 
    'wiredep', 
    'concurrent:test', 
    'postcss', 
    'connect:test', 
    'karma' 
    ]); 

    grunt.registerTask('build', [ 
    'clean:dist', 
    'wiredep', 
    'useminPrepare', 
    'concurrent:dist', 
    'postcss', 
    'ngtemplates', 
    'concat', 
    'ngAnnotate', 
    'copy:dist', 
    'cdnify', 
    'cssmin', 
    'uglify', 
    'filerev', 
    'usemin', 
    'htmlmin' 
    ]); 

    grunt.registerTask('default', [ 
    'newer:jshint', 
    'newer:jscs', 
    'test', 
    'build' 
    ]); 
}; 

!更新2016-03-08!

我能夠通過更改我的某個指令的標記來解決問題!

這是造成了一個問題:

<data-generator flag="centrifuge" /> 

什麼固定它是:

<data-generator flag="centrifuge"></data-generator> 

我會放在一起演示了一個微小的樣本項目。

+0

你還沒有給我們從遠程服務器上的任何日誌或錯誤消息。 –

+0

實際上沒有錯誤!我在本地和Web服務器上檢查了日誌,沒有任何顯示。這就是讓我困惑的原因。 –

+0

我的觀點是我們無法用您提供給我們的信息重現任何這種情況。 –

回答

1

簡單地從一個自定義指令完全關閉標籤更改做了這項工作。

我改變:

<data-generator flag="centrifuge" /> 

要:

<data-generator flag="centrifuge"></data-generator> 
+1

https://github.com/angular/angular.js/issues/1953 –