質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    20332questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • gulp

    334questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

  • webpack

    321questions

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 138

_bg

score 5

前提・実現したいこと

いつもお世話になっております。
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周りに不慣れなため説明がわかりづらくて申し訳ありません。
大変恐縮ですがお力をお貸しいただけると幸いです。
何卒よろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yu-smc

    2019/02/18 15:29

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

    キャンセル

  • _bg

    2019/02/18 15:45 編集

    [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

    2019/02/18 18:05

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

    キャンセル

回答 1

checkベストアンサー

0

実装上のバグで、全てのビルドタスクが完了するまえに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",

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/18 18:39

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

    キャンセル

  • 2019/02/18 21:55

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20332questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • gulp

    334questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

  • webpack

    321questions