GRUNT: Concatenated CSS files not reflecting in index.html page

Question

I have setup grunt task to concatenate the CSS files into a combined.css file and it successfully concatenates the CSS files.

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']);

However, I am not able to figure out how should I replace 1.css, 2.css and 3.css in the index.html with the combined123.css file using Grunt.

When manually trying to replacing these css files with the css files in index.html, running the grunt command reverts back the changes made to index.html. When I do the View Source Code for the page in browser, it shows the multiple css files instead of the latest concatenated combined123.css file.

How can I replace these css files with the combined123.css file in the tag of index.html, using the Grunt task.

This is the 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"]);

Any help would be much appreciated.

Not sure, if I understand your question correctly. How does grunt revert something to the HTML? Your grunt command just concatenates css, so in the html it should not do anything. What are you referencing in your HTML? The separate css files or the concatenated one? — Roland Studer, Jul 15 '15 at 13:30
Why don't you use [another task](http://gruntjs.com/plugins?search=replace) to perform a string replace? — BillyNate, Jul 15 '15 at 13:40
@RolandStuder, sorry for not putting it clearly, since I am novice to Grunt. The index.html still refers to the separate css files instead of the newly created combined123.css. I want to make index.html refer to this concatenated combined123.css file using Grunt task. — Naren, Jul 15 '15 at 13:45
@BillyNate, thanks I am looking into it. FYI, I want to achieve something similar as posted in this blog http://www.thoughtdelimited.org/thoughts/post.cfm/using-grunt-to-concatenate-only-the-js-css-files-used-in-index-html — Naren, Jul 15 '15 at 13:47
Looks like you could simply copy-paste the necessary parts from the "entire Gruntfile used to power the build task is below" section of that page. Or am I misunderstanding you? — BillyNate, Jul 15 '15 at 13:51
So if you have the CSS file with all of your other CSS files compiled into it, why don't you just link to the compiled CSS file in your HTML file? — adamccfc, Jul 15 '15 at 14:03
Yes, I've been doing changes to the sections in Gruntfile, but in the link, the index.html has the comments and , which Grunt reads and replaces it with by a single and — Naren, Jul 15 '15 at 14:05
Yes please, post the Gruntfile. I'm starting to think the replace task you are running has the same source as the destination, am I correct? — BillyNate, Jul 15 '15 at 14:09
@adam-morgan, I tried doing that, but when I ran the "grunt" command, the index.html page had the of multiple CSS files instead of the latest compiled CSS and changes made to the index.html were reverted back. — Naren, Jul 15 '15 at 14:24
@BillyNate, even I am trying to figure out the replace task why the changes made to the index.html to point the combined123.css are getting reverted to the original multiple css files. Or if I add a comment to the index.html for processing the grunt-replace task to replace the CSS files by combined123.css file are also getting reverted. — Naren, Jul 15 '15 at 14:42
The example at [npmjs.com/package/grunt-replace](https://www.npmjs.com/package/grunt-replace) shows a different syntax using `options` and `files` attributes. Have you tried this already? — BillyNate, Jul 16 '15 at 13:09
@BillyNate, thanks! I am working on the same grunt-replace plugin as I believe that should help in this case. Also the grunt-replace task in the above Gruntfile.js is replacring the dest/index.html with the .tmp/index_temp.html, which is not allowing me to manually add the link to concatenated combined123.css to dest/index.html and is reverting it back when I run the grunt command. I am not sure what is it doing. Would appreciate any help solving this problem. — Naren, Jul 16 '15 at 14:39
I know you are using that plugin. But did you try changing your syntax to match the example's on the plugin's page? — BillyNate, Jul 16 '15 at 14:50
Look at [grunt-usemin](https://github.com/yeoman/grunt-usemin) — Vishwanath, Jul 16 '15 at 14:56

GRUNT: Concatenated CSS files not reflecting in index.html page

0 Answers0