How to have a variable path in the index.html for css files based on the grunt task?

Question

I'm working on a project and I've checked a couple downloads left and right and I can accross Grunt. It's a tool which I would like to use without a doubt.

I've setup a basic Grunt file that enables livereload to work, so whenever I change my .html files, the page is refreshed.

That's all working good. See the snippet below which given you an overview of my current Gruntfile.js

'use strict';

var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
};

// The main entry point for the Grunt configuration file.
module.exports = function(grunt) {

    // Load all the grunt tasks which are defined in the 'package.json' file.
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    // Initial grunt configuration.
    grunt.initConfig({

        // grunt-express configuration.
        // Grunt-Express will serve files from the folder listed in the 'bases' property on the specified hostname
        // and port.
        express: {
            all: {
                options: {
                    bases: ['source'],
                    port: 8080,
                    hostname: "0.0.0.0",
                    livereload: true
                }
            }
        },

        // grunt-watch configuration.
        // Grunt-Watch will monitor the project files.
        watch: {
            all: {
                options: {livereload: true },
                files: [
                    '**/*.html'   // Refresh when any HTML file is being updated in any folder.
                ]
            }
        },

        // grunt-open configuration.
        // Grunt-Open will open your browser at the project url's.
        open: {
            all: {
                // The port is loaded dynamically here through the 'express.all.options.port' property.
                path: 'http://localhost:<%= express.all.options.port %>'
            }
        }
    });

    // Creates the various grunt tasks that needs to be executed.
    grunt.registerTask('server', [
        'express',
        'open',
        'watch'
    ]);
};

Now, in my project I'm using SASS (scss) files and I know that to compile those files I need a plugin called https://github.com/gruntjs/grunt-contrib-sass

In the directory structure of my application I'm having a 'source' folder, and off course I don't want to have 'css' files in there.

So, how can I place a link in my HTML that points to a css file that will be generated by the grunt task?

I'm thinking about compiling the scss files to a temp folder, but in my HTML file, I don't want to put 'temp/...' links. They should be mounted or something else.

Anyone knows how to achieve what I want?

Kind regards

Answer 1

In response to your comment, you want to remove 'all' from watch and replace with something like:

options: {
    livereload: true
},
html: {
    files: ['**/*.html']
},
css: {
    files: ['**/css/*.css']
},
sass: {
    options: {
        livereload: false
    },
    files: ['**/sass/*.scss'],
    tasks: ['sass']
}

Grunt will watch all the folders specified and perform the tasks you've defined, but will only livereload when html files or css files have changed.

This means you won't see a reload when you save scss files, but once they've been compiled to css you will see a reload. This is because you have explicitly told grunt not to livereload sass files.

Answer 2

after some search in the deep internet, I've managed to found a solution to this particular problem.

First, let me describe again what I would like to achieve since it wasn't clear in the first place I've found in the comments on my original question.

Application
|-- Source
|   |-- Styles
|   |   |-- main.scss
|   |-- Scripts
|   |   |-- core.js
|   |-- index.html 

So, you can clearly see in my application's structure that I'm hosting the source code under the folder source, obvious, isn't it. The styles directory in that folder contains a SASS stylesheet (*.scss). I don't want to have any css file in that because I'm not writing css files, in writing sass files.

Now, I do have grunt task which compiles my sass into plain css:

sass: {
  all: {
    files: {
       '.tmp/styles/main.css' : 'source/styles/main.scss'
            }
  }
}

So, this task will take the file main.scss and compile it into a directory `.tmp/styles/main.css'

Note that this task is only executed with a specific grunt-debug task.

When I'm building on release, the css file will be placed in release/styles/main.css

Now, I'm having an index.html file which references the stylesheet:

<link rel="stylesheet" href="styles/main.css"/>

As you might guess, this won't work, because when I'm debugging, the index file is in the source folder while the styles directory only contains my SASS file.

I'm using grunt-express as the server:

    express: {
        all: {
            options: {
                port: 9000,
                hostname: "0.0.0.0",
                bases: ['source'],
                livereload: true
            }
        }
    },

Now, to make the server really load the css file, the only thing that I needed to do was changing the bases path to:

bases: ['source', '.tmp']

The grunt-express configuration then looks something like:

express: { all: { options: { port: 9000, hostname: "0.0.0.0", bases: ['source', '.tmp'], livereload: true } } },

By using this code, the grunt-express will serve files that are stored in the 'source' directory and in the '.tmp' directory.