13

我的代码可以轻松快速地编写/测试代码，该代码不属于我的生产代码（主要是模拟服务器，所以我只需要 grunt 服务器）。

两部分，一个是如何删除脚本的一部分

angular.module('nglaborcallApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'server_mocks',  // Don't want this line in the production build
'dialogs'

]

然后是需要删除的 index.html 部分

<!-- build:js({.tmp,app}) scripts/mocks/mocks.js -->
<script type='text/javascript'>var Mocks = {};</script>
<script src='scripts/mocks/jobs.js'></script>
<script src='scripts/mock.js'></script>
<!-- endbuild -->

所以这可能是2个问题。我在 usemin 文档中没有看到任何关于此的内容，所以我猜测还有其他工具，但我不知道该工具的名称是什么。

另一种可能性是我做错了，而不是注入这个模拟对象，我应该用 grunt 服务器来做。其他人都在做什么？

4

3 回答 3

26

好的，所以在寻找其他东西时偶然发现了答案，因为还没有人回应。这是我解决它的方法：

你会得到一份Grunt Preprocess的副本

npm install --save-dev grunt-preprocess

然后你修改你的GruntFile.js喜欢（这是一个角度项目，YMMV）

module.exports = function (grunt) {
    grunt.loadNpmTasks('grunt-preprocess');      <-- Add this line near the top of the file

将此添加到您的子任务列表中

    preprocess : {
        options: {
            inline: true,
            context : {
                DEBUG: false
            }
        },
        html : {
            src : [
                '<%= yeoman.dist %>/index.html', 
                '<%= yeoman.dist %>/views/*.html'
            ]
        },
        js : {
            src: '.tmp/concat/scripts/*.js'
        }
    },

修改您注册的任务（在文件的底部），如下所示：

grunt.registerTask('build', [
    'clean:dist',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'preprocess:js',  // Remove DEBUG code from production builds
    'preprocess:html',  // Remove DEBUG code from production builds
    'ngmin',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'rev',
    'usemin'
]);

然后修改您现有的 JavaScript 代码，如下所示：

// @if DEBUG
'server_mocks',  // Won't be included in production builds
// @endif

和你现有的 html 代码是这样的：

<!-- @if DEBUG -->
<script src='scripts/mock.js'></script>  <!-- Won't be included in production builds -->
<!-- @endif -->
于 2013-12-09T04:29:35.417 回答
1

看看 dom munger ( https://github.com/cgross/grunt-dom-munger )，您可以为要删除的元素提供特定的属性或 ID，并让它从 html 文件中删除它们。但是，我更喜欢的是在我指定 dev 的目标时让它通过追加或前置注入不需要的元素。它使原始 HTML 保持清洁。不过，我还没有删除部分 javascript。根据您想要更改的 js 文件中的其他内容，您可以让它为您的开发和发布版本注入不同版本的文件。

删除示例：

  • 'script[data-remove="true"]' - 具有属性 data-remove 且值为 true 的所有脚本元素。
  • '#removeMe' - ID 为 removeMe 的元素

附加示例：

  • { selector:'html',html:'<script src=\'scripts/mock.js\'></script> ' } - 将指定的 html 附加到 html 元素
于 2015-04-17T12:50:42.220 回答
1

这是一个不需要额外工具的解决方案：

如文档中所述，您可以使用不是 css/js 的类型，这将在构建期间被删除

<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
  • type：可以是 js、css 或自定义类型，定义了块替换功能
  • 如果是其他类型，则该块将被忽略。对于不会出现在您的构建中的“仅开发”块很有用

所以你可以做这样的事情：

<!-- build:mockJs -->
<script type='text/javascript'>var Mocks = {};</script>
<script src='scripts/mocks/jobs.js'></script>
<script src='scripts/mock.js'></script>
<!-- endbuild -->

编辑：对于 javascript，您可以使用 uglizes 全局定义

http://github.com/gruntjs/grunt-contrib-uglify/blob/master/docs/uglify-examples.md#conditional-compilation

只需在你的 gruntfile 中做一个 uglify 配置：

grunt.initConfig({
   ...
   uglify: { 
      options: { 
         compress: {
            global_defs: {
               "PROD": true
             }
         }
      }
   }
   ...
});

并在 js 中执行以下操作：

var modules = ['ngCookies', 'ngResource',
   'ngSanitize',
   'ngRoute',
   'dialogs'
]

if(!PROD) {
  modules.push('server_mocks');
}

angular.module('nglaborcallApp', modules);

你也可以在你的调试块中添加这个全局 JS

<!-- build:mockJs -->
<script type='text/javascript'>var Mocks = {};</script>
<script src='scripts/mocks/jobs.js'></script>
<script src='scripts/mock.js'></script>
<script type='text/javascript'>
   PROD = false;
</script>
<!-- endbuild -->
于 2015-06-15T09:49:55.240 回答