webentwicklung-frage-antwort-db.com.de

Wie kann ich Dateien mit Grunt umbenennen, basierend auf dem Namen des übergeordneten Ordners der jeweiligen Datei?

Ich habe folgende Struktur:

src/
    modules/
        module1/
            js/
                main.js
            scss/
                main.scss
            index.html
        module2/
            js/
                main.js
            scss/
                main.scss
            index.html

Ich möchte eine grunzige Aufgabe ausführen, um diese in die folgende Struktur zu kopieren:

dev/
    js/
        module1.js
        module2.js
    css/
        module1.css
        module2.css
    module1.html
    module2.html

Gibt es eine Möglichkeit, dies mit einem vorhandenen Grunt-Plugin zu tun? Wenn nicht, wie könnte ich das erreichen?

gruntjsparent-childrenamebuild-automation
50
keirog

Dies kann mit dem grunt-contrib-copy plugin erfolgen.

Beachten Sie vor allem, dass Sie das Ziel programmatisch ändern können, indem Sie eine Umbenennungsfunktion verwenden (die das Ziel und die Quelle jeder Datei übernimmt).

Hier ist eine (etwas spröde) Probe Gruntfile.js, die in die gewünschte Struktur kopiert werden sollte:

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    copy: {
      main: {
        files: [
          {
            expand: true, 
            cwd: 'src/modules/', 
            src: ['**/*.js'], 
            dest: 'dev/js/', 
            rename: function(dest, src) {
              // use the source directory to create the file
              // example with your directory structure
              //   dest = 'dev/js/'
              //   src = 'module1/js/main.js'
              return dest + src.substring(0, src.indexOf('/')) + '.js';
            }
          },
          {
            expand: true, 
            cwd: 'src/modules/', 
            src: ['**/*.scss'], 
            dest: 'dev/css/', 
            rename: function(dest, src) {
              return dest + src.substring(0, src.indexOf('/')) + '.css';
            }
          },
          {
            expand: true, 
            cwd: 'src/modules/', 
            src: ['**/*.html'], 
            dest: 'dev/', 
            rename: function(dest, src) {
              return dest + src.substring(0, src.indexOf('/')) + '.html';
            }
          }
        ]
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-copy');

  // Default task(s).
  grunt.registerTask('default', ['copy']);
};
85
Gloopy

Sie müssen grunt-contrib-copy nicht mehr nur für diese Zwecke verwenden, Sie können jetzt grunt.file.expandMapping nutzen, das Optionen zum Ändern der Dateierweiterung oder zum Definieren einer Funktion enthält, die den Dateinamen der Ausgabe zurückgibt.

Hier ein Beispiel eines files-Objekts in einer jade-Task zum Kompilieren von .jade-Vorlagen in .html-Dateien:

files: [{
    expand: true, 
    src: "**/*.jade", 
    dest: "<%= distDir %>", 
    cwd: "<%= assetsDir %>/jade", 
    rename: function(dest, matchedSrcPath, options) {
        // return the destination path and filename:
        return (dest + matchedSrcPath).replace('.jade', '.html');
    }
}]

In diesem Fall wäre es einfacher gewesen, die Option ext: '.html' anstelle der Option rename zu verwenden. Ich verwende hier jedoch rename, damit Sie sehen können, wie es funktioniert.

Weitere Informationen zu den Optionen ext und rename (und anderen) finden Sie in den Dokumenten der Datei grunt.file . Einige weitere Beispiele hier und hier .

5
tobek

Sie können einfach die Optionen verwenden: Expand: true, Flatten: true

Keine benutzerdefinierten Umbenennungsrückrufe erforderlich.

2
Paul0515

Nicht gerade eine Antwort auf deine Frage aber ich habe es hier auf der Suche nach relativen Zielordnern mit Grunzen gemacht so ... Hier ist, wie ich es gelöst habe

...
base: {
  files:
  [
    {
      expand: true,
      cwd: 'app/design/frontend/',
      src: ['**/Magento_Sales/email-src/*.html'],
      dest: '../../Magento_Sales/email/',
      rename: function(dest, src, expand) {
        src = path.parse(src)
        return path.join(expand.cwd, src.dir, dest, src.base);
      }
    },
  ],
}
...

Dieses bisschen path.join(expand.cwd, src.dir, dest, src.base);, das gerade den Pfad erstellt, den ich brauche.

expand.cwd = app/design/frontend/

src.dir = <DYNAMIC_FOLDERS>/Magento_Sales/email-src/

dest = ../../Magento_Sales/email/

src.base = <FILE>.html

und alles zusammen it = app/design/frontend/<COMPANY>/<MAIN-THEME>/Magento_Sales/email/<FILE>.html

in meiner Situation kompiliert es nun meine HTML-E-Mails in relativen Zielordnern

0
James Harrington