Gulp

Question

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

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

wp-content/plugins/pluginname

assets

dist -

src - scss

GULP 任务

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 输出到 'dist' 文件夹？

Answer 1

将 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

Answer 2

我不清楚你想用合并做什么（所以注意我简化了那些）但是这里有一些东西可以帮助你把你的结果放到你想要的 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（函数...路径操作）。

Gulp - 监视多个文件夹并输出到相对 dist 文件夹

Gulp - Watch multiple folders and output to relative dist folder

gulp-sass