GRUNT: связанные CSS-файлы не отображаются на странице index.html.

У меня есть задание grunt для объединения файлов CSS в комбинированный файл.css, и оно успешно объединяет файлы CSS.

grunt.initConfig({
    concat: {
        options: {
            separator: '\n\n\n',
            base: "../../../",
        },
    css: {    
        src: [ '../../my/demo/v1.0/1.css',    
               '../../my/demo/v1.0/2css',
               '../../my/demo/v1.0/3.css',
             ],
        dest: '../../my/demo/v1.0/combined123.css',
      },
});

grunt.loadNpmTasks('grunt-concat-css');
grunt.registerTask('default', ['concat']);

Однако я не могу понять, как мне заменить 1.css, 2.css и 3.css в index.html на файл комбинированный123.css, используя Grunt.

При попытке вручную заменить эти CSS-файлы на CSS-файлы в index.html, выполнение команды grunt возвращает все изменения, внесенные в index.html. Когда я делаю Просмотр исходного кода для страницы в браузере, он показывает несколько файлов CSS вместо последнего объединенного файла комбинированного файла 123.css.

Как я могу заменить эти CSS-файлы комбинированным файлом 123.css в теге index.html, используя задачу Grunt.

Это Gruntfile.js

grunt.initConfig({
    root: root,

    //concat:css task implemented here as mentioned in above code snippet

    connect: {
        server: {
            options: {
                port: grunt.option('port') || 9090,
                keepalive: false,
                base: "../../../"
            }
        }
    },
    open: {
        all: {
            path: 'http://localhost:<%= connect.server.options.port%>/my/demo/v1.0/dest/index.html'
        }
    },
    watch: {
        html: {
            files: ['views/*.html', 'index_temp.html'],
            tasks: ['mergeFiles']
        },
        livereload: {
            files: ['dest/index.html'],
            options: { livereload: true }
        }
    },
    htmlbuild: {
        dist: {
            src: 'index_temp.html',
            dest: '.tmp/',
            options: {
                beautify: true,
                relative: true,
                sections: {
                    headers: 'views/abc.html',
                    input: 'views/def.html',
                }
            }
        }
    },
    replace: {
        example: {
            src: ['.tmp/index_temp.html'],             
            dest: 'dest/index.html',                   

            replacements: [ {
                from: /^\s*\n/gm,                      
                to: ''
            },
            {
                from: /\s+$/,
                to: ''
            }],
    }
});

require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-concat-css');

grunt.registerTask('server', ['mergeFiles', 'open' ,'connect', 'watch' ]);

grunt.registerTask('default', ['mergeFiles', 'open' ,'connect', 'watch', 'concat']);
grunt.registerTask('mergeFiles', ["htmlbuild:dist", "replace:example"]);

Любая помощь приветствуется.

0 ответов

Другие вопросы по тегам