как использовать grunt-autoprefixer и grunt-sass вместе?

Я новичок в инструментах grunt и sass в целом, это был отличный опыт обучения. :) В настоящее время у меня настроен grunt для объединения/минимизации моего SCSS при сборке. Я хотел бы использовать плагин grunt-autoprefixer для добавления префиксов поставщиков, однако я не совсем знаю, как интегрировать его в мой существующий Gruntfile. В приведенном ниже коде я начал его реализовывать (см. закомментированный раздел «TODO»), но если кто-нибудь может указать мне правильное направление, чтобы заставить его работать, я был бы очень признателен :)

Вот мой текущий Gruntfile.js:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
      options: {
        sourceMap: true
      },

      dist: {
        options: {
          outputStyle: 'compressed'
        },
        files: {
          'css/foundation.css': 'scss/foundation.scss'
        }
      }
    },

    copy: {
      scripts: {
        expand: true,
        cwd: 'bower_components/foundation/js/vendor/',
        src: '**',
        flatten: 'true',
        dest: 'js/vendor/'
      },

      iconfonts: {
        expand: true,
        cwd: 'bower_components/fontawesome/',
        src: ['**', '!**/less/**', '!**/css/**', '!bower.json'],
        dest: 'assets/fontawesome/'
      },

    },

    // TODO: setup autoprefixer
    // autoprefixer: {
    //   options: {
    //     // Task-specific options go here.
    //     browsers: ['last 2 versions', 'ie 8', 'ie 9']
    //   },
    //   your_target: {
    //     // Target-specific file lists and/or options go here.
    //   },
    // },


      'string-replace': {

        fontawesome: {
          files: {
            'assets/fontawesome/scss/_variables.scss': 'assets/fontawesome/scss/_variables.scss'
          },
          options: {
            replacements: [
              {
                pattern: '../fonts',
                replacement: '../assets/fontawesome/fonts'
              }
            ]
          }
        },
      },

    concat: {
        options: {
          separator: ';',
        },
        dist: {
          src: [

          // Foundation core
          'bower_components/foundation/js/foundation/foundation.js',

          // Pick the componenets you need in your project
          'bower_components/foundation/js/foundation/foundation.abide.js',
          'bower_components/foundation/js/foundation/foundation.accordion.js',
          'bower_components/foundation/js/foundation/foundation.alert.js',
          'bower_components/foundation/js/foundation/foundation.clearing.js',
          'bower_components/foundation/js/foundation/foundation.dropdown.js',
          'bower_components/foundation/js/foundation/foundation.equalizer.js',
          'bower_components/foundation/js/foundation/foundation.interchange.js',
          'bower_components/foundation/js/foundation/foundation.joyride.js',
          'bower_components/foundation/js/foundation/foundation.magellan.js',
          'bower_components/foundation/js/foundation/foundation.offcanvas.js',
          'bower_components/foundation/js/foundation/foundation.orbit.js',
          'bower_components/foundation/js/foundation/foundation.reveal.js',
          'bower_components/foundation/js/foundation/foundation.slider.js',
          'bower_components/foundation/js/foundation/foundation.tab.js',
          'bower_components/foundation/js/foundation/foundation.tooltip.js',
          'bower_components/foundation/js/foundation/foundation.topbar.js',
          'bower_components/alertify.js/lib/alertify.js',

          // include vendor js
          'js/vendor/jquery.unveil.js',
          'js/vendor/wow.js',

          // Using all of your custom js files
          'js/custom/*.js'

          ],
          // Concat all the files above into one single file
          dest: 'js/foundation.js',
        },
      },

    uglify: {
      dist: {
        files: {
          // Shrink the file size by removing spaces
          'js/foundation.js': ['js/foundation.js']
        }
      }
    },

    watch: {
      grunt: { files: ['Gruntfile.js'] },

      sass: {
        files: 'scss/**/*.scss',
        tasks: ['sass']
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-string-replace');

  grunt.registerTask('build', ['copy', 'string-replace:fontawesome', 'sass', 'concat', 'uglify']);
  grunt.registerTask('default', ['watch']);
};

person tdc    schedule 19.03.2015    source источник
comment
Источником для автопрефиксера является выходной файл CSS задачи Sass. Вы должны минимизировать его после этого.   -  person helloanselm    schedule 19.03.2015
comment
@helloanselm значит ли это, что мне нужно изменить параметр SASS outputStyle на «расширенный», а затем добавить дополнительную задачу для минимизации после задачи автопрефиксера? Есть ли способ сделать это без добавления дополнительных плагинов?   -  person tdc    schedule 19.03.2015
comment
Я делал это с мини-файлом, и он работал нормально. Мне нравится называть мой скомпилированный файл sass main-unprefixed, использовать его в качестве источника для автопрефиксера и создавать основной файл с автопрефиксом. Но я думаю, что это личное предпочтение   -  person KreaTief    schedule 19.03.2015
comment
Точно. Вы также можете применить его к минимизированному, но после этого следует повторно минифицировать его.   -  person helloanselm    schedule 20.03.2015


Ответы (1)


Вы должны автоматически префиксить свой результат sass, поэтому вам нужно сначала запустить sass, а затем запустить autoprefixer.

Предполагая, что все ваши стили CSS находятся в css/foundation.css:

autoprefixer:{
  dist:{
    files:{
      'css/foundation.css':'css/foundation.css'
    }
  }
}

В вашей build задаче:

grunt.registerTask('build', ['copy', 'string-replace:fontawesome', 'sass', 'autoprefixer' 'concat', 'uglify']);
person Mario Araque    schedule 19.03.2015