使用Gulp.js和globbing模式修改文件(相同的dest)

时间:2014-04-23 14:39:18

标签: javascript node.js sass gulp

我有一个gulp任务,试图将.scss文件转换为.css文件(使用gulp-ruby-sass),然后将生成的.css文件放在它找到原始文件的相同位置。问题是,因为我使用的是通配模式,所以我不一定知道原始文件的存储位置。

在下面的代码中,我尝试使用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文件似乎放在一个比我预期更高的目录中。它应该是project/sass/partials,结果文件路径只是project/partials

如果有一个更简单的方法,我肯定会更加欣赏这个解决方案。谢谢!

5 个答案:

答案 0 :(得分:145)

如你所料,你这太复杂了。目标不需要是动态的,因为全局路径也用于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("./"));

答案 1 :(得分:60)

这比数字1311407更为简单。您根本不需要指定目标文件夹,只需使用.即可。另外,请务必设置基目录。

gulp.src("sass/**/*.scss", { base: "./" })
    .pipe(sass())
    .pipe(gulp.dest("."));

答案 2 :(得分:26)

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

最初在这里给出答案:https://stackoverflow.com/a/29817916/3834540

我知道这个帖子已经老了,但它仍然显示为google上的第一个结果,所以我想我也可以在这里发布链接。

答案 3 :(得分:0)

这非常有帮助!

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(".")); 
    });
})

答案 4 :(得分:0)

如果要将所有文件保存在dist文件夹中的自己的路径中

<cfloop from="1" to="#arrayLen(ads)#" index="i" step="1">
     <cfset ads[i]["newprop"] = newpropvalue>
</cfloop>