6

less と autoprefixer を備えた Gruntfile が動作しています。また、「うなり声」も正常に機能しています。

autoprefixer を使用する前は、ベンダー プレフィックスに使用する mixin が少なくなっていました。「grunt less」を実行すると、すべてのプレフィックスを使用して機能する CSS がビルドされます。

現在、autoprefixer はありますが、スタイルの 1 回限りのビルドを実行する場合は、'grunt less' を実行してから 'grunt autoprefixer' を実行して、プレフィックス付きの CSS を機能させる必要があります。

「grunt less」を変更して、ビルドが機能するようにするにはどうすればよいですか?

私はドキュメントを読みましたが、これらの両方を行うために追加のタスクを追加できることを知っています。でも：

  • 'grunt less' には、使用可能な出力がありません。タスクは常に使用可能な出力を生成する必要があります。
  • 「うなり声が少ない」と使用可能な出力が生成されないことを他の人に伝える必要はありません
  • 機能しないタスクを置き換えるために、追加のタスクは必要ありません。

つまり、動作する CSS (接頭辞付き) を生成するために grunt less が必要なだけです。

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
        }
      }
    },

  });


};
4

2 に答える 2

10

autoprefixer をLESSのプラグインとして使用するには、 npm-package less-plugin-autoprefix をインストールする必要があります:

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' ]);
};
于 2015-02-24T06:29:45.103 に答える
8

タスクは本質的にお互いを認識していないため、Grunt は質問で説明したことを実行できません。エイリアス (簡単) または関数 (もう少し制御が必要な場合) を使用してタスクを結合する必要がありますが、ソースを変更せずにこれらのタスクの1 つの動作を変更する方法はありません。

例として、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に挿入し、公式プラグインの代わりにフォークを使用します。

最も簡単で最良の方法は、これら 2 つのタスクを実行する新しいタスクを 1 つのコマンドで登録することです。

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

SASS コンパイル、JS concat + uglify、Web フォント生成など、自分のすべてのタスクでこれを行います。チームの他のメンバーに、これらのタスクを実行するgrunt lessかgrunt autoprefixer、単独で実行するかを指示するだけです。

さらに良いことに、私の Grunt プラグインで利用可能なタスクを使用してください。これ (およびフィルター構成) を使用すると、誰かが実行するたびに、タスクの縮小されたリストを作成できますが、入力を速くするためにgrunt availabletasksこれを でエイリアスすることを好みます。tasksあなたが私のようで、自動化のバグに悩まされている (そして Gruntfile に大量のプラグインを登録している) 場合、これは、タスクを実行する必要があるプロジェクトの初心者に本当に役立ちます。

于 2013-12-04T19:30:20.267 に答える