gulp、webpack使用時のsassのコンパイルが一部うまく行かない

Question

前提・実現したいこと

いつもお世話になっております。
gulpとwebpackを使用していますが、sass→cssやjs、htmlもコンパイルがうまくいかないことが頻繁にあります。
gulpを一回切ってからもう一度起動すると大抵うまくいきます。
このことからキャッシュ？が原因な気がしましています。
gulp周りの記述は書籍やネット上からの情報のツギハギでして、自力で解決できず詰まっています。
お力をお貸しいただけると幸いです。

###gulpfile.js

const fs = require('fs')
const gulp = require('gulp')
const sass = require('gulp-sass')
const postcss = require('gulp-postcss')
const autoprefixer = require('autoprefixer')
const plumber     = require('gulp-plumber');
const sourcemaps  = require('gulp-sourcemaps');
const flexBugsFixies = require('postcss-flexbugs-fixes')
const cssWring = require('csswring')
const ejs = require('gulp-ejs')
const data = require('gulp-data')
const imagemin = require('gulp-imagemin')
const browserSync = require('browser-sync').create()
const uglify      = require('gulp-uglify');// js圧縮
const concat = require("gulp-concat");
const wait    = require('gulp-wait');
const bulkSass = require('gulp-sass-bulk-import');
const ftp = require('vinyl-ftp')//ftpアップロード
const fancyLog = require('fancy-log')//アップロードのログ表示
const srcset = require('gulp-sugar-srcset')//retina対応
const webpack = require("webpack");//gulpでwebpackを使用
const webpackStream = require("webpack-stream");
const webpackConfig = require("./webpack.config");
const cleanCSS = require("gulp-clean-css");
const rename   = require("gulp-rename");




// const configJsonData = fs.readFileSync('./src/config.json')
// const configObj = JSON.parse(configJsonData)

// const PostcssMixins = require('postcss-mixins');
// const PostcssImport = require('postcss-import');

const autopreFixerOption = {
  grid : true
}

// const ejsDataOption = {
//   config:configObj
// }

const ejsSettingOptions = {
  ext:'.html'
}

const postcssOption = [
  flexBugsFixies,
  // PostcssMixins,
  // PostcssImport,
  autoprefixer({
    browsers: ['last 2 version', 'iOS >= 8.1', 'Android >= 4.4'],
    cascade:false
  })
  //cssWring
]

const browserSyncOption = {
  server:'./public'
}

var paths = {
  'scss': './src/sass/',
  // 'css': './dist/css/',
  // 'js': './dist/js/',
  'ejs': './view/'
}

//sass
gulp.task('sass',()=>{
  return gulp.src('./src/assets/sass/*.scss')
  .pipe(bulkSass())//フォルダごとにimportされているものもコンパイル化
  .pipe(plumber())
  .pipe(sourcemaps.init())
  .pipe(sass().on('error',sass.logError))
  .pipe(postcss(postcssOption))
  .pipe(gulp.dest('./public/assets/css/'))
})


//ejs
gulp.task('ejs',()=>{
return gulp.src(['./src/view/page/**/*.ejs','./src/view/page/*.ejs','!'+'./src/view/page/**/_*.ejs'])
.pipe(ejs({},{},ejsSettingOptions))
.pipe(gulp.dest('./public'))
})

//JS
gulp.task('minify-js', function() {
    return gulp.src('./src/assets/js/main.js')
        .pipe(gulp.dest('./public/assets/js'));
});


//img圧縮
 // gulp.task('imagemin',()=>{
 //   return gulp
 //   .src('./src/img/*')
 //   .pipe(imagemin())
 //   .pipe(gulp.dest('./public/assets/img/'))
 // })

 // gulp.task("minify-css", function() {
 //     return gulp.src('./src/assets/css/**/*.css')
 //         .pipe(cleanCSS())
 //         .pipe(rename({
 //             extname: '.commoncustom.css'
 //         }))
 //         .pipe(gulp.dest('./public/assets/css/'));
 // });

 //ftpアップロード
 gulp.task('ftp',function(){
   const ftpConfig = {
     host:'gulp.gulp.jp',
     user:'gulp',
     password:'gulp',
     log:fancyLog
   }
   const connect = ftp.create(ftpConfig)
   const ftpUploadFiles = './public.**/*'
   const ftpUploadConfig = {
     buffer:false
   }
   const remoteDistDir = 'public_html'

   return gulp.src(ftpUploadFiles,ftpUploadConfig)
   .pipe(connect.newer(remoteDistDir))
   .pipe(connect.dest(remoteDistDir))
 })

 //retina対応
 // gulp.task('sugar-srcset',function(){
 //   return gulp.src('./src/assets/img/*')
 //   .pipe(srcset())
 //   .pipe(gulp.dest('./public/assets/img/'))
 // })


