1

我使用 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'))
});

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

4

1 回答 1

1

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

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

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

源路径核心在哪里{path}- “global”、“layouts/layout4”等。如何将路径核心存储在数组中并通过本地函数处理数组？

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

集成任务gulp-livereload，gulp-minify-css或者gulp-autoprefixer只是将适当的pipe()调用添加到链中的问题，所有文件都会受到影响。

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

于 2015-12-28T14:25:45.590 回答