Question

我的代码使编写/测试代码变得简单快捷，代码不属于我的生产代码（主要是它模拟了服务器，所以我只需要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服务器来做。其他人在做什么？

Answer 1

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

您可以使用

获得 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'
        }
    },

修改您的注册任务（位于文件底部），如thils：

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 -->

Answer 2

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

删除示例：

'script [data-remove =“true”]' - 所有脚本元素的属性为data-remove，值为true。
'＃removeMe' - ID为removeMe的元素

附加示例：

{selector：'html'，html：'＆lt; script src = \'scripts / mock.js \'＆gt;＆lt; / script＆gt; '} - 将指定的html附加到html元素

Answer 3

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

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

<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

type：可以是js，css或定义了块替换功能的自定义类型
如果是其他类型，则会忽略该块。仅用于＆＃34;仅用于开发＆＃34;不会出现在您的构建中的块

所以你可以这样做：

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

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

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 -->

如何在grunt-usemin编译期间删除一些javascript

3 个答案: