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

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

ただいまの
回答率

90.50%

  • JavaScript

    20366questions

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

  • jQuery

    8144questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • webpack

    322questions

webpack環境でのjqueryプラグインの使用について

解決済

回答 1

投稿 編集

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

_bg

score 5

いつもお世話になっております。
当方javascript初心者ですが、質問させていただきたいです。

npmに登録されているプラグインをインストールし、jsファイルにimport '...' で記述しているのですが、
一部のプラグインが正しく読み込めてないらしく、ビルドできずにエラーを吐いています。
因みにgulpのコンパイル機能、ライブリロード機能と併用して使っているので、更新する度にビルドされるよう設定しています。

※下記コード参考元です。
https://www.npmjs.com/package/scrolltrigger-classes
https://www.npmjs.com/package/scroll-triggers

 発生している問題・エラーメッセージ

Module not found: Error: Can't resolve 'scroll-triggers' in '/Users/shiriedanobuyoshi/gulp-tutorial/src/assets/js'

 main.js

//jquery
import $ from 'jquery'

//slick
import 'slick-carousel'
import '../../../node_modules/slick-carousel/slick/slick.css'
import '../../../node_modules/slick-carousel/slick/slick-theme.css'

//scrolltrigger
import 'scroll-triggers'
import scrollTriggers from 'scroll-triggers';
scrollTriggers({
  '.some-selector': {
    start: '.selector',
    end: '.selector',
    className: 'class-to-add',
    image: 'image/path.jpg',
    position: 'top|middle|bottom',
    progress: true|false,
    inView: function(el, options) {},
    outOfView: function(el, options) {}
  }
});

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'))
})


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

 //JS圧縮
 gulp.task('minify-js', function() {
   var files = []
     return gulp.src(["./src/assets/js/vendor/*.js","!"+"./src/assets/js/vendor/jquery.min.js"])
         .pipe(uglify())
         .pipe(concat('bundle.js'))
         .pipe(gulp.dest('./public/assets/js/vendor/'));
 });

 // 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/page/**/*.ejs",gulp.series('ejs'));

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

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

  gulp.src('./dist/bundle.js')
  .pipe(gulp.dest('./public/assets/js/vendor/'))//main.jsをそのままpublicに書き出し

  // gulp.src(["./src/assets/js/vendor/*.js","!"+"./src/assets/js/vendor/jquery.min.js"])
  //     .pipe(uglify())
  //     .pipe(concat('bundle.js'))
  //     .pipe(gulp.dest('./public/assets/js/vendor/'));//その他jsを圧縮してpublicに書き出し




  gulp.watch('./src/**/*',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

module.exports = {
  mode: "production",
  entry:'./src/assets/js/main.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']
      }
    ]
  }
}

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",
    "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",
    "jquery": "^3.3.1",
    "luxy.js": "^0.1.0",
    "scrolltrigger": "^1.0.1",
    "scrolltrigger-classes": "^0.3.6",
    "slick-carousel": "^1.8.1",
    "useragent": "^2.3.0"
  }
}

 不明点

jqueryやslick.jsは上記の記述で問題なくインポートできており、動いています。
scrolltrigger.jsだけがうまくいきません。

document.addEventListener.. の記述を消してみたら
正常にビルドできたっぽいので、もしかして呼び出し方が間違っているのでしょうか??

基本的なところが分かってない故、イライラさせてしまったら申し訳ありません。
やっとのことでwebpackを導入できたので、楽にプラグインを入れまくれると思ったらこのザマです、、(泣)
どなたかお力を貸していただけると嬉しいです。

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

検証スマートフォン:mac sierra
ブラウザ:chrome

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • spookybird

    2018/09/09 14:45

    gulpfile.js、webpack.config.js、package.jsonをご提示いただけますか。

    キャンセル

  • _bg

    2018/09/09 15:22

    ありがとうございます。ご指摘いただいたjsを追加しました。ご確認をお願いします。

    キャンセル

回答 1

checkベストアンサー

0

package.json"scrolltrigger": "^1.0.1",と書いてありますので、
インストールされたモジュールは
scrolltriggerこちらですね。

使いたいのはscroll-triggersこちらのようですから、
scrolltriggerをUninstallし、scroll-triggersをInstallされるといいと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/09/09 17:12

    解決できました!!ありがとうございます!!

    キャンセル

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

  • JavaScript

    20366questions

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

  • jQuery

    8144questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • webpack

    322questions