Gulp内のファイルのコピー先のパスを変更します

Question

すべてのファイルとフォルダをループし、対応するフォルダ内で連結/コンパイルする動的gulpタスクを作成しようとしました。

フォルダ構造は、例えば次のとおり テーマ/フレームワーク/モジュール/モジュール-1 /資産/ CSS/SCSS/SCSS-ファイル1.scss及びテーマ/フレームワーク/モジュール/モジュール-2 /資産/ CSS/SCSS/SCSS-ファイル2.scssなど

そして、ゴクゴクタスクが

gulp.task('modules-sass', function() { 
    return gulp.src([ 
     '../../framework/modules/**/assets/css/scss/*.scss' 
    ]) 
    .pipe(sourcemaps.init({loadMaps: true})) 
    .pipe(sassGlob()) 
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) 
    .pipe(sourcemaps.write('.', { 
     includeContent: false, 
     sourceRoot: function(file) { 
      return '../css'; 
     } 
    })) 
    .pipe(gulp.dest('../../framework/modules')); 
}); 

結果は次のとおりです。

theme/framework/modules/module-1/assets/css/scss/scss-file-1.css 
theme/framework/modules/module-1/assets/css/scss/scss-file-1.css.map 
theme/framework/modules/module-2/assets/css/scss/scss-file-2.css 
theme/framework/modules/module-2/assets/css/scss/scss-file-2.css.map 

しかし、scssの中にないcssフォルダの中にcssとmapファイルを入れたい！

はまた、私は、例えば、例えば

gulp.task('theme-modules-sass', function() { 
    return gulp.src([ 
     '../../framework/modules/**/assets/css/scss/*.scss' 
    ]) 
    .pipe(sourcemaps.init({loadMaps: true})) 
    .pipe(sassGlob()) 
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) 
    .pipe(sourcemaps.write('.', { 
     includeContent: false, 
     sourceRoot: function(file) { 
      return '../css'; 
     } 
    })) 
    .pipe(gulp.dest(function(file){ 
     var filePath = file.path; 
     var module = filePath.substring(filePath.indexOf('\\modules'), filePath.indexOf('\\assets')); 
     var moduleName = module.replace('\\modules\\', ''); 

     return '../../framework/modules/'+moduleName+'/assets/css/'; 
    })); 
}); 

の宛先の絶対パスを設定しかし、CSSフォルダ完全なファイル階層内部で作成飲み込むことを試み

テーマ/フレームワーク/モジュール/モジュール-1 /ソリューションのための資産/ CSS /モジュール-1 /資産/ CSS/SCSS/SCSS-ファイル1.css

おかげ

敬具、 ネナド

Answer 1

私はこれが何をしたいと考えています。 [これはmodulesディレクトリにある、あなたのgulpfile.jsのように見えます。]

// theme/framework/modules/module-1/assets/css/scss/scss-file-1.scss 
// theme/framework/modules/module-2/assets/css/scss/scss-file-2.scss 

var rename = require("gulp-rename"); 
var path = require("path"); 

gulp.task('modules-sass', function() { 
    return gulp.src([ 
     '../../framework/modules/**/assets/css/scss/*.scss' 
    ]) 
    .pipe(sourcemaps.init({loadMaps: true})) 
    .pipe(sassGlob()) 
    .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) 
    .pipe(sourcemaps.write('.', { 
     includeContent: false, 
     sourceRoot: function(file) { 
      return '../css'; 
     } 
    })) 

    .pipe(rename(function (file) { 
     // this removes the last parent directory of the relative file path 
     file.dirname = path.dirname(file.dirname); 
     console.log("file.dirname = " + file.dirname); 
    })) 

    .pipe(gulp.dest('../../framework/modules')); 
}); 

gulp-renameがうまくここに動作します。私は当初、 'myFile.css'のようなベースネームの名前を変更するだけだと考えましたが、ベース名を無視してディレクトリパスを操作することもできます。これは私たちがここでやることです。

file.dirnameのdirnameをとって、最後のディレクトリ名を削除します。