web-dev-qa-db-ja.com

複数のソースと複数の宛先でGulpタスクを使用できますか？

Gulpfile.jsに次のものがあります。

   var sass_paths = [
        './httpdocs-site1/media/sass/**/*.scss',
        './httpdocs-site2/media/sass/**/*.scss',
        './httpdocs-site3/media/sass/**/*.scss'
    ];

gulp.task('sass', function() {
    return gulp.src(sass_paths)
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer('last 4 version'))
        .pipe(minifyCSS({keepBreaks:true}))
        .pipe(rename({ suffix: '.min'}))
        .pipe(gulp.dest(???));
});

縮小したcssファイルを次のパスに出力したいと思います。

./httpdocs-site1/media/css
./httpdocs-site2/media/css
./httpdocs-site3/media/css

発信元/宛先の使用方法を誤解していますか？それとも、1つのタスクで多くのことを達成しようとしていますか？

編集：対応するサイトディレクトリへの出力パスを更新しました。

javascriptnode.jsgulp
40
David Angel

フォルダごとのタスクの実行 レシピが役立つと思います。

更新

レシピのアイデアに従って、アイデアを与えるためだけにサンプルを単純化します。これは解決策になります。

var gulp = require('gulp'),
    path = require('path'),
    merge = require('merge-stream');

var folders = ['httpdocs-site1', 'httpdocs-site2', 'httpdocs-site3'];

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

    var tasks = folders.map(function(element){
        return gulp.src(element + '/media/sass/**/*.scss', {base: element + '/media/sass'})
            // ... other steps ...
            .pipe(gulp.dest(element + '/media/css'));
    });

    return merge(tasks);
});
57
Ghidello

複数のsrcを使用する場合は、マージストリームを使用する必要がありますが、同じsrc内に複数の宛先を設定できます。以下に例を示します。

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


gulp.task('sass', function() {
   var firstPath = gulp.src(sass_paths[0])
               .pipe(sass({errLogToConsole: true}))
               .pipe(autoprefixer('last 4 version'))
               .pipe(minifyCSS({keepBreaks:true}))
               .pipe(rename({ suffix: '.min'}))
               .pipe(gulp.dest('./httpdocs-site1/media/css'))
               .pipe(gulp.dest('./httpdocs-site2/media/css'));
   var secondPath = gulp.src(sass_paths[1])
               .pipe(sass({errLogToConsole: true}))
               .pipe(autoprefixer('last 4 version'))
               .pipe(minifyCSS({keepBreaks:true}))
               .pipe(rename({ suffix: '.min'}))
               .pipe(gulp.dest('./httpdocs-site1/media/css'))
               .pipe(gulp.dest('./httpdocs-site2/media/css'));
   return merge(firstPath, secondPath);
});

ここでは異なるパスをパイプしてサイト1とサイト2が必要であると想定しましたが、必要な数の場所でこれを行うことができます。また、たとえば、.minファイルを含むdestと持たないdestが必要な場合、ステップの前にdestを指定できます。

10
ckross01

gulp-rename を使用して、ファイルが書き込まれる場所を変更できます。

gulp.task('sass', function() {
    return gulp.src(sass_paths, { base: '.' })
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer('last 4 version'))
        .pipe(minifyCSS({keepBreaks:true}))
        .pipe(rename(function(path) {
            path.dirname = path.dirname.replace('/sass', '/css');
            path.extname = '.min.css';
        }))
        .pipe(gulp.dest('.'));
});

重要なビット：gulp.srcでbaseオプションを使用します。

5
Heikki

Common/specifics cssファイルをどのように処理できるかを自問する（スクリプトでも同じように機能する）場合、この問題に対処するための可能な出力を次に示します。

var gulp = require('gulp');
var concat = require('gulp-concat');
var css = require('gulp-clean-css');

var sheets = [
    { src : 'public/css/home/*', name : 'home.min', dest : 'public/css/compressed' },
    { src : 'public/css/about/*', name : 'about.min', dest : 'public/css/compressed' }
];

var common = {
    'materialize' : 'public/assets/materialize/css/materialize.css'
};

gulp.task('css', function() {
    sheets.map(function(file) {
        return gulp.src([
            common.materialize, 
            file.src + '.css', 
            file.src + '.scss', 
            file.src + '.less'
        ])
        .pipe( concat(file.name + '.css') )
        .pipe( css() )
        .pipe( gulp.dest(file.dest) )
    }); 
});

今やらなければならないのは、オブジェクト表記法が構築されたときにシートを追加することです。

追加のcommonsスクリプトがある場合は、オブジェクトcommonに名前でマップし、この例のマテリアライズ後、ただしfile.src + '.css'の前に追加できます。税関ファイル。

src属性には、次のようなパスを含めることもできます。

'public/css/**/*.css'

子孫全体をスコープする。

4
Anwar

余計なものを必要とせずに成功しました。ソリューションは Anwar Nairi's

const p = {
  dashboard: {
    css: {
      orig: ['public/dashboard/scss/style.scss', 'public/dashboard/styles/*.css'],
      dest: 'public/dashboard/css/',
    },
  },
  public: {
    css: {
      orig: ['public/styles/custom.scss', 'public/styles/*.css'],
      dest: 'public/css/',
    },
    js: {
      orig: ['public/javascript/*.js'],
      dest: 'public/js/',
    },
  },
};

gulp.task('default', function(done) {
  Object.keys(p).forEach(val => {
    // 'val' will go two rounds, as 'dashboard' and as 'public'
    return gulp
      .src(p[val].css.orig)
      .pipe(sourcemaps.init())
      .pipe(sass())
      .pipe(autoPrefixer())
      .pipe(cssComb())
      .pipe(cmq({ log: true }))
      .pipe(concat('main.css'))
      .pipe(cleanCss())
      .pipe(sourcemaps.write())
      .pipe(gulp.dest(p[val].css.dest))
      .pipe(reload({ stream: true }));
  });
  done(); // <-- to avoid async problems using gulp 4
});
0
Carles Alcolea

gulp-ifを使用すると、非常に役立ちます。

Gulp-ifの最初の引数。 gulp-matchの2番目の引数condition

gulp-ifは gulp-if にあります

import {task, src, dest} from 'gulp';
import VinylFile = require("vinyl");
const gulpif = require('gulp-if');

src(['foo/*/**/*.md', 'bar/*.md'])
    .pipe(gulpif((file: VinylFile) => /foo\/$/.test(file.base), dest('dist/docs/overview')))
    .pipe(gulpif((file: VinylFile) => /bar\/$/.test(file.base), dest('dist/docs/guides')))
});
0
xsilen T