Как удалить javascript во время компиляции grunt-usemin

У меня есть код, который упрощает и быстро записывает/тестирует код, этот код не принадлежит моему производственному коду (в основном он извиняет сервер, поэтому мне нужен только сервер grunt).

Две части этого: один из них - это удаление частей script

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. Что делают остальные?

Ответы

Ответ 1

Хорошо, так наткнулся на ответ, ища что-то еще, и так как никто еще не ответил. Вот как я это решил:

Вы получаете копию Grunt Preprocess с

npm install --save-dev grunt-preprocess

Затем вы изменяете свой GruntFile.js так (это для проекта angular, 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 -->

Ответ 2

Взгляните на dom munger (https://github.com/cgross/grunt-dom-munger), вы можете предоставить элементы, которые вы хотите удалить, с определенным атрибутом или идентификаторами и иметь его удалите их из html файла. Но, что мне больше нравится, нужно, чтобы он добавлял через append или prepend нежелательный элемент, когда я указывал цель dev. Он сохраняет оригинальный очиститель HTML. Однако я не делю с удалением частей javascript. В зависимости от того, что еще находится в вашем файле js, который вы хотите изменить, вы могли бы ввести в него другую версию файла для вашей версии dev и release.

Удалить примеры:

  • 'script [data-remove = "true" ]' - все элементы script с атрибутом data-remove и значением true.
  • '# removeMe' - элемент с идентификатором removeMe

Добавить примеры:

  • {selector: 'html', html: '< script src= \' scripts/mock.js\' > </script> '} - добавьте указанный html в элемент html

Ответ 3

вот решение, в котором вам не нужны дополнительные инструменты:

как указано в документации, вы можете использовать тип, который не является 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 -->

EDIT: для javascript вы можете использовать uglifies global definition

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

просто выполните конфигурацию uglify в файле grunt:

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