覆蓋Grunt中的特定文件

Question

我有三個項目：Proj A，其中包含一個基本設置，其中包含要在許多不同項目中重復使用的文件，這些文件不可編輯。 而Proj B和C，則使用Proj A中的文件作為基礎。 每個項目都有自己的Gruntfile。

我想在Proj B和C中自定義一些JS和SCSS文件（例如，更改顏色/變量）。 但是請注意Proj A可能會不時更新，因此我無法編輯任何基本文件，因為在將最新更改提取到B和C中時，這些基本文件將被覆蓋。因此，我必須創建自定義文件，這些文件應覆蓋Proj A中的文件。

1）

一種方法是復制要編輯的文件，然后在文件名中添加“ override”：

ui / styles / sass / _override_colors.scss *（應覆蓋ui / styles / sass / _colors.scss）* ui / scripts / _override_base.js （應覆蓋ui / scripts / base.js）

問題是：如何在Gruntfile中指定此規則，“如果存在以'_override'開頭的任何文件，應覆蓋其等效文件”。 但是，如果我復制的文件很大，則這可能不是可選的，因為這意味着兩個完全相同的大文件。

2）

另一種方法是添加一個名為_overrides.scss的新文件，並將其最后添加到我的@import文件中。 但是，如果我要更改很多事情，那將不是一個好主意，因為它可能太雜亂且太大，並且還意味着代碼重復（除非我僅覆蓋變量且不包含類）。

您會選擇哪種方法？ 還有其他更好的方法來解決此問題嗎？

謝謝！

web.scss:
@import 'colors';
@import 'grid';
@import 'base';
// @import 'overrides'; ?


grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
        dev: {
            options: {
                style: 'expanded',
                sourcemap: true,
                quiet: true

            },
            files: {
                'styles/css/web.css':       'styles/sass/web.scss'
            }
        }
    },

    uglify: {
        site: {
            files: {
                'scripts/min/site.js': [
                    'scripts/dev/forms.js'
                    'scripts/dev/base.js'
                ]
            }
        }
    }, ....

Answer 1

我認為Gruntfile.js級別不應該發生任何事情，因為這僅涉及SASS 。

如果您喜歡替代方法，請將替代文件命名為_appB.scss和_appC.scss並將它們添加到編譯中。 只要您只覆蓋其中的文件，這些文件就不會腫。

但是，您可能會決定采用非替代方式，並為每個應用程序創建專用的選擇器-這需要花一些時間來習慣，但從長遠來看將更加可維護。 這樣，每個選擇器都會過自己的生活。

覆蓋示例：

_appA.scss（常用樣式）

.content { height: 80px; max-width: 980px; margin: 0 auto; }

_appB.scss

.content { height: 90px; }

_appC.scss

.content { height: 70px; max-width: 768px; }

標記

<div class="content"></div>

塊/元素/修飾符“替代”示例：

_appA.scss（常用樣式）

.content { height: 80px; max-width: 980px; margin: 0 auto; }

_appB.scss

.content--b { height: 90px; }

_appC.scss

.content--c { height: 70px; max-width: 768px; }

標記

<div class="content content--b"></div>
<div class="content content--c"></div>

上面的最后一個標記示例是BEM語法的表示形式，這是OOCSS上的一種流行用法 。

我和我的同事在維護復雜的產品，並發現此工作流程非常易於管理。