13

コードを簡単かつ迅速に記述/テストできるようにするコードがありますが、そのコードは本番コードには属していません (ほとんどの場合、サーバーをモックアウトするため、grunt サーバーのみが必要です)。

これには 2 つの部分があります。1 つは、スクリプトの一部を削除する方法です。

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 ドキュメントには何も表示されないので、他のツールがあると推測していますが、そのツールの名前はわかりません。

もう1つの可能性は、私が間違っていることであり、このモックオブジェクトを注入するのではなく、うなり声サーバーで行う必要があります。他のみんなは何をしているの？

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

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 -->
于 2013-12-09T04:29:35.417 に答える
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の場合、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 -->
于 2015-06-15T09:49:55.240 に答える
1

dom munger ( https://github.com/cgross/grunt-dom-munger ) を見てみましょう。削除したい要素に特定の属性または ID を与えて、それらを html ファイルから削除することができます。しかし、私がより気に入っているのは、dev のターゲットを指定するときに、append または prepend を介して不要な要素を挿入することです。元の 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 に答える