web-dev-qa-db-ja.com

Gulp.jsとグロビングパターンを使用して、ファイルを同じ場所（同じ宛先）に変更します

.scssファイルを.cssファイルに変換し（gulp-Ruby-sassを使用）、作成された.cssファイルを元のファイルと同じ場所に配置しようとするgulpタスクがあります。問題は、グロビングパターンを使用しているため、元のファイルの保存場所が必ずしもわからないことです。

以下のコードでは、gulp-tapを使用してストリームにアクセスし、ストリームが読み取られた現在のファイルのファイルパスを把握しようとしています。

gulp.task('convertSass', function() {
    var fileLocation = "";
    gulp.src("sass/**/*.scss")
        .pipe(sass())
        .pipe(tap(function(file,t){
            fileLocation = path.dirname(file.path);
            console.log(fileLocation);
        }))
        .pipe(gulp.dest(fileLocation));
});

console.log(fileLocation)の出力に基づいて、このコードは問題なく動作するようです。ただし、結果のCSSファイルは、予想より1つ上のディレクトリに配置されているようです。 project/sass/partialsである必要がある場合、結果のファイルパスはproject/partialsになります。

これを行うためのはるかに簡単な方法がある場合、私は間違いなくそのソリューションをさらに感謝します。ありがとう！

javascriptnode.jssassgulp
95
Dan-Nolan

あなたが疑ったように、あなたはこれをあまりにも複雑にしています。グロブ化されたパスはdestにも使用されるため、宛先は動的である必要はありません。 srcをグロブしているのと同じベースディレクトリにパイプするだけです。この場合は「sass」です。

gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest("sass"));

ファイルに共通のベースがなく、パスの配列を渡す必要がある場合、これはもはや十分ではありません。この場合、ベースオプションを指定する必要があります。

var paths = [
  "sass/**/*.scss", 
  "vendor/sass/**/*.scss"
];
gulp.src(paths, {base: "./"})
  .pipe(sass())
  .pipe(gulp.dest("./"));
148
numbers1311407

これは、numbers1311407が導いたよりも簡単です。宛先フォルダーを指定する必要はまったくなく、単に.を使用します。また、必ずベースディレクトリを設定してください。

gulp.src("sass/**/*.scss", { base: "./" })
    .pipe(sass())
    .pipe(gulp.dest("."));
62
NightOwl888
gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest(function(file) {
    return file.base;
  }));

もともとここに与えられた答え： https://stackoverflow.com/a/29817916/383454 。

私はこのスレッドが古いことを知っていますが、まだグーグルで最初の結果として表示されているので、ここにリンクを投稿することも考えました。

28
bobbarebygg

これはとても役に立ちました！

gulp.task("default", function(){

    //sass
    gulp.watch([srcPath + '.scss', '!'+ srcPath +'min.scss']).on("change", function(file) {
         console.log("Compiling SASS File: " + file.path)
         return gulp.src(file.path, { base: "./" })
        .pipe(sass({style: 'compressed'}))
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.init())
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write('./'))         
        .pipe(gulp.dest(".")); 
    });

    //scripts
    gulp.watch([srcPath + '.js','!'+ srcPath + 'min.js']).on("change", function(file) {
        console.log("Compiling JS File: " + file.path)
        gulp.src(file.path, { base: "./" })
        .pipe(uglify())
        .pipe(rename({suffix: '.min'}))       
        .pipe(gulp.dest(".")); 
    });
})
0
mftohfa