0

我已经设置了 grunt 任务来将 CSS 文件连接成一个 combine.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']);

但是，我无法弄清楚如何使用 Grunt 将 index.html 中的 1.css、2.css 和 3.css 替换为 combine123.css 文件。

当手动尝试用 index.html 中的 css 文件替换这些 css 文件时，运行 grunt 命令会恢复对 index.html 所做的更改。当我在浏览器中查看页面的源代码时，它显示了多个 css 文件，而不是最新的连接的 combine123.css 文件。

如何使用 Grunt 任务将这些 css 文件替换为 index.html 标记中的 combine123.css 文件。

这是 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"]);

任何帮助将非常感激。

4

0 回答 0