Grunt Modul Compass

[Marck]

Hiho,

ich bin noch relativ neu in Grunt und hoffe, dass ich hier auf ein paar erfahrene User treffe, die mir vielleicht weiterhelfen können. Ich möchte gerne Grunt zusammen mit Sass verwenden und dabei nicht auf die Helper von Compass verzichten. Nun gibt es da ein Modul namens "grunt-contrib-sass", welches die Option "compass: true" anbietet aber leider nicht funzt. Laut stackoverflow liegt es daran, dass die aktuelle Compass Version 0.12.6 quasi noch pre-release ist. Abhilfe würde ein "gem install compass --pre", was in meinem Fall aber aus diversen Gründen keine Option ist.

Aus dem Grunde habe ich das Modul "grunt-contrib-compass" installiert, welches auch funktioniert, kämpfe jetzt allerdings mit der Asset Pipeline, weil ich unterschiedliche Pfade für Development und Production verwenden will.

Im konkreten Fall geht es darum, wie ich Background-Images in Sass Files unter Verwendung des URL-Helpers durchreichen kann. Mein gekürzter Grunt Task sieht so aus:

compass: {
  dev: {
    options: {
    imagesDir: 'app/assets/img',
    relativeAssets: true
    }
  },
  dist: {
    options: {
    // Bilder sollen nach production/img
      environment: 'production'
    }
  }
}

Wenn ich jetzt grunt compass:dev aufrufe, wird der Sass Code so kompiliert:

/* Sass */
.foo {
  background-image: image-url('book.png');
}

/* CSS */
.foo {
  background-image: url('../app/assets/img/book.png?1349958924');
}

Auf Production soll der Pfad zum Bild allerdings nicht mehr ../app/assets/img sondern nur ./img oder img lauten. Hat jemand dazu vielleicht einen Ratschlag? Ich bin bei Google nicht fündig geworden.

[lottikarotti]

Hallöchen,

wirf mal einen Blick darauf: http://stackoverflow.com/questions/1...d-environments

Viele Grüße,
lotti

[Marck]

Hallo Lotti,

ich weiß, wie man environment-abhängige Tasks mit Grunt durchführt. Bei meiner Frage geht es aber um ein environment-abhängiges Path Replacement innerhalb des Sass Files für den Helper image-url(). Aus background:url('app/assets/images/picture.png?007') in Development soll background:url('img/picture.png?007') auf Production werden.

Quasi so etwas hier:

compass: {
  dist: {
    options: {
      imagesDir: "app/assets/images",

      /* Pseudo Code */
      imagesPathReplace: ["/img", "app/assets/images"]
    }
  }
}

Das Node Module bietet dafür keine Methode an, aber es muss doch einen Weg geben, das mit Hilfe einer Config zu lösen. Es ist doch nicht unüblich, unterschiedliche Verzeichnisstrukturen auf Development, Staging und Production zu haben.

Hinzufügen möchte ich noch, dass mir etwaige Rails Helper nicht zur Verfügung stehen, weil ich hier eine generische Boilerplate für Frontend Development zusammenstellen will, die ohne MVC Framework auskommt.

[lottikarotti]

Hallöchen,

du könntest für deine Pfade Platzhalter verwenden und diese bspw. mit grunt-replace ersetzen. Für die development-production Weiche liese sich das vermutlich ganz gut mit grunt-config kombinieren.

Viele Grüße,
lotti

[Marck]

Hallo Lotti,

danke für die Tipps. Mir ist aber zwischenzeitlich ein Workaround eingefallen. Anstatt Pfade zu replacen, kopiere ich die Bilder in den Zielordner, bevor ich compass:dist starte, oder genauer formuliert lasse ich einen imagemin Task laufen, der die Bilder von app/assets/images nach production/images kopiert und sie dabei optimiert. Dann klappt es auch mit den unterschiedlichen Verzeichnisstrukturen für dev und dist.

imagemin: {
  dynamic: {
    files: [(
      cwd: "app/assets/images",
      dest: "production/images"
    )]
  }
}

compass: {
  dev: {
    options: {
      imagesDir: "app/assets/images"
    }
  },
  dist: {
    options: {
       imagesDir: "production/images"
    }
  }
}

Mich würde allerdings interessieren, ob das nun wirklich "Best Practice" ist oder normaler Weise anders gehandelt wird. Bin wie erwähnt noch neu in Grunt.