如何使用 grunt http 服务器 (grunt-contrib-connect) 访问语言环境 json 文件

Question

我正在尝试使用 AngularJS 和 $resource.

访问解析语言环境 json 文件

这是我加载文件的调用：

angular.module('moneyJinnApp').service('TranslationService', function($resource) {
    this.getTranslation = function($scope, language) {
        var languageFilePath = '/js/i18n/lang_' + language + '.json';
        $resource(languageFilePath).get(function (data) {
            $scope.translation = data;
        });
    };
});

现在我遇到了问题，内置的 grunt 网络服务器不允许我访问该文件。如果我尝试我得到错误

Cannot GET /i18n/lang_en.json

这是我的 Guntfile.js:

// Generated on 2015-01-21 using generator-angular 0.9.2
    '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) {

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

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

      // 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
        yeoman: appConfig,

        // Watches files for changes and runs tasks based on the changed files
        watch: {
          bower: {
            files: ['bower.json'],
            tasks: ['wiredep']
          },
          js: {
            files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
            tasks: ['newer:jshint:all'],
            options: {
              livereload: '<%= connect.options.livereload %>'
            }
          },
          jsTest: {
            files: ['test/spec/{,*/}*.js'],
            tasks: ['newer:jshint:test', 'karma']
          },
          styles: {
            files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
            tasks: ['newer:copy:styles', 'autoprefixer']
          },
          gruntfile: {
            files: ['Gruntfile.js']
          },
          livereload: {
            options: {
              livereload: '<%= connect.options.livereload %>'
            },
            files: [
              '<%= yeoman.app %>/{,*/}*.html',
              '.tmp/styles/{,*/}*.css',
              '<%= yeoman.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: 'localhost',
            livereload: 35729
          },
          livereload: {
            options: {
              open: true,
              middleware: function (connect) {
                return [
                  connect.static('.tmp'),
                  connect().use(
                    '/bower_components',
                    connect.static('./bower_components')
                  ),
                  connect.static(appConfig.app)
                ];
              }
            }
          },
          test: {
            options: {
              port: 9001,
              middleware: function (connect) {
                return [
                  connect.static('.tmp'),
                  connect.static('test'),
                  connect().use(
                    '/bower_components',
                    connect.static('./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: '.jshintrc',
            reporter: require('jshint-stylish')
          },
          all: {
            src: [
              'Gruntfile.js',
              '<%= yeoman.app %>/scripts/{,*/}*.js'
            ]
          },
          test: {
            options: {
              jshintrc: 'test/.jshintrc'
            },
            src: ['test/spec/{,*/}*.js']
          }
        },

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

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

        // Automatically inject Bower components into the app
    /*    wiredep: {
          options: {
            cwd: '<%= yeoman.app %>'
          },
          app: {
            src: ['<%= yeoman.app %>/index.html'],
            ignorePath:  /\.\.\//
          }
        },
    */
        // Renames files for browser caching purposes
        filerev: {
          dist: {
            src: [
              '<%= yeoman.dist %>/scripts/{,*/}*.js',
              '<%= yeoman.dist %>/styles/{,*/}*.css',
              '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
              '<%= yeoman.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: '<%= yeoman.app %>/index.html',
          options: {
            dest: '<%= yeoman.dist %>',
            flow: {
              html: {
                steps: {
                  js: ['concat', 'uglifyjs'],
                  css: ['cssmin']
                },
                post: {}
              }
            }
          }
        },

        // Performs rewrites based on filerev and the useminPrepare configuration
        usemin: {
          html: ['<%= yeoman.dist %>/{,*/}*.html'],
          css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
          options: {
            assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/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: [{
              expand: true,
              cwd: '<%= yeoman.dist %>',
              src: 'styles/*.css',
              dest: '<%= yeoman.dist %>'
            }]
          }
        },
        uglify: {
          build: {
            files: [{
                expand: true,
                src: '**/*.js',
                dest: '<%= yeoman.dist %>/scripts',
                cwd: '<%= yeoman.app %>/scripts'
            }]
          },
          options: {
            mangle:false
          },
        },
        // concat: {
        //   dist: {}
        // },

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

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

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

        // ngAnnotate tries to make the code safe for minification automatically by
        // using the Angular long form for dependency injection. It doesn't work on
        // things like resolve or inject so those have to be done manually.
        ngAnnotate: {
          dist: {
            files: [{
              expand: true,
             cwd: '<%= yeoman.app %>/scripts',
              src: '**/*.js',
             dest: '<%= yeoman.dist %>/scripts',
            }]
          }
        },

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

        // Copies remaining files to places other tasks can use
        copy: {
          dist: {
            files: [{
              expand: true,
              dot: true,
              cwd: '<%= yeoman.app %>',
              dest: '<%= yeoman.dist %>',
              src: [ '**']
            },{

              expand:true,
              cwd:'bower_components',
              dest:'<%= yeoman.dist %>/bower_components',
              src:['**']
            } ,

            {
              expand: true,
              cwd: '.tmp/images',
              dest: '<%= yeoman.dist %>/images',
              src: ['generated/*']
            }, {
              expand: true,
              cwd: 'bower_components/bootstrap/dist',
              src: 'fonts/*',
              dest: '<%= yeoman.dist %>'
            }]
          },
          styles: {
            expand: true,
            cwd: '<%= yeoman.app %>/styles',
            dest: '.tmp/styles/',
            src: '{,*/}*.css'
          }
        },

        // Run some tasks in parallel to speed up the build process
        concurrent: {
          server: [
            'copy:styles'
          ],
          test: [
            'copy:styles'
          ],
          dist: [
            'copy:styles',
            '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',
          'concurrent:server',
          'autoprefixer',
          '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',
        'concurrent:test',
        'autoprefixer',
        'connect:test',
        'karma'
      ]);

      grunt.registerTask('build', [
        'clean:dist',
        'concurrent:dist',
        'copy:dist',
        'cssmin',
        'ngAnnotate',
        'uglify',
        'htmlmin'
      ]);

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

.json 文件在路径 /app/i18n/*.json

有人可以帮我解决这个问题吗？

Answer 1

这是因为 Grunt 加载的网络服务器不提供 sed 文件。我会做这样的事情：

在你的 grunt 配置中：

 livereload: {
        options: {
          open: true,
          middleware: function (connect) {
            return [
              connect.static('data'), // <---- add this line
              connect.static('.tmp'),
              connect().use(
                '/bower_components',
                connect.static('./bower_components')
              ),
              connect.static(appConfig.app)
            ];
          }
        }
      },

然后将您的数据放在应用程序目录外的数据文件夹中，它将在应用程序加载时提供。

然后上网测试一下：localhost:<port>/data/<file>.json

之后将 url 更改为：

    var languageFilePath = 'data/i18n/lang_' + language + '.json';

如何使用 grunt http 服务器 (grunt-contrib-connect) 访问语言环境 json 文件

How to access locale json files with grunt http server (grunt-contrib-connect)

javascript

json

angularjs

grunt-contrib-connect