在Grunt中同时使用Compass和Autoprefixer

Question

想知道是否有一种方法可以在Grunt中同时使用Autoprefixer和Compass，而不必为每个任务指定不同的输出路径。

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

在没有指定不同输出路径的情况下，是否不可能在compass编译的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

Answer 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,
        }
    }
}

Answer 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']);
  
};