如何基於grunt任務在CSS文件的index.html中具有可變路徑？

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的插件

在我的應用程序的目錄結構中，我有一個“源”文件夾，當然，我不想在其中有“ css”文件。

因此，如何在HTML中放置一個指向將由grunt任務生成的css文件的鏈接？

我正在考慮將scss文件編譯到一個臨時文件夾中，但是在我的HTML文件中，我不想放置“ temp / ...”鏈接。 他們應該被安裝或其他。

有人知道如何實現我想要的嗎？

親切的問候

Answer 1

為了回應您的評論，您想從監視中刪除“全部”並替換為以下內容：

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文件，因為我不是在編寫sass文件時編寫CSS文件。

現在，我確實有一個艱巨的任務，可以將我的Sass編譯成普通的CSS：

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

因此，此任務將獲取文件main.scss並將其編譯到目錄.tmp / styles / main.css中

請注意，此任務僅與特定的grunt-debug任務一起執行。

當我在發行版上構建時，css文件將放置在release/styles/main.css

現在，我有一個引用樣式表的index.html文件：

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

您可能會猜到，這是行不通的，因為在調試時，索引文件位於源文件夾中，而styles目錄僅包含我的SASS文件。

我正在使用grunt-express作為服務器：

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

現在，要使服務器真正加載css文件，我唯一需要做的就是將bases路徑更改為：

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

grunt-express配置如下所示：

表達：{全部：{選項：{端口：9000，主機名：“ 0.0.0.0”，基數：['source'，'.tmp']，livereload：true}}}，

通過使用此代碼，grunt-express將提供存儲在“源”目錄和“ .tmp”目錄中的文件。