Question

我想使用gulp为我的自定义Wordpress插件编译SASS。

所有插件文件夹共享相同的文件夹结构：

可湿性粉剂内容/插件/ pluginname

资产


dist -

src - scss

GULP TASK

gulp.task('plugin-css', () => {
      // Main SASS Style Sheet
      const pluginSass = gulp.src(`wp-content/plugins/**/assets/src/*.scss`)
        .pipe(plumber(plumberErrorHandler))
        .pipe(sass());

      // Merge the two streams and concatenate their contents into a single file
      return merge(pluginSass)
        .pipe(autoprefixer())
        .pipe(cssmin())
        .pipe(gulp.dest(function(file) {
        return file.base;
      }));
    });

目前我编译的css文件正在输出到与src sass相同的文件夹中。如何将编译后的sass输出到＆＃39; dist＆＃39;文件夹？

Answer 1

我不清楚你要对合并做什么（所以注意我简化了那些）但是这里应该有助于你将结果放到你想要的dist文件夹中：

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

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

  const pluginSass = gulp.src("wp-content/plugins/**/assets/src/*.scss")
    .pipe(sass())

    // return merge(pluginSass)

   .pipe(rename(function (file) {
      var temp = path.dirname(file.dirname);
      console.log('temp = ' + temp);
      file.dirname = path.join(temp, "dist");
      console.log("file.dirname = " + file.dirname);
    }))

    .pipe(cssmin())

    // .pipe(autoprefixer())

  .pipe(gulp.dest("wp-content/plugins"));
});

gulp-rename对这些情况很有用，并且似乎总是更容易使用gulp.dest（函数...路径操作）。

Answer 2

将dist文件夹传递给gulp.dest功能。

const path = require('path')

return merge(pluginSass)
  .pipe(autoprefixer())
  .pipe(cssmin())
  .pipe(gulp.dest(function (file) {
    return path.join(file.base, './dist') // ← Put your folder path here
  }));

请参阅此处的文档：https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpdestpath-options

Gulp - 观看多个文件夹并输出到相对dist文件夹

2 个答案: