Question

我第一次使用Grunt。其他人已经设置/配置了Gruntfile.js配置文件。虽然它有效，但我发现令人难以置信的烦恼是我的所有js文件都被缩减为一个带有地图文件的app.min.js文件。

所以即使这样可行，当我收到错误或错误时，也无法知道哪个源文件导致了JS错误。

有没有办法配置Grunt不将所有内容压缩到单个文件中，而是将所有内容保留为单独的包含？我喜欢只需要在我的HTML中包含一个JS的能力。

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    jsFilesApis: [
        'client/vendors/apis/jquery-1.11.0.min.js',
        'client/vendors/apis/bootstrap.min.js',
        'client/vendors/apis/angular.1.2.16.min.js',
        .....
        ],
    jsFilesApp: [
        'client/app/**/*.js'
    ],


    'angular-injector': {
        test: {
            expand: true,       // required
            token: 'ng',        // optional
            src: '<%= jsFilesApp %>',
            dest: 'build/'
        }
    },

    uglify: {
        dist: {
            files: {
                "build/app.min.js": '<%= jsFilesApp %>',
                "build/apis.min.js": '<%= jsFilesApis %>'
            },
            options: {
                mangle: false,
                compress: false,
                sourceMap: true
            }
        },
    },
});

我的HTML是：

<html ng-app='app'>
<head>
    <script type="text/javascript" src="./build/apis.min.js"></script>
    <script type="text/javascript" src="./build/app.min.js"></script>
</head>
...

如何配置Grunt，以便我可以单独包含所有JS文件，以便能够在浏览器中正确查看/调试它们？

Answer 1

对于初学者来说，没有办法只包含一个包含所有javascript的脚本标记，同时在源代码中将它们分开。我不知道一个咕噜的插件或其他会将你的javascripts连成一个脚本但允许你在浏览器中单独看到它们（la sprockets）。

但是，我所拥有的是一个非缩小的脚本（在开发中），我可以看一下。它不会立即向您显示它来自哪个库或文件，但您至少可以看到代码。

我拥有的是（使用grunt-contrib-concat）

concat: {
        'build/<%= pkg.name %>.js': ['build/vendor.js', 'build/app.js', 'build/templates.js']
    },

对你来说就像是

concat: {
     "build/app.js": '<%= jsFilesApp %>',
     "build/apis.js": '<%= jsFilesApis %>'
},

然后在你的HTML中加入这两个。您还希望在开发版本中指定不进行uglify。对我来说，这看起来像

grunt.registerTask('build:dev', ['clean:dev', 'browserify:app', 'browserify:test', 'emberTemplates', 'jshint:dev', 'less:transpile', 'concat', 'copy:dev']);

所以对你来说就是

grunt.registerTask('build:dev', ['angular-injector', 'concat']);
grunt.registerTask('build:prod', ['angular-injector', 'concat', 'uglify']);

Answer 2

@JakeDluhy给了我一个很好的建议，并指出了正确的方向。我最终使用grunt-injector结合bower / wiredep来获得我需要的东西。最后一招是使用yeoman生成一个支架AngularJS文件，并从生成的Gruntfile.js中窃取想法。

现在我的index.html中有以下内容：

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- build:js(client/) scripts/apis.js -->
<!-- api injector:js -->
<script src="vendors/apis/http-auth-interceptor.js"></script>
<script src="vendors/apis/ng-tags-input.js"></script>
<!-- endinjector -->
<!-- endbuild -->

<!-- build:js(client/) scripts/app.js -->
<!-- app injector:js -->
<script src="app/app.js"></script>
<script src="app/breadcrumb/breadcrumbController.js"></script>
<!-- endinjector -->
<!-- endbuild -->

我的Gruntfile.js：

// Automatically inject Bower components into the app
wiredep: {
  options: {
    cwd: '<%= yeoman.app %>'
  },
  app: {
    src: ['<%= yeoman.app %>/index.html'],
    ignorePath:  /\.\.\//
  },

// Automatically inject app JS files into the app
injector:{
    app:{
        options:{
            starttag: '<!-- app injector:{{ext}} -->',
            ignorePath: 'client/',
            addRootSlash: false
        },
        files:{
            '<%= yeoman.app %>/index.html' : ['<%= yeoman.app %>/app/**/*.js']
        }
    },

    api:{
        options: {
            starttag: '<!-- api injector:{{ext}} -->',
            ignorePath: 'client/',
            addRootSlash: false
        },
        files:{
            '<%= yeoman.app %>/index.html' : ['<%= yeoman.app %>/vendors/**/*.js']
        }
    }

希望这可以帮助将来的某个人。

如何使用Grunt而不将所有内容压缩到一个文件中

2 个答案: