1

gulp js初心者です。

【問題】
srcフォルダのsccsがdestフォルダではなく、dest.rootフォルダの中にコンパイルされる
他のpugやcssなどはdestフォルダで出力されています。
パスの指定もsccsの時と同じ書き方です。


      return gulp.src(src.srcの該当プロパティ, {base: src.root})
      .pipe(gulp.dest(dest.root))

【質問】
どうして同じ書き方なのに出力結果が違うのでしょうか?
どのようにすればdestフォルダにsrcフォルダと同じ階層へ出力出来ますか?

【参考URL】
gulpで階層構造を維持して出力する

【フォルダ構造】
フォルダ構造

【gulpfile.js】


    'use strict';

    const gulp = require('gulp');

    //pug
    const pug = require('gulp-pug');
    const fs = require('fs');
    const data = require('gulp-data');
    const path = require('path');
    const plumber = require('gulp-plumber');
    const notify = require('gulp-notify');
    const browserSync = require('browser-sync');

    //css
    const sass = require('gulp-sass');
    const sassGlob = require('gulp-sass-glob');
    const postcss = require('gulp-postcss');
    const flexBugsFixes = require('postcss-flexbugs-fixes');
    const autoprefixer = require('autoprefixer'); //Sassにベンダープレフィックスをつける
    const rename = require('gulp-rename'); //ファイルをリネーム

    /**
     * 開発用のディレクトリを指定します。
     */
    const src = {
      // 出力対象は`_`で始まっていない`.pug`ファイル。
      'html': ['src/**/*.pug', '!' + 'src/**/_*.pug'],
      // JSONファイルのディレクトリを変数化。
      'json': 'src/_data/',
      'css': 'src/**/*.css',
      'sass_style': ['src/**/*.scss', '!' + 'src/**/_*.scss'],
      //'styleguideWatch': 'src/**/*.scss',
      'js': 'src/**/*.js',
      'root': 'src/'
    };

    /**
     * 出力するディレクトリを指定します。
     */
    const dest = {
      'root': 'dest/',
      'html': 'dest/'
    };

    /**
     * sassファイルをdestディレクトリに同じ階層として出力(コピー)します。
     */
    function sass_style() {
      const plugins = [flexBugsFixes(), autoprefixer({ // ベンダープレフィックスの付与
        browsers: ['last 3 version', 'ie >= 10','iOS >= 9.3', 'Android >= 4.4'], // (ベンダープレフィックスを付与する)対応ブラウザの指定
        cascade: true // 整形する
      })];
      return gulp.src(src.sass_style, {base: src.root})
          .pipe(sassGlob())
          .pipe(sass({
              outputStyle: 'expanded',
            }).on('error', sass.logError)
          )
          .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
          .pipe(postcss(plugins))
          .pipe(rename(function (path) {
            path.dirname += '/css';
          }))
          .pipe(gulp.dest('dest.root'))
          .pipe(browserSync.reload({ stream: true }));
    }

【package.json】


    {
      "name": "pug-sass-test-kaihen",
      "version": "1.0.0",
      "description": "Gulpを使用したPugの導入テストリポジトリです。",
      "main": "browsersync.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "gulp": "gulp"
      },
      "keywords": [
        "gulp",
        "pug",
        "Sass"
      ],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "autoprefixer": "^9.5.1",
        "browser-sync": "^2.26.5",
        "gulp": "^4.0.1",
        "gulp-data": "^1.3.1",
        "gulp-notify": "^3.2.0",
        "gulp-plumber": "^1.2.1",
        "gulp-postcss": "^8.0.0",
        "gulp-pug": "^4.0.1",
        "gulp-rename": "^1.4.0",
        "gulp-sass": "^4.0.2",
        "gulp-sass-glob": "^1.0.9",
        "postcss-flexbugs-fixes": "^4.1.0"
      }
    }

1 件の回答 1

4

.pipe(gulp.dest(dest.root)) ではなく .pipe(gulp.dest('dest.root'))となっていることが原因です。

1
  • いけました!ありがとうございます!
    – wa_
    Commented 2019年5月3日 5:57

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。