Question

很好奇是否有办法在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

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

在Grunt中使用Compass和Autoprefixer

2 个答案: