задание grunt для изменения углового index.html йомана

yo angular устанавливает базовую основу для написания угловых приложений. Итак, в index.html у нас есть следующий код:

<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css" />
<!-- endbower -->
<!-- endbuild -->

Я ищу задачу, которая удалит эти строки и введет правильное расположение файлов. Например:

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />

Или есть какой-то альтернативный способ справиться с этим... например, например. сделать так, чтобы задача наблюдения создавала разные версии index.html, скажем, index.html.fooTarget; он обновляется правильными путями для этой цели; а затем, когда дело доходит до задачи ворчания, скопируйте последний файл соответствующим образом.

Что можно сделать, чтобы справиться с этим?


angularjs gruntjs yeoman yeoman-generator-angular
person deostroll    schedule 20.01.2015    source источник
comment
Bower устанавливает компоненты в каталог bower_components, что с этим не так?   -  person Mikko Viitala    schedule 20.01.2015
comment
Мне нужна дистрибутивная версия этих файлов Bower, скопированная в мою целевую папку. Итак, скажем, это файл css... он должен быть скопирован в папку css, а index.html должен отражать то же самое... это обычное дело, с которым вы сталкиваетесь при разработке разрыва телефона/кордовы.   -  person deostroll    schedule 20.01.2015

Ответы (1)


arrow_upward
0
arrow_downward

Возможно, вам следует оставить пути такими, какие они есть, поскольку файлы CSS также являются зависимостями от Bower. Скопировать зависимости в каталог с тем же относительным путем?

Но если хотите, я думаю, это поможет вам изменить ваши черновые задачи.

Я предполагаю, что у вас есть (по крайней мере) следующее в вашем файле package.json.

{
  "name": "app",
  "version": "0.0.1",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-text-replace": "0.3.11"
  }
}

Тогда минимальные задачи копирования и замены могут выглядеть следующим образом в вашем Gruntfile.js (вы можете комбинировать копирование и замену, используя grunt-contrib-copy в одиночку, если хотите).

'use strict';

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-text-replace');

    grunt.initConfig({
        src: 'src',
        dest: 'dest',
        copy: {
            dev: {
                expand: true,
                cwd: '<%= src %>',
                src: '{,*/}*.html',
                dest: '<%= dest %>/'                
            }
        },
        replace: {
            dev: {
                src: ['<%= dest %>/{,*/}*.html'],
                overwrite: true,
                replacements: [{
                    from: 'bower_components/bootstrap/dist/css',
                    to: 'css'
                }]
            }
        }
    });

    grunt.registerTask('prepare', function(val) {
        var target = val || 'dev';
        grunt.task.run([
            'copy:' + target,
            'replace:' + target
        ]);
    });
};

Теперь, когда вы запустите задачу prepare с желаемым target, она скопирует все файлы HTML из каталога src в каталог dest и заменит нужные пути CSS, оставив исходные файлы нетронутыми.

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 

--> will be replaced as -->

<link rel="stylesheet" href="css/bootstrap.css" />
person Mikko Viitala    schedule 20.01.2015
comment
Пришлось сделать это для всех включенных файлов. :( Однако должен быть лучший способ. Теперь, когда я добавляю новую зависимость (через беседку), я должен внести изменения в свою копию и заменить задачи соответственно. Должна быть возможность читать index.html, просматривая все ссылки на файлы script и css. и выполнить копирование и замену задачи... - person deostroll; 21.01.2015
comment
Тем не менее, просто скопируйте dev bower_components в dist bower_components, используя тот же относительный путь, и тогда вам вообще не придется беспокоиться о задаче копирования/замены? - person Mikko Viitala; 21.01.2015
comment
как бы я заранее узнал, сколько файлов и какие файлы копировать? Например, для начальной загрузки jquery является зависимостью... Я не могу понять это только из файла bower.json. - person deostroll; 21.01.2015
comment
скопировать Bower_components/**/* - person Mikko Viitala; 21.01.2015
comment
@MikkoViitala, я успешно реализовал задачи grunt, но мой index.html перезаписывается, можете ли вы предложить мне задачу grunt, которая создаст копию index.html в index-dev.html и успешно запустит задачу grunt? - person Prasanna; 09.08.2017