質問編集履歴

1 忘れていた

nnahito

nnahito score 1837

2018/05/18 15:05  投稿

gulp + webpackが動かない
# はじめに
gulp、webpackともに初心者です。
今はじめて触っています。
なお、PHPのフレームワークはcakephp3(最新)です。
# やりたいこと
gulp起動中にJSファイルを保存したら、minifyしたデータが吐き出されるようにしたい。
# やったこと
nodebrewでnodejsを入れ、
npmでyarnを入れた。
```bash
# プロジェクトフォルダに移動
cd project_folder
# gulp導入
yarn add --dev gulp
# gulpのインストール
yarn 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  
# gulpのインストール  
yarn install  
```  
 
# エラー
`ReferenceError: reload is not defined`と出るので、おそらく`gulpfile.js`の、
`webpackConfig = reload('./webpack.config.js');`が問題かと思われますが……
直し方がわからず……
申し訳ありませんが、お分かりになる方がいらっしゃいましたら、ご教示いただけますと幸いです。
よろしくお願いいたします。
  • gulp

    391 questions

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

  • webpack

    401 questions

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る