Question

所以我很咕噜咕噜，所以我仍然想要了解一些事情。但我想要做的是为grunt设置“开发”和“生产”配置。我想我已经完成了任务配置的东西，但我有一个特定的要求，我希望你们可以帮我解决。

在我的开发环境中，我希望grunt将javascript和css从源文件夹（从以前的任务中构建的较少的css）复制到我的build / public / js文件夹中，然后自动编写html脚本/链接标记对于每个文件，它都复制到HTML中（我可以使用usemin或useref，但是一些供应商javascripts有10个以上的javascript源，因此自动化html写操作会更好）。

在生产环境中，我希望grunt将javascript和css作为单个文件缩小到我的公共文件夹中，然后为每个编译的脚本编写html标记，而不是每个源文件写一个。

因此，结果将是单个css文件，单个供应商js文件和生产版本中的单个“myapp”js文件，版本号或随机文件名分配用于缓存清除，并且只加载原始js源开发构建中的文件。

有人可以就此提供任何指示，我找到了一些可以做我需要的点点滴滴的插件，但我无法弄清楚如何将它们串在一起（我知道我需要grunt-contrib-copy for开发版，但我需要编写复制到html的每个文件等）

注意：即使它与js供应商包使用bower，如果它有任何区别

Answer 1

我正在研究相同的解决方案，并且发现以下工具运气良好：

<强> grunt-contrib-concat 这可以将文件从一个位置连接到另一个位置的单个文件中。您可以指定如下特定文件：

       files: {
         'dist/app.concat.js': ['app/modules/nav.js', 'app/modules/user.js']
       }

或者您可以使用globbing语法来选择多个（甚至也可以排除）：

    files: {
      'dist/app.concat.js': [
                             'app/**/*.js',
                             '!app/vendor/**/*.js'
                            ] // this excludes anything from the vendor folder being added
    }

这是一个完整的例子

concat: {
  dist: { // task name, so you call this with 'grunt concat:dist'. You can have different sections under concat for different builds
    files: {
      'dist/app.concat.js': ['app/**/*.js',
                             '!app/vendor/**/*.js',
                             '!app/test/**/*.js'
                            ], // adds all .js files, but excludes anything in vendor and test
      'dist/vendor.concat.js': ['app/vendor/**/*.js'],
      'dist/app.concat.css': ['app/styles/**/*.css']
  }
}

<强> grunt-contrib-copy 这是一个简单的，可以让你从一个地方复制到另一个地方。如果要在（src: [app/**/*.*]）

上提取整个目录结构，也可以使用globbing

copy: {
  dist: {
    files: [
      {
        src: ['app/index.html'],
        dest: 'dist/'
  }
}

<强> grunt-scriptlinker

这将帮助您通过引用正确的文件动态填写index.html（或其他）。它的用法很简单：你向index.html（或其他）添加一些HTML注释，并告诉scriptlinker查找它们。然后，它将搜索您指向的任何文件集，并在您提供的脚本标记内动态添加对这些文件的引用。我用它来加载顶部的CSS文件，然后是底部的.js文件：

scriptlinker: {
  distCSS: {
    options: {
      startTag: '<!--CSS SCRIPTS-->',
      endTag: '<!--CSS SCRIPTS END-->',
      fileTmpl: '\n<link rel="stylesheet" type="text/css" href="%s" />',
      appRoot: 'app/'
    },
    files: {
      'dev/app/index.html': ['dist/**/*.css']
    }
  },
  distJS: {
    options: {
      startTag: '<!--JS SCRIPTS-->',
      endTag: '<!--JS SCRIPTS END-->',
      fileTmpl: '\n<script src="%s"></script>',
      appRoot: 'app/'
    },
    files: {
      'dev/app/index.html': ['dist/vendor/*.js']
    },
  }
}

所以你可以看到，你用它来查找要查找的标签，要使用的模板以及要查看的文件或目录。它会变成这样：

<html ng-app="ngAD">
  <head>
    <!--CSS SCRIPTS--><!--CSS SCRIPTS END-->
  </head>

  <body>
    <div class="container">... my app stuff...</div>

    <!--JS SCRIPTS--><!--JS SCRIPTS END-->
  </body>
</html>

进入这个：

    <html ng-app="ngAD">
  <head>
    <!--CSS SCRIPTS-->
      <link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css" />
      <link rel="stylesheet" type="text/css" href="modules/navbar/navbar.css" />
      <link rel="stylesheet" type="text/css" href="styles/jscrollpane.css" />
      <link rel="stylesheet" type="text/css" href="styles/styles.app.css" /><!--CSS SCRIPTS END-->
  </head>

  <body>
    <div class="container">... my app stuff...</div>

    <!--JS SCRIPTS-->
       <script src="vendor/jquery.min.js"></script>
       <script src="vendor/angular.min.js"></script>
       <script src="vendor/vendor.concat.js"></script>
       <script src="common/common.dist.js"></script>
       <script src="modules/modules.dist.js"><!--JS SCRIPTS END-->
  </body>
</html>

为了完整起见，我还会指向grunt-usemin ...它很受欢迎，并且与scriptLinker具有相似的功能......你可能会更喜欢它。我仍在使用cachebusting设置，但我正在使用cacheBust（grunt-cache-bust），到目前为止它似乎正在做我想要的。如果您有任何具体问题，请告诉我，我可以提供更具体的反馈。

Grunt环境和编写HTML

1 个答案: