2015-12-05 3 views
1

я следующие структуры SCSS файловCompile SASS в нескольких каталогах одинаковой структуры с помощью глотка

/modules/core/scss/core.scss 
/modules/blog/scss/blog.scss 

Я теперь мой Глоток файл, как это:

gulp.task('sass', function() { 
    gulp.src('./modules/*/scss/**/*.scss') 
    .pipe(sass().on('error', sass.logError)) 
    .pipe(gulp.dest('./modules')); 
}) 

, конечно, производит тот же каталог.

Есть ли способ скомпилировать те, которые используют глоток, используя один канал? Мне нужно привести как так (изменение к СКС CSS):

/modules/core/css/core.scss 
/modules/blog/css/blog.scss 

модули динамически добавляется, поэтому я не могу добавить одну трубу для каждого модуля.

ответ

1

Gulp имеет recipe in its documentation для этого сценария.

Копирование/вставка только в случае, если:


Создание файла в папке

Если у вас есть набор папок, и хотите выполнить ряд задач на каждом, например .. .

/scripts 
/scripts/jquery/*.js 
/scripts/angularjs/*.js 

... и хотите, чтобы в конечном итоге ...

/scripts 
/scripts/jquery.min.js 
/scripts/angularjs.min.js 

... вам нужно сделать что-то вроде следующих ...

var fs = require('fs'); 
var path = require('path'); 
var merge = require('merge-stream'); 
var gulp = require('gulp'); 
var concat = require('gulp-concat'); 
var rename = require('gulp-rename'); 
var uglify = require('gulp-uglify'); 

var scriptsPath = 'src/scripts'; 

function getFolders(dir) { 
    return fs.readdirSync(dir) 
     .filter(function(file) { 
     return fs.statSync(path.join(dir, file)).isDirectory(); 
     }); 
} 

gulp.task('scripts', function() { 
    var folders = getFolders(scriptsPath); 

    var tasks = folders.map(function(folder) { 
     // concat into foldername.js 
     // write to output 
     // minify 
     // rename to folder.min.js 
     // write to output again 
     return gulp.src(path.join(scriptsPath, folder, '/**/*.js')) 
     .pipe(concat(folder + '.js')) 
     .pipe(gulp.dest(scriptsPath)) 
     .pipe(uglify()) 
     .pipe(rename(folder + '.min.js')) 
     .pipe(gulp.dest(scriptsPath)); 
    }); 

    // process all remaining files in scriptsPath root into main.js and main.min.js files 
    var root = gulp.src(path.join(scriptsPath, '/*.js')) 
     .pipe(concat('main.js')) 
     .pipe(gulp.dest(scriptsPath)) 
     .pipe(uglify()) 
     .pipe(rename('main.min.js')) 
     .pipe(gulp.dest(scriptsPath)); 

    return merge(tasks, root); 
}); 

Несколько примечаний:

  • folders.map - один раз выполняет функцию в папке, и возвращает поток асинхронной
  • merge - объединяет потоки и концы, только когда все потоки испускают конец
Смежные вопросы