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不起作用

回答

相關問題