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

在我的应用程序的目录结构中，我有一个＆＃39;来源＆＃39;文件夹，当然我不想拥有＆＃39; css＆＃39;那里的文件。

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

我正在考虑将scss文件编译为临时文件夹，但在我的HTML文件中，我并不想放置＆＃39; temp /...'链接。它们应该安装或其他东西。

任何人都知道如何实现我的目标？

亲切的问候

Answer 1

在回复您的评论时，您希望从观看中移除“全部”并替换为：

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

Grunt会观看指定的所有文件夹并执行您定义的任务，但只有{em> html文件或css文件发生更改时才会livereload 。

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

Answer 2

在深度互联网搜索后，我设法找到了解决这一特定问题的方法。

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

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

因此，您可以在我的应用程序结构中清楚地看到我在source文件夹下托管源代码，显而易见，并非如此。该文件夹中的styles目录包含SASS样式表（* .scss）。我不希望有任何css文件因为我没有写css文件，而是编写sass文件。

现在，我确实有一个笨拙的任务，将我的sass编译成普通的css：

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

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

请注意，此任务仅在特定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: ['source', '.tmp']

grunt-express配置看起来像是：

表达：{ 全部：{ 选项：{ 端口：9000，主机名：＆＃34; 0.0.0.0＆＃34;，基地：[＆＃39; source＆＃39;，＆＃39; .tmp＆＃39;]， livereload：是的 } } }，

通过使用此代码，grunt-express将提供存储在＆＃39;来源＆＃39;中的文件。目录和＆＃39; .tmp＆＃39; 。目录

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

2 个答案: