css - Grunt autoprefixer 不工作

Question

我正在尝试设置 autoprefixer Gruntfile.js 中的 Grunt 任务。出了点问题，因为所有代码都在编译但没有自动添加前缀。我已经阅读了所有的 autoprefixer 任务 documentation我做了很多改变，但都失败了。

"use strict";

module.exports = function( grunt ) {

  grunt.initConfig({
    watch: {
      css: {
        files: [ 'assets/sass/**/*.scss' ],
        tasks: [ 'sass:prod', 'sass:dist', 'postcss:dist' ]
      },
      js: {
        files: 'assets/js/*.js',
        tasks: [ 'uglify:dist' ]
      }
    },

    uglify: {

      dist: {
        options: {
          compress: false,
          beautify: false,
          report: 'gzip'
        },
        files: {
          'build/js/app.min.js': ['assets/js/main.js']
        }
      },

      prod: {
        options: {
          compress: true,
          report: 'gzip'
        },
        files: {
          'build/js/app.min.js': ['assets/js/main.js']
        }
      }
    },

    sass: {
      dist: {
        options: {
          style: 'expanded',
          noCache: true,
          sourcemap: 'none',
          lineNumbers: false
        },
        files: {
          'build/css/app.css': 'assets/sass/app.scss'
        }
      },

      prod: {
        options: {
          style: 'compressed',
          noCache: true,
          sourcemap: 'none',
          lineNumbers: false
        },
        files: {
          'build/css/app.min.css': 'assets/sass/app.scss'
        }
      }
    },

    postcss: {
      options: {
        map: false,
        processors: [
          require('autoprefixer')({browsers: ['last 2 versions']})
        ]
      },
      dist: {
        files: {
          'build/css/app.min.css': 'build/css/app.min.css'
        }
      }
    },

    sprite:{
      all: {
        src: 'assets/sprites/*.png',
        dest: 'build/img/spritesheet.png',
        destCss: 'assets/sass/sprites.scss',
        retinaSrcFilter: 'assets/sprites/*@2x.png',
        retinaDest: 'build/img/spritesheet.retina@2x.png',
        padding: 10
      }
    },

    notify_hooks: {
      options: {
        enabled: true,
        max_jshint_notifications: 5, 
        title: "Template", 
        success: true, 
        duration: 3 
      }
    }

  });

  // Load the tasks
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-spritesmith');
  grunt.loadNpmTasks('grunt-notify');
  grunt.loadNpmTasks('grunt-postcss');

  grunt.task.run('notify_hooks');

  grunt.registerTask( 'default', [ 'watch', 'postcss:dist' ] );
  grunt.registerTask( 'production', [ 'sass:prod', 'sass:dist', 'uglify:prod' ] );
};

这是 package.json 文件:

{
  "devDependencies": {
    "autoprefixer": "^6.2.3",
    "grunt": "^0.4.5",
    "grunt-contrib-sass": "^0.9.2",
    "grunt-contrib-uglify": "^0.11.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-notify": "^0.4.3",
    "grunt-postcss": "^0.7.1",
    "grunt-spritesmith": "^6.1.0"
  }
}

在添加 Autoprefixer 配置之前，这些设置已经被成功使用。所以我认为我做错了什么。

Answer 1

您的 Gruntfile.js 看起来不错!我已经尝试了您的设置并且它按预期工作。您是否尝试过删除和安装依赖项 grunt-contrib-sass、grunt-postcss 和 autoprefixer？您是否尝试过单独运行任务并检查结果？

而且我不确定为什么下面的代码片段中的输入和输出相同:

postcss: {
  options: {
    map: false,
    processors: [
      require('autoprefixer')({browsers: ['last 2 versions']})
    ]
  },
  dist: {
    files: {
      'build/css/app.min.css': 'build/css/app.min.css'
    }
  }
},

也许你以后想使用另一个文件名，但否则你可以删除最后一部分:

files: {
   'build/css/app.min.css'
}

抱歉马上回答(积分还不够)