如何在不将所有内容压缩到单个文件的情况下使用Grunt

debugcn 发表于 Dev

埃里克·B。

我第一次使用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文件，以便能够在浏览器中对其进行适当的查看/调试？

埃里克·B。

@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']
        }
    }

希望这可以在将来对某人有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。