1. ディレクトリを作成
cmd.exe
mkdir gbb
cd gbb
2. パッケージを配置
package.json
{"name":"gbb","version":"1.0.0","description":"GulpBabelBrowsify","main":"index.js","scripts":{"test":"echo \"Error: no test specified\"&& exit 1","gulp":"gulp"},"author":"","license":"ISC","dependencies":{"@babel/core":"^7.9.6","@babel/preset-env":"^7.9.6","babel-core":"^6.26.3","babel-preset-es2015":"^6.24.1","browser-sync":"^2.26.7","gulp":"^4.0.2","gulp-babel":"^8.0.0","gulp-concat":"^2.6.1","gulp-jshint":"^2.1.0","gulp-plumber":"^1.2.1","gulp-rename":"^2.0.0","gulp-sass":"^4.1.0","gulp-uglify":"^3.0.2","gulp-watch":"^5.0.1"}}3. 構築
cmd.exe
npm start
4. 設定ファイル配置
gbb/gulpfile.js
vargulp=require("gulp");varsass=require("gulp-sass");varconcat=require('gulp-concat');varrename=require('gulp-rename');varuglify=require('gulp-uglify');varplumber=require('gulp-plumber');varbrowser=require("browser-sync");varwatch=require('gulp-watch');varbabel=require("gulp-babel");gulp.task("server",function(){browser({server:{baseDir:"./"}});});gulp.task("gulpjs",function(){gulp.src(_${元ファイルディレクトリ}_).pipe(plumber()).pipe(babel({presets:['@babel/preset-env']})).pipe(uglify()).pipe(rename({extname:'.min.js'}))// 5.pipe(gulp.dest(_${配置先ディレクトリ}_)).pipe(browser.reload({stream:true}));});gulp.task("watch",function(){gulp.watch(_${元ファイルディレクトリ}_, gulp.series('gulpjs'));});5. 開始
cmd.exe
gulp watch
npx gulp watch//ローカルインストールの場合