// ローカルサーバー
gulp.task('server', (done) => {
  browserSync.init(browserSyncOption);
  done();
});

//ブラウザリロード
gulp.task('watch',(done)=>{

  const browserReload = (done) =>{
    browserSync.reload()
    done();
  }

  gulp.src('./src/assets/img/**/*')
  .pipe(gulp.dest('./public/assets/img/'))//imgをそのままpublicに書き出し

  gulp.watch("./src/view/**/*.ejs",gulp.series('ejs',browserReload));

  gulp.watch("./src/assets/sass/**/*.scss",gulp.series('sass',browserReload));
  // gulp.watch("./src/assets/css/**/*.css",gulp.series('minify-css'));

  gulp.watch('./src/assets/js/main_custom.js',gulp.series('webpack',browserReload));

})

gulp.task('webpack',function(){
  return webpackStream(webpackConfig, webpack)
    .pipe(gulp.dest("./public/assets/js/vendor/"));
});


//タスク実行
gulp.task('default',gulp.series('server','watch'))

###webpack.config.js

const webpack = require('webpack');

module.exports = {
  mode: "development",
  devtool: 'inline-source-map',
  entry: './src/assets/js/main_custom.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [{
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /.gif|png|jpg|eot|wof|woff|ttf|svg$/,
        use: ['url-loader']
      },
      {
        test: require.resolve('snapsvg'),
        loader: 'imports-loader?this=>window,fix=>module.exports=0'
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
}

###package.json

{
  "name": "gulp-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prod": "webpack --mode production",
    "dev": "webpack --mode development -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "autoprefixer": "^9.1.0",
    "babel-loader": "^8.0.0-beta.4",
    "browser-sync": "^2.24.6",
    "css-loader": "^1.0.0",
    "csswring": "^7.0.0",
    "fancy-log": "^1.3.2",
    "gulp": "^4.0.0",
    "gulp-clean-css": "^3.10.0",
    "gulp-concat": "^2.6.1",
    "gulp-data": "^1.3.1",
    "gulp-ejs": "^3.1.3",
    "gulp-htmlmin": "^4.0.0",
    "gulp-imagemin": "^4.1.0",
    "gulp-plumber": "^1.2.0",
    "gulp-postcss": "^8.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.1",
    "gulp-sass-bulk-import": "^1.0.1",
    "gulp-sass-glob": "^1.0.9",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-sugar-srcset": "^0.4.1",
    "gulp-uglify": "^3.0.1",
    "gulp-wait": "0.0.2",
    "imagemin-pngquant": "^6.0.0",
    "imports-loader": "^0.8.0",
    "postcss-flexbugs-fixes": "^4.1.0",
    "postcss-import": "^12.0.0",
    "postcss-mixins": "^6.2.0",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "vinyl-ftp": "^0.6.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-stream": "^5.1.1"
  },
  "dependencies": {
    "animate.css": "^3.7.0",
    "animsition": "^4.0.2",
    "drawsvg": "^1.1.0",
    "easescroll": "0.0.10",
    "jquery": "^3.3.1",
    "jquery-mousewheel": "^3.1.13",
    "jquery-ui": "^1.12.1",
    "jquery.easing": "^1.4.1",
    "luxy.js": "^0.1.0",
    "malihu-custom-scrollbar-plugin": "^3.1.5",
    "rellax": "^1.7.2",
    "scroll-triggers": "^3.16.0",
    "scrollmagic": "^2.0.5",
    "scrollreveal": "^4.0.5",
    "scrolltrigger": "^1.0.1",
    "scrolltrigger-classes": "^0.3.6",
    "skrollr": "^0.6.26",
    "slick-carousel": "^1.8.1",
    "snapsvg": "^0.5.1",
    "snapsvg-cjs": "0.0.6",
    "three": "^0.100.0",
    "useragent": "^2.3.0",
    "vanilla.js": "^0.1.6",
    "waypoints": "^4.0.1",
    "webpack-jquery-ui": "^2.0.1"
  }
}

