いつもお世話になっております。
当方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
回答1件
あなたの回答
tips
プレビュー