web-dev-qa-db-fra.com

Comment renommer des fichiers avec Grunt, en fonction du nom du dossier parent du fichier respectif?

J'ai la structure suivante:

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

J'aimerais lancer une tâche difficile pour les copier dans la structure suivante:

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

Y at-il un moyen de faire cela avec un plugin grunt existant? Sinon, comment pourrais-je y parvenir?

50
keirog

Cela peut être fait en utilisant grunt-contrib-copy plugin.

La principale chose à noter est que vous pouvez modifier la destination par programme en utilisant une fonction de changement de nom (qui prend la destination et la source de chaque fichier).

Voici un exemple (un peu fragile) Gruntfile.js qui devrait être copié dans la structure souhaitée:

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

Il n'est plus nécessaire d'utiliser grunt-contrib-copy uniquement pour cela, vous pouvez maintenant tirer parti de grunt.file.expandMapping qui propose des options pour modifier simplement l'extension du fichier ou pour définir une fonction qui renvoie le nom du fichier de sortie.

Voici un exemple d'objet files dans une tâche jade pour compiler des modèles .jade en fichiers .html:

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');
    }
}]

Il aurait été plus facile d'utiliser l'option ext: '.html' au lieu de l'option rename dans ce cas, mais j'utilise rename ici pour que vous puissiez voir comment cela fonctionne.

Plus d’informations sur les options ext et rename (et autres) dans les documents grunt.file . Quelques exemples supplémentaires ici et ici .

5
tobek

Vous pouvez simplement utiliser les options: Expand: true, Flatten: true

Pas besoin de rappels de renommage personnalisés.

2
Paul0515

Pas exactement une réponse à votre question mais je l'ai fait ici à la recherche de dossiers relatifs dest avec grunt alors ... Voici comment je l'ai résolu

...
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);
      }
    },
  ],
}
...

Ce petit peu path.join(expand.cwd, src.dir, dest, src.base); crée juste le chemin dont j'ai besoin.

expand.cwd = app/design/frontend/

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

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

src.base = <FILE>.html

et tous ensemble il = app/design/frontend/<COMPANY>/<MAIN-THEME>/Magento_Sales/email/<FILE>.html

et dans ma situation, il va maintenant compiler mes emails HTML dans des dossiers de destination relatifs

0
James Harrington