Verwenden eines Flags für einen bestimmten Ordner in Grunt zum Erstellen von

Question

Ich möchte jetzt, wenn es eine Möglichkeit gibt, bestimmte Dateien aus einem bestimmten Ordner beim Ausführen von Grunt zu laden.

Lassen Sie uns sagen, dass ich eine Ordnerstruktur haben, die wie folgt aussieht:

[html] 
[css] 
[js] 
[custom] 
    [X] x.css 
    [Y] y.css 
    [Z] z.css 

Ich versuche, meine Website für Client [X] zu bauen und brauchen einige benutzerdefinierte CSS ihre x.css Datei hinzufügen und Laden Sie einfach diesen zum Testen.

Was ich gerne tun könnte, ist meine grunt Aufgabe (gerade läuft es sass, jsx Compiler und spinnt einen localhost Server mit Liveload) und sagen grunt client-x.

Welche dann würde laden meine x.css-Datei und den gesamten Inhalt dieses Ordners, aber nicht verwenden Sie berühren Sie die [Y] und [Z] Ordner überhaupt.

Ist dies mit einem Task Runner möglich?

Answer 1

Also schaute ich auf Grunt dynamic dest location sass, die mein Problem anfänglich zu lösen schien, aber ich konnte es wirklich nicht so funktionieren lassen, wie ich es wollte, und es verwirrte meine bestehenden Grunt-Aufgaben, die ich bereits eingerichtet hatte.

Aber dann habe ich grunt options gefunden - dieser Parameter löste alle meine Probleme. Grunt-Datei unter:

module.exports = function(grunt) { 

      var theme = grunt.option('theme') 

      grunt.initConfig({ 
       concat: { 
        options: { 
         separator: 'rn' 
        }, 
        dist: { 
        files: { 
         'js/script.js': 'themes/' + theme + '/js/custom.js' 
        } 
        } 
       }, 
       watch: { 
        sass: { 
        files: ['themes/' + theme + '/**/*.{scss,sass}', 'themes/' + theme + '/_partials/**/*.{scss,sass}', 'sass/**/*.{scss,sass}', 'sass/_partials/**/*.{scss,sass}', 'themes/' + theme + '/js/custom.js'], 
        tasks: ['sass:dist', 'shell:upload', 'concat:dist'], 
        options: { 
         livereload: true, 
        }, 
        }, 
        livereload: { 
        files: ['*.vm', 'js/*.{js,json}', 'css/*.css','images/*.{png,jpg,jpeg,gif,webp,svg}', 'themes/' + theme + '/js/custom.js'], 
        options: { 
         livereload: true, 
         debounceDelay: 2000 
        } 
        } 
       }, 
       sass: { 
       options: { 
        sourceMap: true, 
        outputStyle: 'nested' 
       }, 
       dist: { 
        files: { 
         'css/lyria.css': 'themes/' + theme + '/styles.scss' 
        } 
       } 
       }, 
       shell: { 
       options: { 
        stdout: true, 
        stderr: true 
       }, 
       upload: { 
        command: './theme-uploader.sh' 
       } 
       }, 
      }) 

      grunt.loadNpmTasks('grunt-contrib-concat'); 
      grunt.loadNpmTasks('grunt-contrib-watch'); 
      grunt.loadNpmTasks('grunt-sass'); 
      grunt.loadNpmTasks('grunt-shell'); 

      grunt.registerTask('default', [ 
       'sass:dist', 
       'concat', 
       'shell:upload', 
       'watch' 
      ]); 

     }; 

Wie Sie das Thema Parameter als Argument für die Grunzen Default-Task verwendet wird, sehen kann, die dann die richtigen Dateien an die richtige Stelle kompiliert. Wenn ich grunt --theme = x starte, überwacht und kompiliert er die entsprechenden Ordner in diesem spezifischen Verzeichnis, die von meinen verschiedenen Aufgaben eingerichtet wurden.

Der Grund für dieses Setup ist, dass ich verschiedene untergeordnete Themen für verschiedene Clients in demselben Repository entwickeln und verwalten. Ich muss in der Lage sein, ein kundenspezifisches Glas mit ihren entsprechenden stylesheets und kundenspezifischen js zu erzeugen.

Auf diese Weise bekomme ich alle meine Verzeichnisse in der gleichen Repo und nur angeben, wenn Sie meine Grunt Aufgabe, die Client-Ordner, um die CSS aus zu bekommen.