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

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}是源路径核心-"全局"、"布局/布局4"等。将路径核心存储在阵列中并通过本地函数处理阵列如何？

例如，让我们使用一个对象数组，其中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文件中的错误导致gullow任务链崩溃，你应该监听gulp-sass插件的"错误"事件。如果你想让gullow任务可链接，你应该返回它最后一次pipe()调用的结果

集成像gulp-livereload、gulp-minify-css或gulp-autoprefixer这样的任务只需要向链添加适当的pipe()调用，所有文件都会受到影响。

UPDATE：修复了使用合并流模块返回一个流处理任务中的所有文件的问题。.pipe()调用的序列不能由另一个.src()启动链继续。单个样式表不会在序列中生成，但调用者可以等待所有样式表的生成。