Question

我使用gulp-sass，gulp-sourcemaps，browsersync和我有sass样式表的硬文件夹结构的项目。现在任务看起来像这样：

gulp.task('sass', function () {
  // bootstrap compilation
    gulp.src('./sass/bootstrap.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass'}))
  .pipe(gulp.dest('./assets/global/plugins/bootstrap/css/'))

  // global theme stylesheet compilation
    gulp.src('./sass/global/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/global'}))
  .pipe(gulp.dest('./assets/global/css'))

  gulp.src('./sass/apps/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/apps'}))
  .pipe(gulp.dest('./assets/apps/css'))

  gulp.src('./sass/pages/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/pages'}))
  .pipe(gulp.dest('./assets/pages/css'))

  // theme layouts compilation
  gulp.src('./sass/layouts/layout4/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/layouts/layout4'}))
  .pipe(gulp.dest('./assets/layouts/layout4/css'))

  gulp.src('./sass/layouts/layout4/themes/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(sourcemaps.write('.', {includeContent: true, sourceRoot: '/sass/layouts/layout4/themes'}))
  .pipe(gulp.dest('./assets/layouts/layout4/css/themes'))
});

但我认为这项任务可能更简单。谢谢。

Answer 1

您应该能够通过仅定义每个*.scss处理步骤来缩短代码并提高其可维护性。

包含*.scss文件的源目录遵循相同的模式，除了第一个和最后一个：

source files:     './sass/{path}/*.scss'
source maps root: '/sass/{path}'
destination root: './assets/{path}/css'

{path}是源路径核心 - ＆＃34;全球＆＃34;，＆＃34;布局/布局4＆＃34;如何将路径核心存储在一个数组中并通过本地函数处理数组？

例如，让我们使用一个对象数组，其中src键是源路径核心，可选dest键可以覆盖默认目标根模式：

var merge = require('merge-stream');

gulp.task('sass', function () {
  // src: './sass/{src}/*.scss', sourceRoot: '/sass/{src}'
  // dest: './assets/{dest}', default './assets/{src}/css'
  var stylesheets = [
        {src: '', dest: '/global/plugins/bootstrap/css'},
        {src: '/global'},
        {src: '/apps'},
        {src: '/pages'},
        {src: '/layouts/layout4'},
        {src: '/layouts/layout4/themes', dest: '/layouts/layout4/css/themes'}
      ],
      streams = stylesheets.map(function (stylesheet) {
        var src = stylesheet.src,
            dest = stylesheet.dest || src + '/css';
        return gulp.src('./sass' + src + '/*.scss')
          .pipe(sourcemaps.init())
          .pipe(sass().on('error', sass.logError))
          .pipe(sourcemaps.write('.', {
            includeContent: true,
            sourceRoot: '/sass' + src
          }))
          .pipe(gulp.dest('./assets' + dest + '/'));
      });
  return merge.apply(this, streams);
});

其他改进：如果您不希望*.scss文件中的错误导致gulp任务链崩溃，您应该听到＆＃34;错误＆＃34; gulp-sass插件的事件。如果您想使gulp任务可链接，您应该返回上一次pipe()调用的结果。

整合gulp-livereload，gulp-minify-css或gulp-autoprefixer等任务只需要在链中添加适当的pipe()调用，所有文件都会受到影响。

更新：修复使用merge-stream模块返回一个流处理来自任务的所有文件的流。 .pipe()次调用的序列不能由另一个.src()起始链继续。单个样式表不会按顺序生成，但调用者将能够等待所有样式表生成。

如何简化Gulp任务的硬文件夹结构？

1 个答案: