Как я могу заставить «grunt less» автоматически запускать autoprefixer?

Question

У меня есть рабочий файл Grunt с меньшим количеством и autoprefixer. У меня также есть «ворчащие часы», прекрасно работающие.

Прежде чем использовать autoprefixer, я использовал меньше миксинов для префиксов поставщиков. Запуск «grunt less» приведет к созданию рабочего CSS со всеми моими префиксами.

Теперь у меня есть autoprefixer, но если я хочу сделать однократную сборку моих стилей, теперь мне нужно запустить «grunt less», а затем «grunt autoprefixer», чтобы получить CSS-код с префиксами.

Как я могу изменить «grunt less», чтобы он не работал, префиксы были реже?

I've read the docs, and I know I could add an additional task to do both these things. Однако:

• «Грунт меньше» теперь не имеет возможности использования. Задача всегда должна обеспечивать полезную производительность.
• Я не хочу, чтобы сказать другим людям, что «хрюкать меньше» не производит полезной выходной
• Дополнительной задачей не следует требовать, чтобы заменить тот, который не работает

Т.е. , Я просто хочу хрюкать меньше, чтобы создать рабочий CSS (с префиксами).

module.exports = function(grunt) { 

    // Load Grunt tasks declared in the package.json file 
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); 

    // Configure Grunt 
    grunt.initConfig({ 

    less: { 
     development: { 
     options: { 
      paths: ["./less"], 
      yuicompress: false 
     }, 
     files: { 
      "./public/css/style.css": "./public/less/style.less" 
     } 
     } 
    }, 

    autoprefixer: { 
     development: { 
     browsers: ['last 2 version', 'ie 9'], 
     expand: true, 
     flatten: true, 
     src: 'public/css/*.css', 
     dest: 'public/css' 
     } 
    }, 

    watch: { 
     less: { 
     files: ["./public/less/*"], 
     tasks: ["less", "autoprefixer:development"], 
     options: { 
      livereload: true 
     } 
     } 
    }, 

    }); 


}; 

Answer 1

Grunt не может делать то, что вы описываете в вопросе, поскольку задачи не знают друг о друге по своей сути. Вы должны склеить задачи вместе, используя псевдонимы (простое) или функции (если вам требуется немного больше контроля), но нет способа изменить способ один из этих задач ведет себя без изменения источника.

В качестве примера вы можете использовать fork grunt-contrib-less и добавить код для запуска автоматического префикса непосредственно в задачу, здесь: https://github.com/gruntjs/grunt-contrib-less/blob/master/tasks/less.js#L69 - введите эту строку здесь https://github.com/nDmitry/grunt-autoprefixer/blob/master/tasks/autoprefixer.js#L56, а затем используйте свою вилку вместо официального плагина ,

Самый простой и лучший способ, чтобы зарегистрировать новую задачу, которая делает работу этих двух задач, но в одной команде, то есть:

grunt.registerTask('buildless', ['less', 'autoprefixer']); 

Я делаю это со всеми своими задачами - SASS компиляции, JS concat + uglify, создание webfont и т. Д. Просто расскажите другим в своей команде о выполнении этих задач, а не grunt less или grunt autoprefixer самостоятельно.

еще лучше, use my Grunt plugin available tasks. С этим (и фильтром конфигурацией) вы будете в состоянии произвести обрезанный вниз список задач всякий раз, когда кто-то бежит grunt availabletasks хотя я предпочитаю псевдоним это с tasks для быстрого набора текста. Если вы похожи на меня и были укушены ошибкой автоматизации (и зарегистрировали множество плагинов в вашем файле Grunt), это может реально помочь новичкам проекта, с которыми должны выполняться задачи.

Answer 2

Для использования autoprefixer в качестве плагина для LESS, необходимо установить NPM-пакет менее плагин-АвтоПрефиксНомераЗадачи:

npm install grunt-contrib-less less-plugin-autoprefix --save-dev 

Gruntfile.js

module.exports = function(grunt) { 
    "use strict"; 
    var gruntConfig = { 
    less : { 
     options : { 
     plugins : [ new (require('less-plugin-autoprefix'))({browsers : [ "last 2 versions" ]}) ] 
     }, 
     main : { 
     files: { 
      'src/css/desktop/bootstrap-theme.css' : 'src/less/desktop/bootstrap-theme.less', 
      'src/css/desktop/company.css' : 'src/less/desktop/company.less', 
      'src/css/desktop/index.css' : 'src/less/desktop/index.less', 
      'src/css/desktop/login.css' : 'src/less/desktop/login.less' 
     } 
     } 
    } 
    }; 

    grunt.initConfig(gruntConfig); 
    grunt.loadNpmTasks('grunt-contrib-less'); 
    grunt.registerTask('default', [ 'less' ]); 
};