Grunt autoprefixer不起作用

我想在Gruntfile.js上设置一个autoprefixer Grunt任务。有些东西是错的，因为所有的代码都在编译，但没有被自动补充。我已经阅读了所有autoprefixer任务documentation，并且我做了很多更改，但都失败了。Grunt autoprefixer不起作用

"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/[email protected]', 
     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配置之前。所以我觉得我做错了什么。

来源

2016-01-06 Ico Portela

除非你的问题是关系到HTML或无礼的话（如在你需要别人谁是HTML或无礼的专家来回答你的曲estion），不要为它们添加标签。 – cimmanon

@cimmanon，对不起，但我认为这个问题与SASS有关。 –

在任何情况下，Autoprefixer问题永远都不会与Sass有关。 – cimmanon

你的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' 
}

对不起，回答的时候了（不够分还）

来源

2016-01-10 21:29:34 Amber

你说得对，我的配置是正确的。问题是我正在测试一个已经通过所有浏览器支持的属性。我改进了输入和输出重复的配置。 'dist：{src：'build/css/app.min.css'}' 感谢您的帮助！ –

Grunt autoprefixer不起作用

回答

相关问题