Как я могу заставить автоматически запускать автопрефиксер «меньше ворчания»?

У меня есть рабочий Gruntfile с less и автопрефиксером. У меня тоже "хрюкающие часы" работают нормально.

До того, как я использовал автопрефиксер, я использовал меньше миксинов для префиксов поставщиков. Запуск 'grunt less' создаст работающий CSS со всеми моими префиксами.

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

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

Я прочитал документацию и знаю, что могу добавить дополнительную задачу для выполнения обеих этих задач. Однако:

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

То есть, я просто хочу, чтобы grunt less создавал рабочий 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
        }
      }
    },

  });


};

javascript less gruntjs vendor-prefix
person mikemaccana    schedule 04.12.2013    source источник

Ответы (2)


arrow_upward
8
arrow_downward

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

Например, вы можете разветвить 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, генерация веб-шрифтов и т. д. Просто скажите другим в вашей команде, чтобы они выполняли эти задачи, а не grunt less или grunt autoprefixer самостоятельно.

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

person Ben    schedule 04.12.2013
comment
Спасибо за ваш ответ, но, как было сказано в вопросе, я специально не хочу добавлять еще одну задачу. - person mikemaccana; 05.12.2013
comment
Задачи Grunt не знают о других задачах Grunt, вам придется написать пользовательскую функцию задачи, которая могла бы устанавливать атрибуты как для задач less, так и для задач autoprefixer, а затем иметь только один блок конфигурации (не рекомендуется, потребуется хотя бы несколько часов). Весь смысл псевдонимов заключается в том, чтобы решить эту проблему за вас, и это самый простой и лучший способ сделать это. Я не уверен, почему вы так против этого, но именно так работает Grunt. - person Ben; 05.12.2013
comment
Я не уверен, почему вы так против этого - причины, по которым я не хочу выполнять еще одну задачу, указаны в пунктах вопроса. - person mikemaccana; 05.12.2013
comment
Тогда единственный ответ — разветвить grunt-contrib-less и добавить код для запуска автоматического префикса непосредственно в задачу, примерно здесь: github.com/gruntjs/grunt-contrib-less/blob/master/tasks/ — вставьте эту строку здесь github.com/nDmitry/grunt-autoprefixer/blob/master/tasks/ и затем используйте свой форк вместо официального плагина. Или используйте Gulp, у которого гораздо более простой стиль настройки, чем у Grunt — github.com/wearefractal/gulp — но выходит за рамки этого вопроса. - person Ben; 05.12.2013
comment
Спасибо. Если вы используете это как основной ответ (я согласен с «ворчанием не могу этого сделать», если это правильно), я отмечу его как принятый ответ. - person mikemaccana; 05.12.2013
comment
Хорошо, я сделал это. Я упомянул Gulp, который все еще находится на ранних стадиях разработки, но конфигурация ближе к тому, что вы упомянули: в Gulp вы должны зарегистрировать только одну задачу, чтобы делать меньше, автопрефиксы и т. д. - никакой конфигурации, только код. Однако эти плагины еще не написаны, так что это пока не замена. - person Ben; 05.12.2013

arrow_upward
10
arrow_downward

Для использования автопрефиксера в качестве плагина для LESS необходимо установить npm-пакет less- плагин-автопрефикс:

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' ]);
};
person Dunaevsky Maxim    schedule 24.02.2015
comment
Это работает, однако вам понадобится grunt-contrib-less 1.0.0 или выше для плагинов LESS. medium.com/@crisnoble/ хороший обзор. - person timbo; 25.02.2015