This commit is contained in:
tatianamac
2019-11-26 14:50:43 -08:00
parent 8a55660ed0
commit 6d5445ecc5
13894 changed files with 2233957 additions and 0 deletions

View File

@ -0,0 +1,4 @@
body {
background: white;
color: black;
}

View File

@ -0,0 +1,15 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Browsersync Browserify Example</title>
<link rel='stylesheet' href='css/main.css'>
</head>
<body>
<h1>Browsersync Browserify Example</h1>
<div id="example"></div>
<script src="js/dist/bundle.js"></script>
</body>
</html>

View File

@ -0,0 +1 @@
let app = 'awesome';

View File

@ -0,0 +1 @@
*.js

View File

@ -0,0 +1,15 @@
{
"version": 3,
"sources": [
"node_modules/browserify/node_modules/browser-pack/_prelude.js",
"app.js"
],
"names": [],
"mappings": "AAAA;;;ACAA,IAAI,GAAG,GAAG,SAAS,CAAC;AACpB,SAAS",
"file": "generated.js",
"sourceRoot": "",
"sourcesContent": [
"(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==\"function\"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(\"Cannot find module '\"+o+\"'\");throw f.code=\"MODULE_NOT_FOUND\",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==\"function\"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})",
"let app = 'awesome';\ndebugger;"
]
}

View File

@ -0,0 +1,3 @@
This one is a beast. Write your React JSX code, in ES6, compiled by Browserify and auto-reload all devices
when the compilation is complete.

View File

@ -0,0 +1,54 @@
var gulp = require('gulp');
var gutil = require('gulp-util');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
var watchify = require('watchify');
var exorcist = require('exorcist');
var browserify = require('browserify');
var browserSync = require('browser-sync').create();
// Watchify args contains necessary cache options to achieve fast incremental bundles.
// See watchify readme for details. Adding debug true for source-map generation.
watchify.args.debug = true;
// Input file.
var bundler = watchify(browserify('./app/js/app.js', watchify.args));
// Babel transform
bundler.transform(babelify.configure({
sourceMapRelative: 'app/js'
}));
// On updates recompile
bundler.on('update', bundle);
function bundle() {
gutil.log('Compiling JS...');
return bundler.bundle()
.on('error', function (err) {
gutil.log(err.message);
browserSync.notify("Browserify Error!");
this.emit("end");
})
.pipe(exorcist('app/js/dist/bundle.js.map'))
.pipe(source('bundle.js'))
.pipe(gulp.dest('./app/js/dist'))
.pipe(browserSync.stream({once: true}));
}
/**
* Gulp task alias
*/
gulp.task('bundle', function () {
return bundle();
});
/**
* First bundle, then serve from the ./app directory
*/
gulp.task('default', ['bundle'], function () {
browserSync.init({
server: "./app"
});
});

View File

@ -0,0 +1,20 @@
{
"name": "gulp.browserify",
"version": "1.0.0",
"description": "Browserify, Babelify + Watchify + Sourcemaps Example",
"main": "gulpfile.js",
"scripts": {
"start": "gulp"
},
"license": "MIT",
"devDependencies": {
"exorcist": "^0.4.0",
"babelify": "^6.1.2",
"browser-sync": "^2.2.1",
"browserify": "^8.1.3",
"gulp": "^3.8.11",
"gulp-util": "^3.0.3",
"vinyl-source-stream": "^1.0.0",
"watchify": "^2.3.0"
}
}

View File

@ -0,0 +1,91 @@
#Browsersync - Browserify, Babelify + Watchify + Sourcemaps Example
## Installation/Usage:
To try this example, follow these 4 simple steps.
**Step 1**: Clone this entire repo
```bash
$ git clone https://github.com/Browsersync/recipes.git bs-recipes
```
**Step 2**: Move into the directory containing this example
```bash
$ cd bs-recipes/recipes/gulp.browserify
```
**Step 3**: Install dependencies
```bash
$ npm install
```
**Step 4**: Run the example
```bash
$ npm start
```
### Additional Info:
This one is a beast. Write your React JSX code, in ES6, compiled by Browserify and auto-reload all devices
when the compilation is complete.
### Preview of `gulpfile.js`:
```js
var gulp = require('gulp');
var gutil = require('gulp-util');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
var watchify = require('watchify');
var exorcist = require('exorcist');
var browserify = require('browserify');
var browserSync = require('browser-sync').create();
// Watchify args contains necessary cache options to achieve fast incremental bundles.
// See watchify readme for details. Adding debug true for source-map generation.
watchify.args.debug = true;
// Input file.
var bundler = watchify(browserify('./app/js/app.js', watchify.args));
// Babel transform
bundler.transform(babelify.configure({
sourceMapRelative: 'app/js'
}));
// On updates recompile
bundler.on('update', bundle);
function bundle() {
gutil.log('Compiling JS...');
return bundler.bundle()
.on('error', function (err) {
gutil.log(err.message);
browserSync.notify("Browserify Error!");
this.emit("end");
})
.pipe(exorcist('app/js/dist/bundle.js.map'))
.pipe(source('bundle.js'))
.pipe(gulp.dest('./app/js/dist'))
.pipe(browserSync.stream({once: true}));
}
/**
* Gulp task alias
*/
gulp.task('bundle', function () {
return bundle();
});
/**
* First bundle, then serve from the ./app directory
*/
gulp.task('default', ['bundle'], function () {
browserSync.init({
server: "./app"
});
});
```