gulp4 browserify,browser-sync,watch

今回はgulp4でbrowserify,browser-sync,watchを使うためのメモです。

というのも環境構築するときに、

Requiring external module babel-register

というエラーが出て、

node.jsのバージョンも下げられず(nvmで下げられた！)、gulpのバージョンを4に上げました。

nvmについてはこちら。

環境構築メモ

忘れないようにmacのコマンドラインのメモです。npmで環境構築する時に必要なバージョン確認やモジュールのインストール・アンインストール方法についてです。

node.jsのバージョンは、19.7.0。

package.jsonはこちら。

{
  "name": "backbone_sample02",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "gulp",
    "start": "gulp"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "backbone": "^1.3.3",
    "jquery": "^3.2.1",
    "npm-check-updates": "^16.7.10",
    "underscore": "^1.8.3",
	"vinyl-fs": "^3.0.0"
  },
  "devDependencies": {
    "browser-sync": "^2.28.2",
    "browserify": "^14.5.0",
    "gulp": "^4.0.2",
    "vinyl-source-stream": "^2.0.0",
	"babelify": "^10.0.0"
  },
  "overrides": {
    "graceful-fs": "^4.2.10"
  }
}

gulpfile.jsはこちら。

const gulp = require('gulp');
const browserify = require('browserify');
const browserSync = require('browser-sync').create();
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const distDir = './dist/';
const distHtmlFiles = './*.html';
const distCssFiles = './dist/*.css';
const distJSFiles = './dist/*.js';
const srcJSFiles = './src/*.js';


const build = () =>
	browserify({
		entries: ['src/app.js'] })
		.transform(babelify)
		.bundle()
		.pipe(source('bundle.js'))
		.pipe(gulp.dest('dist/'))


function browsersyncServe(cb){
		  browserSync.init({
			server: {
			  baseDir: '.', 
			  index: "index.html" 
			}    
		  });
		  cb();
		}

const bsreload = () =>
	browserSync.reload();

const watchFiles = () =>
	const watchFiles = () =>
	gulp.watch(srcJSFiles, build);
	gulp.watch(srcJSFiles, bsreload);
	gulp.watch(distHtmlFiles, bsreload);
	gulp.watch(distCssFiles, bsreload);
		
exports.default = gulp.series(browsersyncServe,watchFiles);