補足情報（FW/ツールのバージョンなど）

gulpとwebpackを連動させる設定にしてから、更新時のコンパイルが結構重くなったような印象があり、
無駄が多い設定な気がしてなりません、、
gulp周りに不慣れなため説明がわかりづらくて申し訳ありません。
大変恐縮ですがお力をお貸しいただけると幸いです。
何卒よろしくお願い致します。

Comments

[yu-smc]

タスク失敗した時のログをご提示いただけますでしょうか。

[_bg]

[Browsersync] Reloading Browsers...
[15:38:28] Starting 'browserReload'...
[15:38:28] Finished 'browserReload' after 886 μs
[15:38:28] Starting 'sass'...
[15:38:28] Finished 'sass' after 385 ms
[Browsersync] Reloading Browsers...
[15:39:12] Starting 'browserReload'...
[15:39:12] Finished 'browserReload' after 462 μs
[15:39:12] Starting 'sass'...
[Browsersync] Reloading Browsers...
[15:39:13] Finished 'sass' after 1.12 s

すみません、こちらです。ログ自体はエラーを吐いていないと思います。
今気づいたのですが、cmd + shifr + r でスーパーリロードを行うと表示が正常になった気がします。
ただ更新に応じてコンパイル＋ライブリロードされることがメリットですので、毎回スーパーリロードを行うのは本末転倒な気がします、、
因みに使用ブラウザはchromeです。

[yu-smc]

原因がおそらくわかりましたので、回答します。

Answer 1

実装上のバグで、全てのビルドタスクが完了するまえにBrowsersyncが起動するため、コンパイルされていないファイルをブラウザが読みに行ってエラーとなっているのだと思います。

私もBrowsersyncを使っていますが、まず直列処理で全てのファイルをビルドしてから、watchタスクとbrowsersyncを並列で起動しています。

＜追記＞ブラウザリロードのためのwatchタスクはしっかり書かれているようなので、上記の方法ではなくそのタスクを利用するなら、当該部分のどこかに欠陥がありそうなので直す必要がありそうです。

＜追記＞
一例ですが、npm scriptsでの例になってしまうのですが掲載しておきます。

    "local": "NODE_ENV=local npm-run-all -s local:build:** && npm-run-all -p local:watch:**",
    "local:build:clean": "rimraf ./local/**",
    "local:build:copy": "cpx ./src/images/** ./local/images/",
    "local:build:pug": "gulp pug:local",
    "local:build:scss": "node-sass ./src/scss/build.scss ./local/styles/style.css",
    "local:build:js": "webpack",
    "local:watch:pug": "onchange \"./src/pug/\" -- npm run local:build:pug",
    "local:watch:scss": "onchange \"./src/scss/\" -- npm run local:build:scss",
    "local:watch:js": "onchange \"./src/js/\" -- npm run local:build:js",
    "local:watch:server": "browser-sync start --server \"./local/templates/\" --config bs-config.js",

１行目で、-s, -pを使い、直列で動かす処理と並列で動かす処理をわけています。npm-run-allは一度に複数タスクを実行するライブラリです。その他、webpack, gulpやら色々使っていますが、タスク命令はすべてnpm scriptsでやっているかんじです。

Comments

[_bg]

ご回答ありがとうございます。
最初に直列処理で全てのファイルをビルドさせるということですが、parallelを使うということですかね？
お手数をお掛けして大変申し訳ないのですが、どのように記述するか一例をいただけないでしょうか。

[yu-smc]

直列=series
並列=parallel
なので逆ですね。
すみません、手持ちがnpm scriptsでのコードしかないのですが、参考になるかもしれないので回答に追記します。