はじめに
最近Gulpに取り掛かりはじめたばかりの、フロントエンド模索中の者です。
Gulp内に3つタスクを設定しております。
webpackを起動してバンドルさせる「bundle」、Sassのコンパイルをさせる「sass」、
ファイルの変更をwatchしてbundleとsassを実行させる「watch」の3つです。
特に「watch」に関しては、「gulp watch」を実行するだけのシンプルなバッチファイル「watch.bat」を作成したうえで、
このファイルをダブルクリックすることで自動で開始できるようにしてあります。
しかしながら、この「watch」タスクのバッチファイルに不満な点がございます。
それは、「watch.batのクリックで起動からのファイルの操作」ではタスクが動くものの、
「ファイルの操作からのwatch.batクリックで起動」という動作ではタスクは動かないことです。
watch.batクリックで起動と同時に、ファイルの操作の有無にかかわらず
bundleとSassコンパイルをさせるようにしてしまった方が楽だと考えました。
しかしながら、gulpfile.js内のどこをいじれば目的の動作ができるのか、てんで見当がつきません。
無知なりにやってみるものの、すぐwatch.batファイルが落ちるなどして途方に暮れてしまいます。
もしや、バッチファイル自体をいじる必要があるのだろうか!?とも思います。
ちなみに予めお伝えしておくべきかもしれない懸念事項がございます。
gulpfile.js内最後に「default」というタスクを設定したうえで、bundleとsassをまとめて実行させる記述をしたはいいが、
コマンドプロンプトに妙なエラーが表示されることです。
この事実も、もし関係あるとしたら怖いので、一応記載しておきます。
わかりにくい点がございましたらおっしゃってください。
追記いたします。
皆様ご査収のうえで、ご回答よろしくお願いします。
追記(10/17)
当方の環境はWindows10、
nodeのバージョンは10.16.3、
npmのバージョンは6.14.2、
gulpのバージョンは
「CLI version: 2.3.0
Local version: 4.0.2」となっております。
gulpに詳しい方、私の記述のマズい点を分析できる方、お待ちしております。
よろしくお願いいたします。
gulpfile.js
JavaScript
1var gulp = require('gulp'); 2var sass = require('gulp-sass'); 3var autoprefixer = require('gulp-autoprefixer'); 4 5var webpackStream = require("webpack-stream"); 6var webpack = require("webpack"); 7var webpackConfig = require("./webpack.config"); 8 9var AUTOPREFIXER_BROWSERS = [ 10 'last 2 version', 11 'ie >= 9', 12 'iOS >= 7', 13 'Android >= 4.2' 14]; 15 16var src = { 17 'scss': ['csssrc/**/*.scss', '!csssrc/**/_*.scss'], 18 'scssWatch': 'csssrc/**/*.scss', 19 'js': 'src/**/*.js' 20}; 21 22var dest = { 23 'css': './' 24}; 25 26gulp.task('bundle', function(){ 27 return webpackStream(webpackConfig, webpack) 28 .pipe(gulp.dest('dist')); 29}); 30 31gulp.task('sass', function(){ 32 return gulp.src(src.scss) 33 .pipe(sass({outpStyle: 'expanded'})).on("error", sass.logError) 34 .pipe(autoprefixer(AUTOPREFIXER_BROWSERS)) 35 .pipe(gulp.dest(dest.css)); 36}); 37 38gulp.task('watch', function() { 39 gulp.watch(src.scssWatch, gulp.task('sass')); 40 gulp.watch(src.js, gulp.task('bundle')); 41 42}); 43 44gulp.task('default', function() { 45 return gulp.task('bundle','sass'); //これが効かない 46});
package.json
json
1{ 2 "name": "react_practice", 3 "version": "1.0.0", 4 "description": "Mari Takahashi", 5 "main": "webpack.config.js", 6 "scripts": { 7 "build": "gulp" 8 }, 9 "author": "Mari Takahashi", 10 "license": "ISC", 11 "dependencies": { 12 "react": "^16.13.1", 13 "react-dom": "^16.13.1" 14 }, 15 "devDependencies": { 16 "@babel/core": "^7.11.6", 17 "@babel/preset-env": "^7.11.5", 18 "@babel/preset-react": "^7.10.4", 19 "babel-loader": "^8.1.0", 20 "gulp": "^4.0.2", 21 "gulp-autoprefixer": "^7.0.1", 22 "gulp-sass": "^4.1.0", 23 "webpack": "^5.1.0", 24 "webpack-stream": "^6.1.0" 25 } 26} 27
バッチファイル
bat
1gulp watch
default実行時に表示される謎のエラー
自己解決いたしました。
defaultタスクの記述部分を以下のようにすることでタスクが効くようになりました。
お騒がせいたしました。
JavaScript
1//defaultタスク 2gulp.task('default', 3 gulp.series('bundle','sass','watch') 4);
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。