2014-10-10 88 views
6

好吧我在gitHub上的Angular-Fullstack的問題列表上發佈這個問題,所以你可以在那裏查看它是否有任何額外的帖子不在這裏。 git hub questionAngular-Fullstack-grunt build不包括javascript文件

基本上我獲得在控制檯下面的輸出:

GET http://localhost:8080/assets/images/loading.gif 404 (Not Found) (index):60 
GET http://localhost:8080/app/assignment-meeting/prepare-senior/candidate/profile/_profile-ctrl.js (index):102 
GET http://localhost:8080/app/assignment-meeting/prepare-senior/candidate-list/candidates-list-controller.js (index):100 
GET http://localhost:8080/app/assignment-meeting/prepare-senior/candidate/_candidate-ctrl.js (index):101 
GET http://localhost:8080/app/assignment-meeting/prepare-senior/candidate/summary/_summary-ctrl.js (index):103 
GET http://localhost:8080/app/home/home-controller.js (index):104 
GET http://localhost:8080/components/services/candidate-services.js (index):109 
GET http://localhost:8080/components/auth/User.js (index):106 
GET http://localhost:8080/app/routes.js (index):105 
GET http://localhost:8080/components/directives/napi-ck-editor.js (index):108 
GET http://localhost:8080/components/auth/user-service.js (index):107 
GET http://localhost:8080/components/services/http-helper.js (index):110 
GET http://localhost:8080/components/services/menu-services.js 404 (Not Found) 

好像咕嚕構建找不到位於我的index.html頁面的注射器部分中我的腳本文件。如果我重新複製最初創建的index.html文件,生成器生成並複製「Google Analytics」部分上方的所有代碼,那麼它將正常工作。我不明白爲什麼它不起作用,因爲它似乎沒有顯示代碼中存在任何實際差異。該頁面不顯示一條線是不同的。我認爲唯一可能導致問題的是當我將它提交給git然後出現問題時,行結束可能會發生變化。說實話,我在這個黑暗中。我將這個問題發佈在幾個不同的表單上,所以我厭倦了重新輸入它......所以如果你想閱讀我的git hub帖子(上面的鏈接),可能會更好措辭。

感謝您的幫助。

更新:「構建」

對不起,我應該附上我的呼嚕聲文件,以便它可以被讀取,並指出,有一個名爲grunt.registerTask我不重視它,因爲我還沒有真正從默認的通過角fullstack做出改變了它,並計算等可以簡單地查看作爲參考......但安裝更簡單,更好:

'use strict'; 

