如何根据 grunt 任务在 index.html 中为 css 文件设置可变路径？

Question

我正在做一个项目，我左右检查了几个下载，我可以访问 Grunt。这是一个我想毫无疑问地使用的工具。

我已经设置了一个基本的 Grunt 文件，使 livereload 能够工作，所以每当我更改我的 .html 文件时，页面都会刷新。

一切正常。请参阅下面的代码段，其中概述了我当前的 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'
    ]);
};

现在，在我的项目中，我正在使用 SASS (scss) 个文件，我知道要编译这些文件，我需要一个名为 https://github.com/gruntjs/grunt-contrib-sass[=15= 的插件]

在我的应用程序的目录结构中，我有一个 'source' 文件夹，当然我不希望其中有 'css' 个文件。

那么，我如何在我的 HTML 中放置一个 link 指向一个 css 文件，该文件将由 grunt 任务生成？

我正在考虑将 scss 文件编译到一个临时文件夹中，但是在我的 HTML 文件中，我不想将 'temp/...' links。它们应该被安装或其他东西。

有人知道如何实现我想要的吗？

亲切的问候

Answer 1

为了回应您的评论，您想从手表中删除 'all' 并替换为类似以下内容：

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

Grunt 将监视所有指定的文件夹并执行您定义的任务，但仅当 html 个文件或 css 个文件已更改时才会 livereload .

这意味着您在保存 scss 文件时不会看到重新加载，但是一旦它们被编译为 css 您就会看到重新加载。这是因为您已明确告诉 grunt 不要 livereload sass 文件。

Answer 2

在深层互联网中进行一些搜索后，我设法找到了解决这个特定问题的方法。

首先，让我再次描述我想要实现的目标，因为我在最初的问题的评论中发现它并不清楚。

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

因此，您可以在我的应用程序结构中清楚地看到我将源代码托管在文件夹 source 下，很明显，不是吗。该文件夹中的样式目录包含一个 SASS 样式表 (*.scss)。我不想在其中包含任何 css 文件，因为我不是在编写 css 文件，而是在编写 sass 文件。

现在，我确实有将我的 sass 编译成普通 css:

的 grunt 任务

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

因此，此任务将获取文件 main.scss 并将其编译到目录 `.tmp/styles/main.css'

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

当我构建发布时，css 文件将被放置在 release/styles/main.css

现在，我有一个引用样式表的 index.html 文件：

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

你可能猜到了，这不会起作用，因为当我调试时，索引文件在源文件夹中，而样式目录只包含我的 SASS 文件。

我正在使用 grunt-express 作为服务器：

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

现在，要使服务器真正加载 css 文件，我唯一需要做的就是将基本路径更改为：

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

grunt-express 配置看起来像这样：

快递：{ 全部： { 选项： { 端口：9000，主机名：“0.0.0.0”，碱基：['source', '.tmp'], livereload: 真 } } },

通过使用此代码，grunt-express 将提供存储在 'source' 目录和“.tmp”目录中的文件。

如何根据 grunt 任务在 index.html 中为 css 文件设置可变路径？

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

javascript

gruntjs