Grunt-contrib-sass 用于开发和生产？

Question

如何为 dev 和 prod 设置不同的 grunt-contrid-sass 任务？我需要不同的 css 文件 - 有源映射和无源映射。

我试过了：

sass: {
dev: {
    options: {
        sourcemap: 'inline',
    },      
},      
prod: {
    options: {
        sourcemap: 'none',
    },      
},
      files: {
        expand: true,
        cwd: 'static/compass/sass/pages/redesign/',
        src: ['**/*.scss'],
        dest: 'static/compass/css/pages/redesign/',
        ext: '.css'
      },
  },

但在这种情况下 sass:dev 任务不会编译任何文件。

当我尝试时：

sass: {
dev: {
    options: {
        sourcemap: 'inline',
    },      
      files: {
        expand: true,
        cwd: 'static/compass/sass/pages/redesign/',
        src: ['**/*.scss'],
        dest: 'static/compass/css/pages/redesign/',
        ext: '.css'
      },

},      
prod: {
    options: {
        sourcemap: 'none',
    },      
      files: {
        expand: true,
        cwd: 'static/compass/sass/pages/redesign/',
        src: ['**/*.scss'],
        dest: 'static/compass/css/pages/redesign/',
        ext: '.css'
      },

},
  }

我收到一条建议使用“--force”的警告。但即使使用“--force”我也没有编译文件。

有什么办法吗？

Answer 1

你的第二个例子接近于它应该的样子。但是，每个 files 属性的值应该是一个包含对象的数组，如文档中的 this example 所示。

例如应该是：

files: [{
  //...
}]

和不：

files: {
  //...
}

将您的 saas 任务更改为以下内容：

sass: {
  dev: {
    options: {
      sourcemap: 'inline'
    },      
    files: [{ // <-- change this
      expand: true,
      cwd: 'static/compass/sass/pages/redesign/',
      src: ['**/*.scss'],
      dest: 'static/compass/css/pages/redesign/',
      ext: '.css'
    }] // <-- change this
  },
  prod: {
    options: {
      sourcemap: 'none'
    },      
    files: [{ // <-- change this
      expand: true,
      cwd: 'static/compass/sass/pages/redesign/',
      src: ['**/*.scss'],
      dest: 'static/compass/css/pages/redesign/',
      ext: '.css'
    }] // <-- change this
  }
}

编辑

注意：您还应该考虑更改 dev 或 prod 目标（或两者）中的 dest 路径，因为目前它们是相同的路径，即如果您运行同时 sass:prod 和 sass:dev 一个任务的输出将被另一个任务覆盖。

Grunt-contrib-sass 用于开发和生产？

Grunt-contrib-sass for dev and prod?

sass

gruntjs