win7 + gulp + babel + browsify 速効構築

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

//install module by package.json
npm install

4. 設定ファイル配置

gbb/gulpfile.js

var gulp   = require("gulp");
var sass   = require("gulp-sass");
var concat = require( 'gulp-concat' );
var rename = require( 'gulp-rename' );
var uglify = require( 'gulp-uglify' );
var plumber= require( 'gulp-plumber' );
var browser= require("browser-sync");
var watch  = require('gulp-watch');
var babel  = 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//ローカルインストールの場合