Question

我试图创建一个gulp任务，为每个项目css创建（在这种情况下缩小）一个css文件。因此，对于项目A，它应该合并并缩小以下文件：

global.projecta.css
tool1.projecta.css
tool2.projecta.css

它需要一种循环或什么......？如果有一个新的项目D，它也应该构建它。如果我需要添加像＆＃34; projectd＆＃34;到一个数组，也没关系。

这是css的目录结构

./global.projecta.css
./global.projectb.css
./global.projectc.css

./addons/tool1.projecta.css
./addons/tool2.projecta.css
./addons/tool1.projectb.css
./addons/tool2.projectb.css
./addons/tool1.projectc.css
./addons/tool2.projectc.css

这是不可行的任务

// not working....
gulp.task('css', function() {
    return gulp.src(['global.*.css', 'addons/tool*.css', '!*.min.css'])
      .pipe(concat('build.css'))
      .pipe(rename({suffix: '.min'}))
      .pipe(minifycss())
      .pipe(gulp.dest('build/css'));
});

Answer 1

你可以试试这样的东西，虽然它需要手动输入你的项目数组。

gulp.task('css', function() {
    var projects = ['a','b','c'];
    projects.forEach( function(proj) {
        gulp.src(['global.' + proj + '.css', 'addons/tool*.' + proj + '.css', '!*.min.css'])
        ...
    });
});

Answer 2

这为每个全局项目输出不同的文件。对于每个global.project * .css将输出global.project * .min.css：

var gulp = require('gulp');
var css = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var glob = require('glob');


gulp.task('css', function() {

    glob('global.\*.css', {}, function (er, files) {

        for(var i = 0, cnt = files.length; i < cnt; i++){
            var fileName = files[i].replace('.css', '');
            gulp.src(['global.\*.css', 'addons/tool\*.css', '!*.min.css'])
              .pipe(concat('build.css'))
              .pipe(rename({basename: fileName, suffix: '.min'}))
              .pipe(css())
              .pipe(gulp.dest('build/css'));
        }
    });


});


gulp.task('default', ['css']);

Gulp任务为多个文件

2 个答案: