Управление изображениями в пакетах с помощью grunt

Question

У меня есть экспресс-приложение, в котором я использую беседу для управления внешними зависимостями. Я также использую grunt для создания внешнего интерфейса путем объединения, угашения, минимизации и изменения всех активов, включая скрипты/стили, которые отправляются с каждым компонентом Bower с использованием grunt-usemin.

Для этого я перемещаю все скомпилированные активы (включая скрипты/стили) в каталог dist/public. В итоге я получил <cache-buster>.vendor.js и файл <cache-buster>.vendor.css, в котором содержатся все оптимизированные компоненты.

Вопрос в том, как мне управлять изображениями, которые поставляются с различными пакетами колонок? Я мог бы вручную переместить их в свою папку images, но я предпочел бы оставить их упакованными в bower_components (где они принадлежат, на мой взгляд), и оставьте это, чтобы хрюкать во время процесса сборки.

Любой вход будет оценен по достоинству.

---

Gruntfile.js (экстракт)

rev: { 
     dist: { 
     files: [{ 
      src: [ 
      'dist/public/css/{,*/}*.css', 
      'dist/public/js/{,*/}*.js', 
      'dist/public/img/{,*/}*.{gif,jpeg,jpg,png}' 
      ] 
     }] 
     } 
    }, 

    useminPrepare: { 
     options: { 
     dest: 'dist/public' 
     }, 
     jade: ['dist/views/{,*/}*.jade'] 
    }, 

    usemin: { 
     jade: ['dist/views/{,*/}*.jade'], 
     options: { 
     assetsDirs: ['dist/public'], 
     patterns: { 
      jade: require('usemin-patterns').jade 
     } 
     } 
    }, 

    concurrent: { 
     server: [ 
     'stylus', 'coffee' 
     ], 
     dist: [ 
     'stylus', 'coffee' 
     ] 
    }, 

    copy: { 
     dist: { 
     files: [{ 
      expand: true, 
      cwd: 'views', 
      dest: 'dist/views', 
      src: '{,*/}*.jade' 
     }] 
     } 
    } 
    }); 

    grunt.registerTask('server', [ 
    'clean:server', 
    'concurrent:server', 
    'express:server', 
    'watch' 
    ]); 

    grunt.registerTask('build', [ 
    'clean:dist', 
    'concurrent:dist', 
    'copy:dist', 
    'useminPrepare', 
    'concat', 
    'uglify', 
    'cssmin', 
    'rev', 
    'usemin' 
    ]); 

---

layout.jade (экстракт)

//-<!-- build:css(assets) css/vendor.css --> 
link(href='/bower_components/nivo-slider/nivo-slider.css') 
//-<!-- endbuild --> 

//-<!-- build:css(.tmp) css/application.css --> 
link(href='/css/one.css') 
link(href='/css/two.css') 
//-<!-- endbuild --> 

//-<!-- build:js(assets) js/vendor.js --> 
script(type='text/javascript', src='/bower_components/jquery/jquery.js') 
script(type='text/javascript', src='/bower_components/nivo-slider/jquery.nivo.slider.js') 
//-<!-- endbuild --> 

//-<!-- build:js(.tmp) js/application.js --> 
script(type='text/javascript', src='/js/one.js') 
script(type='text/javascript', src='/js/two.js') 
//-<!-- endbuild --> 

Answer 1

Вот решение, адаптированный к вашему Gruntfile:

rev: { 
    dist: { 
    files: [{ 
     src: [ 
     'dist/public/css/{,*/}*.css', 
     'dist/public/js/{,*/}*.js', 
     'dist/public/img/{,*/}*.{gif,jpeg,jpg,png}', 
     'dist/bower_components/**/*.{png,jpg,jpeg,gif,webp,svg,eot,ttf,woff}' 
     ] 
    }] 
    } 
}, 
useminPrepare: { 
    options: { 
    dest: 'dist/public', 
    flow: { 
     html: { 
     steps: { 
      js: ['concat', 'uglifyjs'], 
      css: ['cssmin'] 
     }, 
     post: {} 
     } 
    } 
    }, 
    jade: ['dist/views/{,*/}*.jade'] 
}, 

cssmin: { 
    options: { 
    root: 'src' 
    } 
}, 

Предполагается, что ваш каталог bower_compontents расположен в исходном каталоге с именем 'src'. В моей среде (загрузился с Йоменом) это было в приложении, поэтому вам может понадобиться настроить cssmin.

Вот что происходит:

Во-первых, мы добавим ReV контрольные суммы в кучу возможных ресурсных файлов в каталоге bower_components.

Далее, в конфигурации flow указано, что usemin пропускает шаг concat для файлов css. Это связано с тем, что cssmin выполняет сама конкатенация, и cssmin должен знать происхождение файлов css, чтобы выполнить коррекцию относительного пути для ссылочных ресурсов.

Наконец, конфигурация root сообщает cssmin, какой путь начать поиск, чтобы найти ресурсы.

Вы можете проверить, чтобы убедиться, что результаты правильны, перейдя в dist/styles/<cache-buster>.vendor.css и проверке изображений имеют относительные URL-адрес, начинающийся с/Бауэром-компонентами/

Например, в моих сборках, у меня есть bootstrap.css встроенный в мой vendor.css, и это было переписано так:

@font-face{ 
    font-family:'Glyphicons Halflings'; 
    src:url(/bower_components/bootstrap/dist/fonts/2ad0632b.glyphicons-halflings-regular.eot); 

(перенос строк добавлены для читаемости, его все cssminified в реальности).

Надеюсь, это поможет.

Предоставление кредита там, где оно должно быть, я нашел это первоначально здесь: https://stackoverflow.com/a/21415649/1017787 Я скорректировал его к вашей конфигурации и добавил конфигурацию ревизии.