54676


gulp js初心者です。

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

[code]

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

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

**【参考URL】**  
[gulpで階層構造を維持して出力する](http://shinimae.hatenablog.com/entry/2017/05/18/212447)

**【フォルダ構造】**  
[![フォルダ構造](https://i.stack.imgur.com/Is7vM.jpg)](https://i.stack.imgur.com/Is7vM.jpg)

**【gulpfile.js】**

[code]

        '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 }));
        }
    
    
[/code]

**【package.json】**

[code]

        {
          "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"
          }
        }
    
    
[/code]


CC BY-SA 4.0
2019-05-03T02:33:25.667
54669
2019-05-09T04:55:31.990
2019-05-09T04:55:31.990
34049
34049
question
javascript gulp sass
gulp 意図したフォルダにsassがコンパイルされない


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


CC BY-SA 4.0
2019-05-03T05:35:27.630
54676
2019-05-03T05:35:27.630
30079
54669
answer