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

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

新規登録して質問してみよう
ただいま回答率
85.50%
gulp

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

Q&A

1回答

2581閲覧

gulp + webpackが動かない

nnahito

総合スコア2004

gulp

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

0グッド

0クリップ

投稿2018/05/18 05:50

編集2022/01/12 10:55

はじめに

gulp、webpackともに初心者です。
今はじめて触っています。
なお、PHPのフレームワークはcakephp3(最新)です。

やりたいこと

gulp起動中にJSファイルを保存したら、minifyしたデータが吐き出されるようにしたい。

やったこと

nodebrewでnodejsを入れ、
npmでyarnを入れた。

bash

1# プロジェクトフォルダに移動 2cd project_folder 3 4# gulp導入 5yarn add --dev gulp 6 7# gulpのインストール 8yarn install

さらに、以下gulpfileを見よう見まねで作成。
IntelliJ使ってるんですが、すっごい赤波線が引かれますね……この設定はあるのだろうか…?

gulpfile.js

const path = require('path'); // 絶対パスを指定できるようにする const gulp = require('gulp'); // gulp本体 const iconfont = require('gulp-iconfont'); // gulpでsvgからアイコンフォントを作成する const consolidate = require('gulp-consolidate'); // svgから作ったアイコンフォントを出力するテンプレートエンジンで使う const svgmin = require('gulp-svgmin'); // svgを圧縮する const sass = require('gulp-sass'); // SASSのコンパイル const autoprefixer = require('gulp-autoprefixer'); // CSSのベンダープレフィックス付与を自動化 const runSequence = require('run-sequence'); // 登録したタスクを並列で実行 const plumber = require('gulp-plumber'); // ファイル監視中におかしいとこがあっても監視をストップしない const rename = require('gulp-rename'); // minify したファイル名にminをつけて出力する const sourcemaps = require('gulp-sourcemaps'); // スタイルがどこのファイルから当てられてるのか分かるようになる const cmq = require('gulp-combine-media-queries'); // @mediaの記述があちこちに散らばってる場合、後ろの方にまとめてくれる // 書き出し先設定 const config = { dest: 'webroot/css' } // SASSのCSSコンパイル gulp.task('sass',function() { // webroot/css/scss/配下の物がコンパイル対象 gulp.src('webroot/css/scss/**/*.scss',{base:'.'}) .pipe(plumber()) .pipe(sass()) .pipe(sass({outputStyle: 'expanded'})) .pipe(autoprefixer()) .pipe(rename(function(path){ path.dirname = '.'; })) .pipe(gulp.dest(config.dest)) }); // webpackの設定 gulp.task('webpack', function(){ webpackConfig = reload('./webpack.config.js'); webpackStream(webpackConfig, webpack) .pipe(gulp.dest(webpackConfig.output.path)) }); // 監視し続ける gulp.task('watch',function () { gulp.watch(['webroot/css/scss/**/*.scss'],['sass']); gulp.watch(['webroot/iconfonts/base/*.svg'],['iconfont']); gulp.watch('./webroot/js/vendor/*.js', function (){ gulp.start(['webpack']) }); }); // 監視開始 gulp.task('default',['watch']);

次に、同階層にwebpack.config.jsファイルを作成

webpack.config.js

const path = require('path'); const webpack = require('webpack'); const glob = require('glob'); const entries = []; const bundleFileName = 'minify.js'; // vender配下の.jsファイルがミニファイ対象 glob.sync('./webroot/js/vendor/*.js').map(function(file){ entries.push(file); }); module.exports = { entry: entries, output: { path: path.join(__dirname,'webroot/js'), filename: bundleFileName }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['es2015'] } } } ] }, plugins: [ new webpack.optimize.UglifyJsPlugin(), //new webpack.ProvidePlugin({'Promise': 'es6-promise'}) ] };

再度install

bash

1# gulpのインストール 2yarn install

エラー

ReferenceError: reload is not definedと出るので、おそらくgulpfile.jsの、
webpackConfig = reload('./webpack.config.js');が問題かと思われますが……
直し方がわからず……

申し訳ありませんが、お分かりになる方がいらっしゃいましたら、ご教示いただけますと幸いです。
よろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

普通 reload() じゃなくて require() じゃないのかな?
そうでなければどこかで reload() 関数を定義する必要があるはずです。

投稿2018/06/05 17:02

okinaka3

総合スコア304

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問