0

所以我很新的咕噜声，所以我仍在试图弄清楚一些事情。但我想做的是为 grunt 设置“开发”和“生产”配置。我想我已经制定了任务配置的东西，但是我有一个特定的要求，我希望你们能帮助我解决。

在我的开发环境中，我希望 grunt 将源文件夹中的 javascript 和 css 复制到我的 build/public/js 文件夹中，然后自动为每个文件编写一个 html 脚本/链接标签它复制到 HTML 中（我可以使用 usemin 或 useref，但一些供应商的 javascript 有 10 多个 javascript 源，因此自动化 html 写入操作会更好）。

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

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

有人可以提供任何指导吗，我发现了一些插件可以完成我需要的部分，但我不知道如何将它们串在一起（我知道我需要开发版本的 grunt-contrib-copy ，但我需要写每个文件复制到 html 等）

注意：如果有任何区别，我将使用 bower 来获取 js 供应商包

4

1 回答 1

1

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

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

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

或者您可以使用通配符语法来选择多个（甚至排除），如下所示：

    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/**/*.*])

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

grunt-scriptlinker

这是一个可以帮助您动态填写 index.html（或其他）并引用正确文件的方法。它的用法非常简单：您将一些 HTML 注释添加到您的 index.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)，到目前为止，它似乎正在做我想做的事情。如果您有任何具体问题，请告诉我，我也许可以提供更具体的反馈。

于 2014-01-22T19:04:46.060 回答