はじめに
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');
が問題かと思われますが……
直し方がわからず……
申し訳ありませんが、お分かりになる方がいらっしゃいましたら、ご教示いただけますと幸いです。
よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。