在 Grunt 中同时使用 Compass 和 Autoprefixer答案

【问题标题】：Using both Compass and Autoprefixer in Grunt在 Grunt 中同时使用 Compass 和 Autoprefixer
【发布时间】：2015-06-24 03:05:09
【问题描述】：

很好奇是否有办法在 Grunt 中同时使用 Autoprefixer 和 Compass 而不必为每个任务指定不同的输出路径。

我目前将我的 .scss 文件放在名为 source 的文件夹中。指南针任务将这些编译到名为build 的文件夹中。然后我想运行 Autoprefixer 而不必指定另一个不同的输出路径（即仍然在 build 目录中）。

如果不指定不同的输出路径，就不能在指南针编译的 CSS 文件上运行 Autoprefixer 吗？是否可以同时运行两者？

这是我的 gruntfile 中与它相关的部分，如果它有任何帮助的话。我在终端运行的是grunt watch:

compass: {
    options: {
        sassDir: 'style/source',
        cssDir: 'style/build',
        outputStyle: 'expanded',
    }
},
watch: {
    css: {
        files: ['style/source/**/*.scss'],
        tasks: ['compass'],
        options: {
            spawn: false,
        }
    }
},

参考：

https://github.com/nDmitry/grunt-autoprefixer

https://github.com/gruntjs/grunt-contrib-compass

【问题讨论】：

标签： javascript css gruntjs

【解决方案1】：

如果您没有为 Autoprefixer 指定输出位置，它只会使用输入位置并覆盖文件。如果对任何人有帮助，这里是 gruntfile 的更新部分：

autoprefixer: {
    css: {
        src: 'style/build/**.css',
    }
},
watch: {
    options: {
        livereload: true,
    },
    css: {
        files: ['style/source/**/*.scss'],
        tasks: ['compass', 'autoprefixer:css'],
        options: {
            spawn: false,
        }
    }
}

【讨论】：

【解决方案2】：

您可能还想将 map: true 添加到 autoprefixer 调用中。这是您目标的工作副本：

module.exports = function(grunt) {
  
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    autoprefixer: {
      css: {
          src: 'css/*.css',
          options: {
            map: true
          }
      }
    },
    compass: {
      css: {
        options: {
          config: 'config.rb'
        }
      }
    },
    watch: {
      css: {
        files: '**/*.scss',
        tasks: ['compass:css', 'autoprefixer:css'],
        options: {
            interrupt: true
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['watch']);
  
};

【讨论】：