module.exports = function (grunt) { 

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

    // Load grunt tasks automatically, when needed 
    require('jit-grunt')(grunt, { 
     useminPrepare: 'grunt-usemin', 
     ngtemplates: 'grunt-angular-templates', 
     cdnify: 'grunt-google-cdn', 
     protractor: 'grunt-protractor-runner', 
     injector: 'grunt-asset-injector' 
    }); 

// require('load-grunt-tasks')(grunt); 

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

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

     // Project settings 
     pkg: grunt.file.readJSON('package.json'), 
     yeoman: { 
      // configurable paths 
      client: require('./bower.json').appPath || 'client', 
      dist: 'src/main/webapp' 
     }, 
     watch: { 
      bower: { 
       files: ['bower.json'], 
       tasks: ['wiredep'] 
      }, 
      injectJS: { 
       files: [ 
        '<%= yeoman.client %>/{app,components}/**/*.js', 
        '!<%= yeoman.client %>/{app,components}/**/*.spec.js', 
        '!<%= yeoman.client %>/{app,components}/**/*.mock.js', 
        '!<%= yeoman.client %>/app/app.js'], 
       tasks: ['injector:scripts'] 
      }, 
      injectCss: { 
       files: [ 
        '<%= yeoman.client %>/{app,components}/**/*.css' 
       ], 
       tasks: ['injector:css'] 
      }, 
      jsTest: { 
       files: [ 
        '<%= yeoman.client %>/{app,components}/**/*.spec.js', 
        '<%= yeoman.client %>/{app,components}/**/*.mock.js' 
       ], 
       tasks: ['newer:jshint:all', 'karma'] 
      }, 
      injectSass: { 
       files: [ 
        '<%= yeoman.client %>/{app,components}/**/*.{scss,sass}'], 
       tasks: ['injector:sass'] 
      }, 
      sass: { 
       files: [ 
        '<%= yeoman.client %>/{app,components}/**/*.{scss,sass}'], 
       tasks: ['sass', 'autoprefixer'] 
      }, 
      gruntfile: { 
       files: ['Gruntfile.js'] 
      }, 
      livereload: { 
       files: [ 
        '{.tmp,<%= yeoman.client %>}/{app,components}/**/*.css', 
        '{.tmp,<%= yeoman.client %>}/{app,components}/**/*.html', 
        '{.tmp,<%= yeoman.client %>}/{app,components}/**/*.js', 
        '!{.tmp,<%= yeoman.client %>}{app,components}/**/*.spec.js', 
        '!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.mock.js', 
        '<%= yeoman.client %>/assets/images/{,*//*}*.{png,jpg,jpeg,gif,webp,svg}' 
       ], 
       options: { 
        livereload: true 
       } 
      } 
     }, 

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

     // Make sure code styles are up to par and there are no obvious mistakes 
     jshint: { 
      options: { 
       jshintrc: '<%= yeoman.client %>/.jshintrc', 
       reporter: require('jshint-stylish') 
      }, 
      all: [ 
       '<%= yeoman.client %>/{app,components}/**/*.js', 
       '!<%= yeoman.client %>/{app,components}/**/*.spec.js', 
       '!<%= yeoman.client %>/{app,components}/**/*.mock.js' 
      ], 
      test: { 
       src: [ 
        '<%= yeoman.client %>/{app,components}/**/*.spec.js', 
        '<%= yeoman.client %>/{app,components}/**/*.mock.js' 
       ] 
      } 
     }, 

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

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


     // Automatically inject Bower components into the app 
     wiredep: { 
      target: { 
       src: '<%= yeoman.client %>/index.html', 
       ignorePath: '<%= yeoman.client %>/', 
       exclude: [/bootstrap-sass-official/, /bootstrap.js/, '/json3/', '/es5-shim/', /bootstrap.css/, /font-awesome.css/ ] 
      } 
     }, 

     // Renames files for browser caching purposes 
     rev: { 
      dist: { 
       files: { 
        src: [ 
         '<%= yeoman.dist %>/public/{,*/}*.js', 
         '<%= yeoman.dist %>/public/{,*/}*.css', 
         '<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', 
         '<%= yeoman.dist %>/public/assets/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: ['<%= yeoman.client %>/index.html'], 
      options: { 
       dest: '<%= yeoman.dist %>/public', 
       flow: { 
        html: { 
         steps: { 
          js: ['concat', 'uglifyjs'], 
          css: ['cssmin'] 
         }, 
         post: {} 
        } 
       } 
      } 
     }, 
     cssmin: { 
      options: { 
       root: 'client' 
      } 
     }, 
     // Performs rewrites based on rev and the useminPrepare configuration 
     usemin: { 
      html: ['<%= yeoman.dist %>/public/{,*/}*.html'], 
      css: ['<%= yeoman.dist %>/public/{,*/}*.css'], 
      js: ['<%= yeoman.dist %>/public/{,*/}*.js'], 
      options: { 
       assetsDirs: [ 
        '<%= yeoman.dist %>/public', 
        '<%= yeoman.dist %>/public/assets/images' 
       ], 
       // This is so we update image references in our ng-templates 
       patterns: { 
        js: [ 
         [/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images'] 
        ] 
       } 
      } 
     }, 

     // The following *-min tasks produce minified files in the dist folder 
     imagemin: { 
      dist: { 
       files: [{ 
        expand: true, 
        cwd: '<%= yeoman.client %>/assets/images', 
        src: '{,*/}*.{png,jpg,jpeg,gif}', 
        dest: '<%= yeoman.dist %>/public/assets/images' 
       }] 
      } 
     }, 

//  htmlmin: { 
//   dist: { 
//    options: { 
//     collapseWhitespace: true, 
//     conservativeCollapse: true, 
//     collapseBooleanAttributes: true, 
//     removeCommentsFromCDATA: true, 
//     removeOptionalTags: true 
//    }, 
//    files: [{ 
//     expand: true, 
//     cwd: '<%= yeoman.dist %>', 
//     src: ['*.html', 'app/**/*.html'], 
//     dest: '<%= yeoman.dist %>' 
//    }] 
//   } 
//  }, 
//  uglify: { 
//   dist: { 
//    files: { 
//    '<%= yeoman.dist %>/scripts/scripts.js': [ 
//     '<%= yeoman.dist %>/scripts/scripts.js' 
//    ] 
//    } 
//   } 
//  }, 

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

     // Allow the use of non-minsafe AngularJS files. Automatically makes it 
     // minsafe compatible so Uglify does not destroy the ng references 
     ngAnnotate: { 
      dist: { 
       files: [{ 
        expand: true, 
        cwd: '.tmp/concat', 
        src: '*/**.js', 
        dest: '.tmp/concat' 
       }] 
      } 
     }, 

     // Package all the html partials into a single javascript payload 
     ngtemplates: { 
      options: { 
       // This should be the name of your apps angular module 
       module: 'napiRest', 
       htmlmin: { 
        collapseBooleanAttributes: true, 
        collapseWhitespace: true, 
        removeAttributeQuotes: true, 
        removeEmptyAttributes: true, 
        removeRedundantAttributes: true, 
        removeScriptTypeAttributes: true, 
        removeStyleLinkTypeAttributes: true 
       }, 
       usemin: 'app/app.js' 
      }, 
      main: { 
       cwd: '<%= yeoman.client %>', 
       src: ['{app,components}/**/*.html'], 
       dest: '.tmp/templates.js' 
      }, 
      tmp: { 
       cwd: '.tmp', 
       src: ['{app,components}/**/*.html'], 
       dest: '.tmp/tmp-templates.js' 
      } 
     }, 

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

     // Copies remaining files to places other tasks can use 
     copy: { 
      dist: { 
       files: [{ 
        expand: true, 
        dot: true, 
        cwd: '<%= yeoman.client %>', 
        dest: '<%= yeoman.dist %>/public', 
        src: [ 
         '*.{ico,png,txt}', 
         '.htaccess', 
         'bower_components/**/*', 
         'assets/images/{,*/}*.{webp}', 
         'assets/fonts/**/*', 
         'index.html' 
        ] 
       }, { 
        expand: true, 
        cwd: '.tmp/images', 
        dest: '<%= yeoman.dist %>/public/assets/images', 
        src: ['generated/*'] 
       }, { 
        expand: true, 
        dest: '<%= yeoman.dist %>', 
        src: [ 
         'package.json' 
        ] 
       }] 
      }, 
      styles: { 
       expand: true, 
       cwd: '<%= yeoman.client %>', 
       dest: '.tmp/', 
       src: ['{app,components}/**/*.css'] 
      } 
     }, 

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

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

     mochaTest: { 
      options: { 
       reporter: 'spec' 
      }, 
      src: ['server/**/*.spec.js'] 
     }, 

     protractor: { 
      options: { 
       configFile: 'protractor.conf.js' 
      }, 
      chrome: { 
       options: { 
        args: { 
         browser: 'chrome' 
        } 
       } 
      } 
     }, 


     // Compiles Sass to CSS 
     sass: { 
      server: { 
       options: { 
        loadPath: [ 
         '<%= yeoman.client %>/bower_components', 
         '<%= yeoman.client %>/app', 
         '<%= yeoman.client %>/components' 
        ], 
        compass: false 
       }, 
       files: { 
        '.tmp/app/app.css' : '<%= yeoman.client %>/app/app.scss' 
       } 
      } 
     }, 

     injector: { 
      options: { 

      }, 
      // Inject application script files into index.html (doesn't include bower) 
      scripts: { 
       options: { 
        transform: function(filePath) { 
         filePath = filePath.replace('/client/', ''); 
         filePath = filePath.replace('/.tmp/', ''); 
         return '<script src="' + filePath + '"></script>'; 
        }, 
        starttag: '<!-- injector:js -->', 
        endtag: '<!-- endinjector -->' 
       }, 
       files: { 
        '<%= yeoman.client %>/index.html': [ 
         ['{.tmp,<%= yeoman.client %>}/{app,components}/**/*.js', 
          '!{.tmp,<%= yeoman.client %>}/app/app.js', 
          '!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.spec.js', 
          '!{.tmp,<%= yeoman.client %>}/{app,components}/**/*.mock.js'] 
        ] 
       } 
      }, 

      // Inject component scss into app.scss 
      sass: { 
       options: { 
        transform: function(filePath) { 
         filePath = filePath.replace('/client/app/', ''); 
         filePath = filePath.replace('/client/components/', ''); 
         return '@import \'' + filePath + '\';'; 
        }, 
        starttag: '// injector', 
        endtag: '// endinjector' 
       }, 
       files: { 
        '<%= yeoman.client %>/app/app.scss': [ 
         '<%= yeoman.client %>/{app,components}/**/*.{scss,sass}', 
         '!<%= yeoman.client %>/app/app.{scss,sass}' 
        ] 
       } 
      }, 

      // Inject component css into index.html 
      css: { 
       options: { 
        transform: function(filePath) { 
         filePath = filePath.replace('/client/', ''); 
         filePath = filePath.replace('/.tmp/', ''); 
         return '<link rel="stylesheet" href="' + filePath + '">'; 
        }, 
        starttag: '<!-- injector:css -->', 
        endtag: '<!-- endinjector -->' 
       }, 
       files: { 
        '<%= yeoman.client %>/index.html': [ 
         '<%= yeoman.client %>/{app,components}/**/*.css' 
        ] 
       } 
      } 
     } 
    }); 

    // Used for delaying livereload until after server has restarted 
    grunt.registerTask('wait', function() { 
     grunt.log.ok('Waiting for server reload...'); 

     var done = this.async(); 

     setTimeout(function() { 
      grunt.log.writeln('Done waiting!'); 
      done(); 
     }, 3000); 
    }); 


    grunt.registerTask('serve', function (target) { 
     if (target === 'dist') { 
      return grunt.task.run(['build', 'wait', 'connect:dist:keepalive']); 
     } 

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

    grunt.registerTask('server', function() { 
     grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); 
     grunt.task.run(['serve']); 
    }); 

    grunt.registerTask('test', function(target) { 
     if (target === 'client') { 
      return grunt.task.run([ 
       'clean:server', 
       'injector:sass', 
       'concurrent:test', 
       'injector', 
       'autoprefixer', 
       'karma' 
      ]); 
     } 

     else if (target === 'e2e') { 
      return grunt.task.run([ 
       'clean:server', 
       'injector:sass', 
       'concurrent:test', 
       'injector', 
       'wiredep', 
       'autoprefixer', 
       'connect:test', 
       'protractor' 
      ]); 
     } 

     else grunt.task.run([ 
       'test:client' 
      ]); 
    }); 

    grunt.registerTask('build', [ 
     'clean:dist', 
     'injector:sass', 
     'concurrent:dist', 
     'injector', 
     'wiredep', 
     'useminPrepare', 
     'autoprefixer', 
     'ngtemplates', 
     'concat', 
     'ngAnnotate', 
     'copy:dist', 
     'cdnify', 
     'cssmin', 
     'uglify', 
     'rev', 
     'usemin' 
    ]); 

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

我有類似的問題。 你能確認你的public/index.html是否擁有所有的腳本和樣式表文件? 如果我從client/index.html刪除注射器標記,那麼它工作正常。 – vinesh 2014-10-24 06:05:51

+0

@vinesh因此,您只需從索引頁中刪除'<! - injector:js - >'標籤,然後它就可以正常工作?你是否手動將你創建的任何新的js文件插入你的索引頁面? 目前腳本和樣式表注入正確,並使用'grunt serve'命令查找工作。這是當我使用'grunt build'命令發生問題時。 我不是100%,如果這回答了你的問題。 – QuietOmen 2014-10-24 16:41:47

+0

'grunt serve'也適合我。所以我不需要在索引頁面中手動插入新文件。它的'grunt build'在'client/index.html'中沒有像'<! - injector:js - >'標籤一樣運行。我問過你生成的索引文件是否包含原始索引頁面中的所有腳本?你可以參考我的評論在https://github.com/DaftMonk/generator-angular-fullstack/issues/370 – vinesh 2014-10-24 21:39:40

回答

0

可能是因爲 '打造' 不是內部Gruntfile.js

註冊的任務註冊的任務是: 凹凸,舞臺,generateDemo,releaseDemoBuild,updateFixtures,installFixtures,測試,演示,releaseDemo

我想你也許想releaseDemoBuild?

grunt releaseDemoBuild

+0

看看我剛​​剛發佈的更新。 Gruntfile.js有一個由生成器創建的註冊任務。所以它應該工作,並且通常會這樣,直到這個奇怪的錯誤彈出來......似乎沒有任何推理。 – QuietOmen 2014-10-10 05:40:49

4

我在這裏遇到了xactly同樣的問題。 經過文件比較後的小時之後。 我終於解決了。所以我想我會分享一下爲我工作的東西。

我正在使用windows,並且在我的文本編輯器(我正在使用崇高文本)中簡單地將換行結尾爲「index.html」的Unix樣式的行解決了問題。 「Windows」行結尾使得腳本看起來像是bug。

希望這會有所幫助。

Meg4mi

+0

謝謝我解釋了這一點,但我很好奇你是否找到一種方法讓所有用戶都能以Unix格式結束這一行?我的意思是我不想告訴每個人去改變編輯器中的結尾。我有這個在我的.editorconfig文件,但它似乎並沒有工作: 'end_of_line = lf' – QuietOmen 2014-11-11 20:37:54

+0

非常感謝!這對我有效。我如何轉換行結束符:http://stackoverflow.com/questions/11899843/fixing-sublime-text-2-line-endings – acidRain 2015-04-23 04:51:04

+0

謝謝!謝謝!謝謝! – user1828780 2015-10-07 03:57:32

3

這是因爲grunt-injector線結束。請參閱this issue

爲了避免這種情況,你可以配置咕嚕噴油器的默認咕嚕行結束工作:

injector: { 
    options: { 
     lineEnding: grunt.util.linefeed 
    }, 
    ... 
} 

這樣做,你將必須配置使用Git的行結束在您在不同的平臺上工作的情況下設置。假設你在Windows上並從Linux中取出一個文件,你將在注入過程之後獲得一個混合的LF和CR/LF文件(所有HTML文件中的LF和<!-- injector:js -->標籤中的CR/LF),而grunt-build插件不會工作。

您可以使用this Sublime Text插件在您的文件中查看行尾。

+0

並確保它的更新版本的grunt-asset-injector作爲lineEnding選項在新版本中添加,而不是由angular-fullstack for OpenShift發佈的版本。 – 2015-03-15 18:32:43